[wp-trac] [WordPress Trac] #47610: Media modal: add more headings to better identify the main sections and improve content navigation for assistive technology users

[WordPress Trac]

#47610: Media modal: add more headings to better identify the main sections and
improve content navigation for assistive technology users
-------------------------------------+-------------------------------------
 Reporter:  afercia                  |      Owner:  (none)
     Type:  defect (bug)             |     Status:  new
 Priority:  normal                   |  Milestone:  5.3
Component:  Media                    |    Version:
 Severity:  normal                   |   Keywords:  has-screenshots needs-
  Focuses:  ui, accessibility,       |  design-feedback
  javascript                         |
-------------------------------------+-------------------------------------
 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 [https://core.trac.wordpress.org/ticket/36925 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
 [http://webaim.org/projects/screenreadersurvey5/#finding 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,
 [https://make.wordpress.org/core/2015/10/28/headings-hierarchy-changes-in-
 the-admin-screens/ 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:

 [[Image(http://cldup.com/tFz6B5nj3j.png)]]

 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`.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/47610>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform