How to make web pages accessible

Headings

Use headings to organise your content so people can scan and understand your web page quickly.

Why headings matter on web pages

Headings and subheadings organise content into sections and subsections. They help people scan a page quickly and find the information they need.

Screen readers and text-to-speech software announce headings and use them to navigate content. They can generate a list of headings, similar to a table of contents, allowing users to jump straight to the sections they need.

Headings are also used by search engines and AI tools to understand and summarise content.

How headings work on web pages

Web page headings must have coded tags like <h1>, <h2>, or <h3> so that screen readers, AI tools and search engines recognise them.

On many websites, the visual appearance of headings is set by the developer. The number of heading levels may also be restricted. For example, the page title is usually assigned heading level 1 by default.

Content authors need to determine the correct heading structure and assign appropriate heading levels to all content.

Write and structure headings

Headings should be short, clear, and descriptive. They must explain what the section contains. Avoid vague headings such as “Learn more.”

Read how to write and structure headings in content

Format headings

Use your content management system (CMS) toolbar to assign heading levels to text. This should apply both coded tags and, in most cases, visual styling.

Do:

apply the correct heading level to content
if you control visual styling, ensure headings are visually distinct from body text and consistent

Do not:

rely on font size, bolding or colour alone to show a heading
choose a wrong heading level because you think it looks better
add a heading level to content that is not meant to be a heading, like paragraph text or an image

Screenshot showing heading levels in a CMS formatting toolbar — CMS formatting toolbars should apply both coded tags and styling to headings.

Check headings

After publishing, check that headings are correctly applied and structured.

Check individual headings

Open the web page in a browser.
Confirm each heading clearly describes the content it introduces.

Check heading structure

Use HeadingsMap (Microsoft Edge Addons) to get a quick overview of your page's heading structure and find skipped heading levels.
Alternatively, use WAVE Evaluation Tool (Microsoft Edge Addons)'s Structure tab to confirm heading levels, detect empty headings, and find skipped levels.