[wp-trac] [WordPress Trac] #36925: Media views: introduce a "Heading" view for better accessibility

[WordPress Trac]

#36925: Media views: introduce a "Heading" view for better accessibility
-------------------------------------+-------------------------------------
 Reporter:  afercia                  |       Owner:  adamsilverstein
     Type:  defect (bug)             |      Status:  assigned
 Priority:  normal                   |   Milestone:  Awaiting Review
Component:  Media                    |     Version:
 Severity:  normal                   |  Resolution:
 Keywords:  has-screenshots media-   |     Focuses:  ui, accessibility,
  a11y has-patch                     |  javascript
-------------------------------------+-------------------------------------

Comment (by afercia):

 Replying to [comment:3 adamsilverstein]:
 > @ocean90 happy to!
 >
 > @afercia This is a good start, thanks. I am happy to continue refining
 the Backbone code if you can help with the CSS and A11y concerns. Quick
 question: I am assuming all the highlighted areas in your screenshot are
 new divs (is that correct 'div' tags?) - these just sit above/in front of
 an area and that enables you to jump to them?
 @adamsilverstein hi, no they're not divs. They need to be `<h1>` - `<h6>`
 headings to properly identify a main "section" of content and because
 screen readers have shortcuts to jump through headings. With NVDA and JAWS
 users can just press the 1-6 keys. VoiceOver with default settings uses
 Control-Option-Command-H and doesn't distinguish the heading level.

 Regardless, screen reader users use headings as
 [http://webaim.org/projects/screenreadersurvey5/#finding the predominant
 mechanism for finding content] in a page. For example, with a couple of
 key presses they could jump from the left sidebar to the details sidebar
 on the right, completely skipping the (potentially hundreds of)
 attachments in the grid.

 Also, depending on the heading hierarchy, the new headings could be h1,
 h2, h3 (rarely h4, h5, h6) so the view should have a way to set the
 heading level dynamically.

 Lastly, some headings could be visually hidden but still accessible using
 the CSS class `screen-reader-text` while others can be visible. That's why
 I was trying to find a way to dynamically add a CSS class :)

--
Ticket URL: <https://core.trac.wordpress.org/ticket/36925#comment:6>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform