Make WordPress Core

#27644 closed defect (bug) (fixed)

Audio/Video playlists not keyboard accessible.

Reported by: joedolson Owned by: wonderboymusic
Milestone: 3.9 Priority: normal
Severity: normal Version: 3.9
Component: Media Keywords: has-patch
Focuses: accessibility Cc:


The media elements default implementation already has keyboard accessibility issues, because there's no way to bring the controls into focus for keyboards. The playlist can be made accessible simply by changing the wp-playlist-item-title wrapper from a <span> to an <a href="#"> or a <button>, so they automatically carry keyboard accessibility.

This still doesn't allow a keyboard-dependent user any way to stop or pause the video, but they can at least play videos in the playlist.

Note, as well, that since the Add Media Panel is not accessible (see #25100, #25101, #25102, #25103, #25105), it will continue to be impossible for a keyboard-dependent user to insert videos or subtitles.

Attachments (3)

27644.patch (1.1 KB) - added by joedolson 11 months ago.
Convert media playlist control to button
27644.diff (1.2 KB) - added by wonderboymusic 11 months ago.
27644.2.diff (1.7 KB) - added by wonderboymusic 11 months ago.

Download all attachments as: .zip

Change History (10)

@joedolson11 months ago

Convert media playlist control to button

comment:1 @joedolson11 months ago

  • Keywords has-patch added

comment:2 @samuelsidler11 months ago

  • Milestone changed from Awaiting Review to 3.9

Moving to 3.9 for review.

comment:3 @nacin11 months ago

  • Owner set to wonderboymusic
  • Status changed from new to assigned

Seems OK but it's possible a theme could be styling <button> very interestingly. Using a link might be a bit easier styling-wise.

@wonderboymusic11 months ago

comment:4 @wonderboymusic11 months ago

27644.diff uses an <a>. I guarantee CSS will fail in the wild at the some point.

comment:5 @ircbot11 months ago

This ticket was mentioned in IRC in #wordpress-dev by wonderboymusic. View the logs.

comment:6 @joedolson11 months ago

That patch uses an <a> with no href attribute, which doesn't provide keyboard accessibility. An anchor with no href attribute is not keyboard focusable. If you want to use an anchor, it'll need to include an href attribute and the associated scripts will need to apply preventDefaults.

@wonderboymusic11 months ago

comment:7 @wonderboymusic11 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 28023:

Make playlist tracks keyboard-accessible.

Fixes #27644.

Note: See TracTickets for help on using tickets.