The Pilcrow

Regenerative self-leadership and principles in productivity, life and business

How the markup of admin screens have changed in 4.4

There are a lot of new features in the upcoming release of WordPress 4.4. I have already written about the responsive image support.

Another feature is that the heading structure of the admin screens have changed. This might be overlooked by plugin and theme authors, but it is an important change when it comes to accessibility.

There has already been a post describing why this is important at the make blog. That article also provides more details about the changes.

New heading structure

First of all, the top level heading is now a H1, and subsequent headings should thus become H2.

The core team also added extra H2 headings for easier screen reader navigation. They are hidden with the .screen-reader-text css class, but will allow easier navigation to each section.

For custom post types and custom taxonomies, these hidden headings will have default values of “Post” and “Categories”, respectively. This may or make not make sense for your custom post type or taxonomy.

New labels have been added to the register_post_type() and register_taxonomy() functions to remedy this. You can now adapt the content of these headings when you setup your post or taxonomy.

The meta boxes changed their heading level from a H3 to H2. So if one wants to create headings inside a meta box, they need to start at H3 in order to not skip a level.

And screen options ditched the H5 altogether and uses fieldset and with a legend element as “title”.

Now it needs adoption

What does this mean? Well for users of screen readers, heading hierarchy has now been setup properly in core and navigation of the WordPress backend has hopefully become easier.

I say hopefully, because this means that all plugin and theme developers that provide custom admin screens – such as settings or options panels – need to change their markup too to match the expected new standard.

This is one of those times where having a lot of third party developers on the markets can make things hard when moving forward. When core does something new, it usually takes some time before the changes ripples through the community and everyone follows suit.

It’s easy, just do it

If you have a settings panel in your theme or plugin, check that

  • The top level heading is a H1, and subsequent headings H2
  • If you use headings inside of custom meta boxes, they need to start at H3
  • Custom post types and custom taxonomies use the new labels if they need to
  • Any custom screen options switches to the fieldset and legend elements.

These are all easy changes. There is no reason not to do it. It’s just a matter of awareness, especially the hidden headings might fly under the radar if you’re not aware.

So go and spread the word. A quarter of the web will benefit from it.


Next Post

Previous Post

© 2021 The Pilcrow

Theme by Anders Norén