Title: Cleaner headings in the admin screens
Author: Andrea Fercia
Published: May 17, 2017

---

 [  ](https://profiles.wordpress.org/afercia/) [Andrea Fercia](https://profiles.wordpress.org/afercia/)
9:15 pm _on_ May 17, 2017     
Tags: [4.8 ( 31 )](https://make.wordpress.org/core/tag/4-8/),
[accessibility ( 59 )](https://make.wordpress.org/core/tag/accessibility/), [dev-notes ( 647 )](https://make.wordpress.org/core/tag/dev-notes/)

# Cleaner headings in the admin screens

One of the most common needs for accessibilityAccessibility Accessibility (commonly
shortened to a11y) refers to the design of products, devices, services, or environments
for people with disabilities. The concept of accessible design ensures both “direct
access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s
assistive technology (for example, computer screen readers). (https://en.wikipedia.
org/wiki/Accessibility) is providing tools to effectively navigate through content.
Users of assistive technologies use headings as the [predominant mechanism for finding page information](http://webaim.org/projects/screenreadersurvey5/#finding).
Headings provide document structure. Assistive technologies can list all the headings
in a page to help users navigate and jump to different sections, like in a table
of contents. For this reason, headings should contain just the heading text.

For a number of years, the main headings in the adminadmin (and super admin) screens
have been used to contain extraneous content, most notably the “Add new” button.
WordPress 4.8 aims to fix this.

This is a continuation of the work started in 4.3 on [restoring the H1](https://make.wordpress.org/core/2015/07/31/headings-in-admin-screens-change-in-wordpress-4-3/)(
heading level 1) to the admin screens and continued in 4.4 with [the introduction of a better headings hierarchy](https://make.wordpress.org/core/2015/10/28/headings-hierarchy-changes-in-the-admin-screens/).

## What pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory 󠀁[https://wordpress.org/plugins/](https://wordpress.org/plugins/)󠁿 or can be cost-based plugin from a third-party. or theme authors should 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. All you need to do is move the extraneous content outside of the heading.
WordPress 4.8 ships with new CSSCSS Cascading Style Sheets. rules to take care of
the new markup structure and in most cases, no additional changes will be required.

Of course, it’s impossible to cover all edge cases. If your plugin or theme uses
additional content in the area next to the admin screens main heading, please double
check now and be prepared to upgrade your markup and CSS to account for the cleaner
headings. The relevant area is highlighted in the screenshot below and **it applies
to almost all the admin screens.**

![example of a main heading in the admin screens](https://make.wordpress.org/core/
files/2017/05/cleaner-headings-wp-4-8-1024x105.png)

## Need more details?

If you need more details about the markup and CSS changes, please do have a look
at the tracking ticketticket Created for both bug reports and feature development
on the bug tracker. [#26601](https://core.trac.wordpress.org/ticket/26601) and the
first changeset [[38983]](https://core.trac.wordpress.org/changeset/38983), followed
by several other ones all listed in the main ticket.

## Get ahead of 4.8 and update now!

[The power of the Web is in its universality](http://www.w3.org/WAI/). Help us to
make the Web a place designed to work for all people. Any feedback and thoughts 
are more than welcome, please let us know in the comments below.

[#4-8](https://make.wordpress.org/core/tag/4-8/), [#accessibility](https://make.wordpress.org/core/tag/accessibility/),
[#dev-notes](https://make.wordpress.org/core/tag/dev-notes/)

### Share this:

 * [  Threads ](https://make.wordpress.org/core/2017/05/17/cleaner-headings-in-the-admin-screens/?share=threads)
 * [  Mastodon ](https://make.wordpress.org/core/2017/05/17/cleaner-headings-in-the-admin-screens/?share=mastodon)
 * [  Bluesky ](https://make.wordpress.org/core/2017/05/17/cleaner-headings-in-the-admin-screens/?share=bluesky)
 * [  X ](https://make.wordpress.org/core/2017/05/17/cleaner-headings-in-the-admin-screens/?share=x)
 * [  Facebook ](https://make.wordpress.org/core/2017/05/17/cleaner-headings-in-the-admin-screens/?share=facebook)
 * [  LinkedIn ](https://make.wordpress.org/core/2017/05/17/cleaner-headings-in-the-admin-screens/?share=linkedin)

 1. ![](https://secure.gravatar.com/avatar/8600d2af35b1c4e440e77d8f99ec26a3a860adcfce8746e235b82c24b72befb3?
    s=32&d=mm&r=g)
 2.  [ivanlutrov](https://profiles.wordpress.org/ivanlutrov/)  10:29 pm _on_ July 26,
    2017
 3. Should adminadmin (and super admin) screens have a main H1 heading at all? My conclusion
    is that they should. However, it seems that the Woocommerce coreCore Core is the
    set of software required to run WordPress. The Core Development Team builds WordPress.
    development team thinks not if the screen has tabs. See this thread on GithubGitHub
    GitHub is a website that offers online implementation of git repositories that 
    can easily be shared, copied and modified by other developers. Public repositories
    are free to host, private repositories require a paid subscription. GitHub introduced
    the concept of the ‘pull request’ where code changes done in branches by contributors
    can be reviewed and discussed before being merged by the repository owner. [https://github.com/](https://github.com/):
 4. [https://github.com/woocommerce/woocommerce/issues/11296](https://github.com/woocommerce/woocommerce/issues/11296)
 5. The way I see it, tabs or no tabs, the absence of a main page title can be quite
    jarring for some people. Best case scenario is that it just doesn’t look quite 
    right. What are your thoughts?
 6.  * ![](https://secure.gravatar.com/avatar/cd18da60d54f0a7374dc62b122ff5050f33fad8c43ce013594f7703a37b9d906?
       s=32&d=mm&r=g)
     *  [Andrea Fercia](https://profiles.wordpress.org/afercia/)  8:05 am _on_ July
       27, 2017
     * The way I see it, any page should always have a h1. Not just for semantics but
       also because headings are used for navigation by screen reader users. Using 
       shortcuts, they can “jump” through headings and jumping to the h1 should bring
       them to the main content in the page. This is explained better on [https://make.wordpress.org/core/2015/10/28/headings-hierarchy-changes-in-the-admin-screens/](https://make.wordpress.org/core/2015/10/28/headings-hierarchy-changes-in-the-admin-screens/)
       see also the link to the Webaim survey.
     * WordPress doesn’t have a standard for the adminadmin (and super admin) pages
       look or for the “tabs”. Sometimes tabs just look like tabs but they’re actually
       navigation menus, sometimes they’re real tabs that toggle the visibility of 
       in-page content.
     * From a semantics perspective, Woo implements the tabs in a correct way, better
       than WordPress, because they use a `
     * ` element. However, the visually hidden h1 comes after the tabs. So when users
       jump to the h1, all the tabs will be “skipped”: keyboard and screen reader users
       will probably miss what is before the h1 and they will be forced to explore 
       the content and tab backwards to find the navigation.
     * I’d argue that if I click, for example, on “Settings” in the admin menu, I’d
       expect to be in a page called “Settings” and then the various “General”, “Products”,
       etc. should identified as sub-sections of “Settings”. Also visually, a main “
       Settings” h1 would help me understand I’m in the right page.
     * To recap: there are no official standards and plugins are free to structure 
       their pages the way they want. Personally, I’d recommend a visible h1.
     * Further improvements for the “tabs” would be: disambiguating the `
     * ` landmark adding an aria-label, and use aria-current on the active “tab”.

Comments are closed.

# Post navigation

[← Dev Chat Agenda for May 17th (4.8 week 3)](https://make.wordpress.org/core/2017/05/17/dev-chat-agenda-for-may-17th-4-8-week-3/)

[4.8 Bug Scrubs for RC 1 →](https://make.wordpress.org/core/2017/05/18/4-8-bug-scrubs-for-rc-1/)