[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:  afercia
     Type:  defect (bug)             |      Status:  assigned
 Priority:  normal                   |   Milestone:  5.3
Component:  Media                    |     Version:
 Severity:  normal                   |  Resolution:
 Keywords:  needs-post-mortem has-   |     Focuses:  ui, accessibility,
  screenshots has-patch i18n-change  |  javascript
-------------------------------------+-------------------------------------

Comment (by afercia):

 > I think most folks are used to "active" menu items not looking like
 links while they're active

 Sure, agreed. I'd say it just needs a different active style. It is still
 bold now.


 > As far as I see 2 is the proper solution here if that heading is needed
 to help screen reader users. Usually menus do not have (visible) headings
 as they do not serve any purpose.

 @azaozz I think the lack of consensus is exactly on this point :) For
 accessibility, visible headings are recommended.

 There's also a nice WCAG tutorial to explain how to markup different
 regions of web pages *and applications*.

 **Page Regions**
 Mark up different regions of web pages and applications, so that they can
 be identified by web browsers and assistive technologies.
 https://www.w3.org/WAI/tutorials/page-structure/regions/#navigation

 There's a specific example for navigation that uses a visible heading
 within a `<nav>` element.

 In our case we can't use a `<nav>` element because this isn't exactly a
 navigation menu. The heading is still necessary though.


 Aside: reminder that also the ATAG (Authoring Tools Accessibility
 Guidelines) refer to WCAG for web-based authoring tool user interfaces.

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