Make WordPress Core

Opened 5 weeks ago

Last modified 3 weeks ago

#48355 assigned defect (bug)

Media: add semantic indication for the buttons group active state

Reported by: afercia Owned by: afercia
Milestone: 5.3.1 Priority: normal
Severity: normal Version:
Component: Media Keywords: has-screenshots has-patch
Focuses: ui, accessibility, javascript Cc:
PR Number:


In the media views, there are a few places where "buttons groups" are used. For example: the alignment setting, the video preload setting, the "Insert from URL' media settings:


The active button gets an .active CSS class, which changes the visual and makes the button look active.

However, there's no semantic indication at all of the button state. Assistive technologies and any other software won't have a clue what the active setting value is.

The aria-pressed state would help in this case. Although, according to the ARIA recommendation, it should be used on buttons that "require a full press-and-release cycle to change their value", it's the only ARIA attribute that can be used on buttons to communicate their active state.

Attachments (1)

48355.diff (770 bytes) - added by afercia 5 weeks ago.

Download all attachments as: .zip

Change History (4)

5 weeks ago

#1 @afercia
5 weeks ago

  • Keywords has-patch added

48355.diff adds the aria-pressed attribute to the media buttons group. This way, buttons in a group are announced as "toggle button" (the announcement may vary depending on the screen reader):


And the active button is announced as "selected":


This ticket was mentioned in Slack in #accessibility by afercia. View the logs.

3 weeks ago

#3 @afercia
3 weeks ago

  • Milestone changed from Awaiting Review to 5.3.1
  • Owner set to afercia
  • Status changed from new to assigned
Note: See TracTickets for help on using tickets.