Skip to main content

Preview modes: Headings

  • Updated

On this page:

Why use the headings preview mode?

Users commonly skim through the a document by reading the headings, and assistive technology users use headings to better understand the information hierarchy of a page and where they are currently located within that page. Designers and developers often use implicit headings -- text that is formatted as a heading, rather than semantically specified as a heading -- to visually organize a page, making the page non-compliant with accessibility best practices. Implicit headings do not convey meaning to screen reader users, and they are lost when users are viewing the page with style sheets turned off.

When testing a page for accessibility, it is important to review the page structure and ensure that all headings are explicitly stated with proper markup, and that they are in the proper reading order -- indicated by their heading level. This preview mode allows testers to easily evaluate all of the headings on the page to determine whether they are using correct markup and whether they are in a logical reading order.

How does the headings preview mode work?

This preview mode identifies all headings on a page and lists them all in the Access Assistant window. When testers select a heading, its details -- HTML of the element and heading level -- are displayed in Access Assistant, and the element is highlighted on the page. The heading level is also displayed with the highlighting. Testers also have the option to Highlight All Headings by selecting that button. When this option is selected, the user must exit this preview mode to turn heading highlighting off (i.e., this button does not toggle the highlighting on and off).

The following content is considered to be a heading, and therefore highlighted by this preview mode:

  • All <h1> through <h6> elements, without an aria-assigned role, not intentionally hidden in the DOM and available to assistive technologies.
  • All elements with an ARIA role of "heading", not intentionally hidden in the DOM and available to assistive technologies.

How do I use the headings preview mode?

For every page being tested, evaluate the page for the following:

  1. Proper, Semantic Headings: Is there any text on the page that has been formatted as a heading but is not highlighted by the preview mode, and therefore not explicitly marked up as a heading? Is the heading necessary to the page structure?
  2. Logical Order: Do the heading levels for each heading correspond with their level in the information hierarchy?
  3. Heading Content: Are the headings themselves descriptive and unique?

. This can be done with this Preview Mode as follows:

  1. Launch Access Assistant from the site that is being tested and navigate to a page.
  2. In Access Assistant, navigate to the project and report where violation instances will be reported and find the module for the page being tested OR create the module if the page has not yet been tested at all.
  3. In Access Assistant, select the Preview Modes button in the toolbar header bar.
  4. Select the "Headings" link on the subsequent page.
  5. To highlight all headings, select the Highlight All Headings button. To view a specific heading, select the heading in the grid. This will display its heading level and highlight the heading on the page being tested.

    Headings preview mode, shows the toggle set to on.

  6. Evaluate each heading to determine whether it meets the above-mentioned criteria, and evaluate all contents on the page that are formatted as headings but not highlighted by the preview mode. Add a violation instance for any headings or other elements that are not used correctly:
    1. Select the Manual Test button in the module toolbar.
    2. Filter the Best Practices to those of Media Type, Page Structure.
    3. Select the appropriate Best Practice. Possible Best Practices include:
  • Avoid the use of implicit headings
  • Ensure headings and labels are descriptive and unique
  • Avoid unnecessary use of heading elements
  • Ensure heading level matches the heading's visual importance/level
  1. On the subsequent screen, select the Add Instance button and complete the form to create a violation instance for the page or elements on the page that are in violation.

Related articles