Testing headings
What to check when testing the accessibility of headings.
Identify the headings
- Visually scan the page and note any content that appears to serve as a heading for the content that follows it.
- Use one of the following browser extensions to find any
<h1>–<h6>heading markup in the page, and see the document structure that it creates:
Note: Neither the Web Developer nor the Wave browser extensions identify custom headings made with role="heading" and an aria-level attribute. However, the HeadingsMap browser extension does.
Check for correct heading markup
- Check that every visual heading on the page has HTML markup that programmatically identifies it as a heading at the correct level for its position in the page’s heading hierarchy.
- Check that every instance of a native or custom HTML heading markup represents an actual heading at the correct level for its position in the page’s heading hierarchy.