Accessibility 101: Headings

•5 min read

What are headings?

Headings are an essential part of web accessibility. They are semantic elements built into HTML that help users navigate and understand the content of a page. They also help search engines understand the content of a page.

Why do headings matter?

Headings provide structure to the content of a page for assistive technologies such as screen readers. They help users not just understand the content of a page but also navigate it more easily.

What is a descriptive heading?

A descriptive heading is a heading that describes the content of the section following it. For the page you are reading this on, the main heading is "Accessibility 101: Headings" which matches the name of the article.

For an eCommerce store this may be the name of the product whilst for a landing page this may be the name and purpose of the product or service.

Methods of marking up headings

Headings should be marked up using the <h1> to <h6> tags. Whilst you can use the aria-level and role="heading" attributes to mark up other semantic elements as headings, this is not recommended as not all screen readers support these attributes.

How to use headings correctly

Headings come in six levels: h1, h2, h3, h4, h5, and h6. The h1 heading is the most important and should be used for the main title of the page. The h2 headings are the next most important and should be used to group the main sections of the page. The h3 headings should be used for subheadings nested within the h2 heading, and so on.

First-level heading <h1>

The first-level heading should be used for the main title of the page. It should be unique and should not be repeated on the page. For example an accessibility agency may have a page listing their services. The main title could be:

<h1>Our Services</h1>

Second-level heading <h2>

The second-level heading should be used for the main headings of the page. They should be unique and should not be repeated on the page.

For example on the agency page, the main headings could be their different categories of services:

<h1>Our Services</h1>
    <h2> Auditing </h2>
    <h2> Consulting </h2>
    <h2> Training </h2>

Third-level heading <h3>

The third-level heading should be used for subheadings nested within the h2 heading.

For example on the agency page, the subheadings could be the different types of services they offer within each category:

<h1>Our Services</h1>
    <h2> Auditing </h2>
        <h3> Small audits </h3>
        <h3> Large audits </h3>
    <h2> Consulting </h2>
        <h3> Change management </h3>
        <h3> Policy development </h3>
    <h2> Training </h2>
        <h3> Introduction to accessibility </h3>
        <h3> Advanced accessibility </h3>

Testing headings

You can use the free tool A11Y Boost Heading Structure Checker to test your webpage's heading structure.

Remember

  • Headings should be used to group the content of a page.
  • Headings should be descriptive.
  • Headings should be nested appropriately.
  • Headings help assistive technologies understand the structure of a page.
  • Headings allow users to navigate a page more easily.

Additional Resources