Goal
Ensure that our content has explicit semantic headings so they are understandable for users, assistive technology, and other machine uses.
Every page should have an <h1> at the top containing the page title. The presence of additional headings depends on the page content.
Why this matters
Read Why does it matter if our HTML is semantic?.
How to implement
Technical Content Creators
See Page Headings .
Developers
For the proper structure of a heading, see MDN’s site:
Skipping headings or using them out of order is a severe accessibility violation. If you have a heading that is semantically an
<h2> (for example) but you want the visual display to be larger or smaller, do not use the improper tag. Use the correct semantic tag and a CSS class to change the style.How to test
Manual testing
- Right-click the heading and ensure it’s wrapped in the appropriate (semantic) heading tags.
Automated testing
We can’t automate testing for “block of text might need to be in a heading” because computers can’t read to discern whether the context is correct.
We can validate whether the header element is properly formatted.