[wp-trac] [WordPress Trac] #33603: #a11y-headings - Menus page headings (nav-menus.php)

[WordPress Trac]

#33603: #a11y-headings - Menus page headings (nav-menus.php)
----------------------------+----------------------------
 Reporter:  Cheffheid       |       Owner:
     Type:  defect (bug)    |      Status:  new
 Priority:  normal          |   Milestone:  4.4
Component:  Administration  |     Version:  4.3
 Severity:  normal          |  Resolution:
 Keywords:  needs-patch     |     Focuses:  accessibility
----------------------------+----------------------------

Comment (by afercia):

 Thinking a bit about this, I'd be inclined to don't use a heading for the
 tabs. It's a navigation menu, important to the overall structure and
 hierarchy, and should be a navigation landmark. Screens that use these
 navigation tabs would end up having 3 navigation roles:

 {{{
 <div ... role="navigation" aria-label="Main menu" ...
 <div ... role="navigation" aria-label="Toolbar" ...
 <div ... role="navigation" aria-label="Secondary menu" ...
 }}}

 When they're immediately after the main `<h1>` that would also help users
 to discover them. Consider the first thing the majority of users do to
 find content is looking for a `<h1>` and then they will likely arrow
 around the `<h1>`. They also often
 [http://webaim.org/projects/screenreadersurvey6/#landmarks use landmarks]
 so using a heading followed by a navigation landmark looks appropriate to
 me.

 I'm not sure if these tabs can be used in other places too, for example in
 the middle of a page. In this case I'd say '''they should always have a
 heading before''' (optionally hidden) and the heading level should then be
 adjusted to the content structure. For example:
 {{{
 [content before]

 <h2 class="screen-reader-text">My plugin additional settings</h2>
 <div role="navigation" aria-label="Additional settings">
    [unordered list of links here]
 </div>
 }}}

 Worth considering that some plugins are using the current markup and
 associated styling `.nav-tab-wrapper` both as "real tabs" or navigation
 menus. Check for example the settings pages of a well known plugin related
 to search engines :)

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