Techniques

A good heading structure with meaningful and representative headings helps users understand the nature of the page and its sections. Headings help to break up long sections of text into shorter, more manageable subsections, and they provide strong navigational cues, allowing users to navigate in a non-linear manner.

Descriptive headings that use correctly numbered heading levels allow screen reader users to navigate in a non-linear manner – they can jump straight to a section of content that interests them without having to read the rest of the page.

  • Always have a single, main heading <h1> which describes the nature of the page – this will often be the same text as in the <title> attribute;
  • For each main section use a level two heading <h2>;
  • Any sub-sections should have a level three heading <h3>; further sub-sections should have a level four heading, and so on;
  • Web pages support heading levels from one to six <h1> - <h6> and Word supports up to five heading levels, however some accessibility organisations advocate for restricting content depth to just four headings;
  • Avoid skipping heading levels – do not jump from <h1> to <h4>.
  • Always use the correct level heading.
  • Ensure all headings are descriptive and concise.
  • Never use headings for stylistic purposes. Use CSS to style headings if you want to change the font size (or colour, weight) rather than using an inappropriate level heading that happens to be the right size.
  • If you want big text in the middle of your page, create a style with big text, do not use an <h1>
  • Never use formatted text, such as large font size and bold weight, to give the appearance of a heading. This will not be communicated to assistive technology as a heading.

Examples of good practice

  • <h1>Develop accessible digital content</h1>
  • <h2>Provide an accessible page structure and layout</h2>
    • <h3>Use headings to convey the structure of your content</h3>
    • <h3>Code lists of items semantically</h3>
      • <h4>If something is a list, always code it as one</h4>
      • <h3>Do not misuse semantic markup</h3>
        • <h4>Use native HTML structural and semantic markup</h4>
        • <h4>Do not use headings or lists for decorative purposes</h4>
        • <h4>Do not use decorative elements to suggest lists or headings</h4>
        • <h4>Use the correct semantic markup for text</h4>
      • <h3>Provide meaningful links</h3>
        • <h4>Provide short and descriptive links</h4>
        • <h4>Provide supporting information in link text</h4>
        • <h4>Present lists of links as bullet-point or numbered lists</h4>
    • <h2> Design accessible navigation</h2>
      • <h3>Provide effective navigation based on recognised conventions</h3>
        • <h4>Make sure users can navigate your website by keyboard alone</h4>
        • <h4>Be consistent with navigation across each page of your site</h4>
        • <h4>Code navigation menus as lists</h4>
        • <h4>Provide a way for users to get to the homepage on every page</h4>

Examples of bad practice

Video

References

WCAG 2.1

EN 301 549 v 2.1.2

  • 9.1.3.1 Info and Relationships
  • 9.2.4.6 Headings and Labels

Further reading