How to make web pages accessible

Headings give your web page structure, so users can find the content they need. For example, they introduce new sections or sub sections - a bit like chapters of a book.

Headings must be clear and describe the content in the sections they introduce.

You must format headings using the correct HTML element, like 'h1' (heading 1), 'h2' (heading 2) and 'h3' (heading 3). Don't rely on visual formatting, like bold or large font size, to show a heading.

You must format headings using the correct heading level:

• The main text heading on your web page should always be a h1. There should usually only be one h1 on the page.   
• The main sections on your web page should be introduced with h2s.
• Headings for sub sections should be h3s
• You can also format headings as h4s, h5s and h6s if you need to. If you need more levels than this, it's a sign that your heading structure is too complicated. Consider splitting your content across multiple pages.

Our Join the library page is an example of a page with effective and accessible headings:

The screenshot shows the page has:

• A main text heading, 'Join the library'. This describes the page content and is formatted as a h1
• Two section headings, 'Why join the library?' and 'How to join the library'. They describe the content in those sections and are formatted as h2s
• Two sub-headings within the 'How to join the library' section: 'In person' and 'Online'. They describe the content in those sections and are formatted as h3s

Why web pages need headings

Web pages need headings to help users:

• Understand what the page is about
• Understand how the page information is organised
• Find specific information on the page quickly and easily

How to check headings

1. Open the web page in a web browser, like Microsoft Edge or Google Chrome.
2.  Read through the headings on your web page to check they are clear and describe the content in the sections they introduce.
3. Check the headings are formatted using the correct heading level and there aren't any empty headings:
   • Install and use the headings bookmarklet; or
   • Open the browser developer tools (devtools) and look for the heading elements (eg. 'h1' and 'h2') in the HTML

How to edit or add headings

Most content management systems (CMS) allow web page editors to edit or add headings in at least one of the following ways:

• Manually edit or add heading elements in the HTML
• Apply headings 'styles' to text using a formatting toolbar

For example, when editing a SharePoint site page, editors can apply headings styles using a 'Paragraph style' drop-down list in the text formatting toolbar.