Admin Tabs Semantic Improvements in 5.2

Some tabs in the WordPress Admin aren’t really ARIA tabs — they’re actually links wrapped in h2 headings and styled to look like ARIA tabs.

But since they’re just navigation menus, WordPress 5.2 changes their markup accordingly. That way, assistive technologies will react to them correctly.

With #43398, WordPress 5.2 includes the following changes:

  • changes the wrapping <h2> to a <nav> element. It’s worth remembering that <nav> elements also define ARIA landmarks.
  • adds an aria-label to the <nav> elements so they can be distinguished from other <nav> elements in the page
  • adjusts the headings level in the Credits page

Example of former markup in the about.php screen:

<h2 class="nav-tab-wrapper wp-clearfix">
	<a href="about.php" class="nav-tab nav-tab-active">What’s New</a>
	<a href="credits.php" class="nav-tab">Credits</a>
	<a href="freedoms.php" class="nav-tab">Freedoms</a>
	<a href="freedoms.php?privacy-notice" class="nav-tab">Privacy</a>
</h2>

New markup for this screen:

<nav class="nav-tab-wrapper wp-clearfix" aria-label="Secondary menu">
	<a href="about.php" class="nav-tab nav-tab-active">What’s New</a>
	<a href="credits.php" class="nav-tab">Credits</a>
	<a href="freedoms.php" class="nav-tab">Freedoms</a>
	<a href="freedoms.php?privacy-notice" class="nav-tab">Privacy</a>
</nav>

If your plugin or theme uses the same markup as Core, you’ll want to update it for consistency and to avoid future CSS incompatibilities.

Please note: if your plugin or theme uses items that actually toggle the visibility of in-page content instead of linking to another page, then they are not navigation items. You should not use ARIA tabs nor <nav> element in that case.

#5-2, #accessibility, #dev-notes