Make WordPress Core

Opened 8 weeks ago

Last modified 5 days ago

#47610 new defect (bug)

Media modal: add more headings to better identify the main sections and improve content navigation for assistive technology users

Reported by: afercia Owned by:
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Media Keywords: has-screenshots needs-design-feedback
Focuses: ui, accessibility, javascript Cc:


One of the historical issues within the media modal is that content navigation for keyboard and assistive technology users is challenging.

For example, when the media grid has many attachments, users are forced to navigate through all the attachments to get to the sidebar or to go back to the menu on the left. Dozens or hundreds of key presses are required, depending on the amount of attachments displayed.

With the introduction of the new Heading media view. and improving some of the existing media templates, it is now possible to easily add more headings in the media modal.

Users of assistive technologies use headings as the predominant mechanism for finding page information. Screen readers provide keyboard shortcuts and other tools to "jump" through headings, thus making content navigation way more efficient. Also, a correct headings hierarchy is extremely important to allow users to get a sense of how content is organized.

Currently, there are 4 headings in the media modal:


Note: this varies depending on the actual media "frame" being used.

In #47145, the proposed patch moves the main H1 heading before the menu so that it's the first thing within the modal content.

I'd like to propose to add a few more headings, at the very least:

  • before the left menu
  • before the selects to filter attachments and the search field
  • before the "current selection" area in the bottom bar

Ideally, these headings should be visible because clearly identifying content sections helps all users. Worth noting headings don't necessarily need to be styled with a "big" font size. They just have to use the correct heading level and establish some typographic hierarchy.

Where there's not enough space, one option to evaluate could be hiding the headings visually using the CSS class screen-reader-text.

Change History (4)

#1 @afercia
8 weeks ago

See some initial design feedback on this related ticket comment: https://core.trac.wordpress.org/ticket/47145#comment:9
/Cc @kjellr @melchoyce

This ticket was mentioned in Slack in #core-media by karmatosed. View the logs.

11 days ago

This ticket was mentioned in Slack in #design by karmatosed. View the logs.

7 days ago

#4 @karmatosed
5 days ago

@afercia with #47145 committed does that now need to come here and we remove the feedback keyword for design?

Note: See TracTickets for help on using tickets.