Make WordPress Core

Opened 9 years ago

Closed 9 years ago

#33603 closed defect (bug) (maybelater)

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

Reported by: cheffheid's profile Cheffheid Owned by: afercia's profile afercia
Milestone: Priority: normal
Severity: normal Version: 4.3
Component: Administration Keywords: needs-patch
Focuses: accessibility Cc:

Description (last modified by afercia)

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


Change History (14)

This ticket was mentioned in Slack in #accessibility by cheffheid. View the logs.

9 years ago

#2 @Cheffheid
9 years ago

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

Last edited 9 years ago by Cheffheid (previous) (diff)

#3 @afercia
9 years ago

  • Description modified (diff)
  • Milestone changed from Awaiting Review to 4.4

#4 @afercia
9 years ago

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>?

#5 @joedolson
9 years ago

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.

#6 @afercia
9 years ago

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?

#7 @wonderboymusic
9 years ago

  • Keywords needs-patch added

#8 @Cheffheid
9 years ago

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

#9 @joostdevalk
9 years ago

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

#10 @afercia
9 years ago

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]

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

#11 @wonderboymusic
9 years ago

  • Owner set to afercia
  • Status changed from new to assigned

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.

9 years ago

#13 @afercia
9 years ago

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

#14 @afercia
9 years ago

  • Milestone 4.4 deleted
  • Resolution set to maybelater
  • Status changed from assigned to closed

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

Note: See TracTickets for help on using tickets.