How to make web pages accessible
Headings
Add content headings that are tagged so people can find what they need quickly and easily.
On this page
- Headings help people navigate
- How to add and format headings
- How to check headings
- Related resources
Headings help people navigate
Headings and subheadings organising text into sections and sub sections. They let people scan for and find web page content faster.
Headings should be short and clear, with useful information about the content that comes after it. Avoid unhelpful headings like ‘Learn more’.
Learn how to write and structure headings in content
Making web page headings accessible
According to the WebAIM Million report, headings are the top way screen readers navigate a web page.
Screen readers and text to speech software will announce headings to help users understand and navigate document text more easily.
They can also be used in a document's table of contents, so all users can skip to the content they need quickly.
To do this, headings must have special pieces of 'code' added to them, like <h1>, <h2> or <h3>. This lets screen readers, text-to-speech, search engines and AI tools understand them as headings.
On many websites, the visual presentation and formatting for each heading level is fixed by the website developer.
Web developers will also sometimes restrict the number of heading levels web authors can use. For example, the page title is usually assigned a heading level 1 by default.
Content authors must then determine the heading structure of their content and add the appropriate level styling to each heading.
How to add and format headings
You must write, structure and format headings correctly on web pages to make them accessible.
Read our guidance how to write and structure headings in content
When formatting headings, do not:
- rely on visual-only formatting, like bolding or large font size to show a heading
- choose a wrong heading level because you think it looks better
- add heading style to content that's not meant to be a heading, like paragraph text or an image
Web editors should be able to add a heading level to text using the formatting toolbar (view screenshot).
How to check headings
After you publish your web page, check you set up your headings correctly.
- Open the web page in a web browser, like Microsoft Edge.
- Make sure headings clearly describe the content they introduce.
- Open WAVE Evaluation Tool (Microsoft Edge Addons).
- Go to the 'Structure' tab
- Check heading levels have the correct heading (h) element and there are no empty (headings without text) or skipped headings.
HeadingsMap (Microsoft Edge Addons) is another free tool to quickly check heading structure on your webpage.
