Make WordPress Core

Opened 10 years ago

Closed 10 years ago

#27644 closed defect (bug) (fixed)

Audio/Video playlists not keyboard accessible.

Reported by: joedolson's profile joedolson Owned by: wonderboymusic's profile 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 10 years ago.
Convert media playlist control to button
27644.diff (1.2 KB) - added by wonderboymusic 10 years ago.
27644.2.diff (1.7 KB) - added by wonderboymusic 10 years ago.

Download all attachments as: .zip

Change History (10)

10 years ago

Convert media playlist control to button

#1 @joedolson
10 years ago

  • Keywords has-patch added

#2 @samuelsidler
10 years ago

  • Milestone changed from Awaiting Review to 3.9

Moving to 3.9 for review.

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

#4 @wonderboymusic
10 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.

10 years ago

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