WordPress 4.8 Improves Accessibility on Admin Screens

In WordPress 4.3, the Accessibility Team restored H1 headings to the admin screens. This paved the way for the team to change the headings hierarchy in WordPress 4.4. In WordPress 4.8, admin screens are more accessible thanks to organizing the header text on pages.

The headers on admin screens typically contain more than text. For example, the Add New button on the Posts and Pages admin screens is included within the Posts and Pages header text.

This makes it difficult for assistive technologies to help users navigate different sections of a page. The changes in WordPress 4.8 turn the headings on admin screens into their own elements.

Before WordPress 4.8 the HTML looked like this:

<h1>
Posts
<a href="... /post-new.php" class="page-title-action">Add New</a>
</h1>

Now it looks like this:

<h1 class="wp-heading-inline">Posts</h1>
<a href="... /post-new.php" class="page-title-action">Add New</a>
<hr class="wp-header-end">

Andrea Fercia, WordPress core committer and a member of the accessibility team, explains what theme and plugin authors need to know.

“If your plugin or theme follows the previous WordPress pattern of adding extraneous content to the main heading, please update your plugin or theme to make the heading cleaner,” Fercia said.

“All you need to do is move the extraneous content outside of the heading. WordPress 4.8 ships with new CSS rules to take care of the new markup structure and in most cases, no additional changes will be required.”

These improvements are three years in the making. After much discussion and being punted to future releases, Fercia says the Accessibility team decided to handle the changes in smaller commits versus one large patch. This provided the necessary momentum to get the changes in core.