Hey WordPress devs: headings will change in the Admin screens

Are you a theme, plugin or framework developer for WordPress? Take note: the heading structure in the Admin screens will change from WordPress 4.3 on.

From H2 to H1 in 4.3

In the Admin, the main heading of a screen was an H2.

If you want to have a correct semantic heading structure, a page should have one (and only one) H1 telling: this is what the page is about.

People, using assistive technology are looking for the H1 to identify a page, so they know where they are quickly. And well, an HTML5 heading structure should have an H1.

In WordPress 4.3 the headings of all screens are changed from an H2 into an H1. Read ticket #31650 in WordPress core trac about how this was decided.

CSS changes:

The styles for the H2 are still supported in the Admin CSS, so visually, nothing changes if you update to 4.3.

A new class was introduced: page-title-action
<h1>Posts <a href="[..]/wp-admin/post-new.php" class="page-title-action">Add New</a></h1>

The old class .wrap .add-new-h2 is still supported, but labeled deprecated. It has been replaced by: .wrap .page-title-action.

And the rest will follow

After the release of WordPress 4.3 the work will go on: the accessibility team will work on getting all the headings in the Admin semantically correct. So H3’s will be H2’s, H4’s will be H3’s etc.

Check your code

Does your plugin, theme or framework have admin screens? Check the heading structure. Change the main heading from an H2 into and H1, and check the rest of the heading semantics.

Then your plugin will be in sync with WordPress and people using a screen reader will be able to understand the screen better.

If you have any questions, ask them in the comment section below, or contact the WordPress accessibility team in the #accessibility channel in WordPress Slack.