#a11y-headings - Menus page headings (nav-menus.php)

[Cheffheid]

The main thing that needs to be changed on this paged is probably the fact that the tabs are currently wrapped in a single H2. It will be more useful if they are each their own H2.

This way, the other headings on the page can remain H3s (which are all found under the "Edit Menus" tab).

#a11y-headings

[Cheffheid]

The H2 in question that wraps around both tabs. I'd say, split those up to their own H2s.

[afercia]

Related to the tabs heading issue, that will force us to mark all the boxes headings as <h3> just because the tabs are a <h2> :( Wouldn't be better to have all them as <h2>?

[joedolson]

Wouldn't it be better to have the tabs not be a heading at all? I really don't feel that those tabs operate as headings in any meaningful sense.

[afercia]

I'd agree they're not real tabs. It's just a sub-menu with links that look like tabs. By the way my concern would be about discoverability. Chances are, if they're inside a heading, screen reader users will find them pretty soon. Marking up them as plain links would probably make them harder to discover.
Also, the .nav-tab-wrapper tabs are used in other places too, for example:

• About/Credits/Freedoms pages
• Network > Site Info etc.
• Plugins use them sometimes, especially in their settings pages see for example WP SEO

What I mean is that's a sort of UI pattern so if we change it in one place, should we change it in the other places too?

[Cheffheid]

So would a nav(or navigation landmark) be more appropriate then maybe?

I had intentionally not made a ticket for About/Credits/Freedoms because it uses the same pattern and wanted to get some eyeballs/discussion on this first to determine what the right course of action is.

I wouldn't be too worried about plugins potentially using it, though we should probably let them know how we feel it should be so they can change it (and in the case of Yoast, I'm sure they'd be open to that too).

[joostdevalk]

We'll happily adjust to what core decides to do here.

[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 ​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 :)

[afercia]

Discussed a bit this in today's a11y chat on Slack and decided to keep things simple for now and just bump up the headings. We can always reopen this ticket or open a new one to propose a more semantic markup (navigation landmark?) in a following step. Let's try to move on and have a first patch :)

[afercia]

... which means this screen doesn't need a patch for now :) Closing as "maybe later".