Make WordPress Core

Opened 3 years ago

Closed 3 years ago

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

Download all attachments as: .zip

Change History (10)

3 years ago

Convert media playlist control to button

#1 @joedolson
3 years ago

  • Keywords has-patch added

#2 @samuelsidler
3 years ago

  • Milestone changed from Awaiting Review to 3.9

Moving to 3.9 for review.

#3 @nacin
3 years 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.

3 years ago

#4 @wonderboymusic
3 years ago

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

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

3 years ago

#6 @joedolson
3 years 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.

#7 @wonderboymusic
3 years 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.