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 15 months ago.
Convert media playlist control to button
27644.diff (1.2 KB) - added by wonderboymusic 15 months ago.
27644.2.diff (1.7 KB) - added by wonderboymusic 15 months ago.

Download all attachments as: .zip

Change History (10)

@joedolson15 months ago

Convert media playlist control to button

comment:1 @joedolson15 months ago

  • Keywords has-patch added

comment:2 @samuelsidler15 months ago

  • Milestone changed from Awaiting Review to 3.9

Moving to 3.9 for review.

comment:3 @nacin15 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.

@wonderboymusic15 months ago

comment:4 @wonderboymusic15 months ago

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

comment:5 @ircbot15 months ago

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

comment:6 @joedolson15 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.

@wonderboymusic15 months ago

comment:7 @wonderboymusic15 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.