AccessibilityHeadings

Headings are an important navigation tool for all users.

See the impact that accessible headings have on people who use text to speech software.

Helping everyone

A logical structure can make your content readable and accessible to everyone. Just as sighted users can scan the page and use headings to find the content they’re looking for, people using assistive tech such as screen readers can use a similar method to find their way around. So it’s important that the coding of headings matches up with their visual appearance.

Adding a logical heading structure can also help you think more clearly about your content and what it is trying to say. And clear heading text is useful for everyone.

The basics

Do the following things to make your heading structure clear and accessible:

• write headings in clear, descriptive language
• stick to one main heading (H1) per page or document
• make sure any subheadings follow a logical sequence
• if it’s intended as a heading, make sure it’s coded as one
• do not use heading styles for non-heading purposes (for example: for emphasis, or for pull-out quotes)

Creating good headings

Language

A good heading describes the content beneath it in simple language. Keep headings short and relevant to the content.

Structure

Use headings to split up and structure content into clear sections. Users rely on this structure for navigation so keep it straightforward, and try not to use too many sub-sub-subheadings. Most pages or documents shouldn’t need more than four heading levels unless they are very long or complicated.

Consider your heading structure as a table of contents – this reflects how people use them to find the most relevant content for their needs.

Many types of assistive technology allow users to navigate with headings in a similar way to a sighted user. They can quickly scan a page by its headings, and jump directly to the content they are looking for.

Nested headings

An important aspect of structure is how your headings are ‘nested’. Starting with a ‘Heading 1’ (<h1>) for the main page title, subheadings should sit below this in a sequential order. Headings are defined by using <h> tags which come in the form:

• <h1>
  •  <h2>
    •   <h3>
      •    <h4>

Never skip heading levels – if you need a heading to look different, do this with CSS styles rather than with the HTML code.

An example of a nested heading structure:

Structure is separate from appearance

Don’t use heading tags for non-heading purposes. For example, if you need a call-out message in large text but it does not function as a heading, then use styling to achieve this visual effect.

As a rule of thumb: if there is nothing or very little that sits underneath to it, it’s probably not a heading.

Similarly, if part of your content works as a heading (for example, to head up content blocks in the footer, or in a sidebar list of related links) then you must use the correct HTML code as well as any visual styling. If you don’t, a screen reader will not recognise this as a heading and the user may miss it.

Where sections are broken up with visual design alone, it may be worth adding a screen reader-only heading to help non-visual users navigate these parts of the page. You can do this with a ‘visually hidden’ style in CSS.