WordPress.org

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:

Description

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

Download all attachments as: .zip

Change History (10)

@joedolson14 months ago

Convert media playlist control to button

comment:1 @joedolson14 months ago

  • Keywords has-patch added

comment:2 @samuelsidler14 months ago

  • Milestone changed from Awaiting Review to 3.9

Moving to 3.9 for review.

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

@wonderboymusic14 months ago

comment:4 @wonderboymusic14 months ago

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

comment:5 @ircbot14 months ago

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

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

@wonderboymusic14 months ago

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