Make WordPress Core

Opened 9 years ago

Closed 9 years ago

Last modified 8 years ago

#34079 closed defect (bug) (fixed)

#a11y-headings - the Network navigation tab H3

Reported by: afercia's profile afercia Owned by: afercia's profile afercia
Milestone: 4.4 Priority: normal
Severity: normal Version: 4.3
Component: Administration Keywords:
Focuses: ui, accessibility, multisite Cc:


The "tabs" with navigation links used in the Network admin screens are currently wrapped in a h3 heading that should be changed in h2.

These tabs look smaller than the ones used for example in Menu > Locations or in the About/Credits/Freedoms screens (and by many plugins in their settings screens). Ideally, it would be better to don't tie the styling to the heading level and use a specific CSS class instead, something like: .nav-tab-wrapper.nav-tab-small. By the way we should take into account plugins that might use these "small tabs" still assuming they're h3.


Attachments (1)

34079.patch (4.7 KB) - added by afercia 9 years ago.

Download all attachments as: .zip

Change History (12)

#1 @afercia
9 years ago

Currently used in:


#2 @wonderboymusic
9 years ago

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

9 years ago

#3 @afercia
9 years ago

First pass. Uses a new CSS class .nav-tab-small, open to suggestions.

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

9 years ago

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

9 years ago

#6 @johnbillion
9 years ago

#34154 was marked as a duplicate.

#7 @afercia
9 years ago

Would appreciate @helen feedback here, especially about the introduction of the new .nav-tab-small CSS class.

#8 @helen
9 years ago

.nav-tab-small seems fine, I wish we could just go with a .small modifier class that's specific to each context but the chances of that colliding with some plugin are pretty high.

#9 @afercia
9 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 34913:

Bump H3 headings to H2 on the Network Admin > Sites > Edit Site screens.

The navigation tabs appear in an <h3> heading immediately following the main <h1> and need to have a proper hierarchy.
Also, fix the tabs focus style and introduce a new .nav-tab-small CSS class.

Fixes #34079.

This ticket was mentioned in Slack in #core-multisite by jeremyfelt. View the logs.

8 years ago

#11 @ramiy
8 years ago

Related: #37257

Note: See TracTickets for help on using tickets.