Headings

Overview

Headings help users understand the information contained in web pages and how it is organized. When headings are clear and descriptive, users can find the information they seek more easily and understand the relationships between the different parts of the content.

Headings have a vital role in webpages. Sighted users benefit from headings by targeting the specific information they need. In the same way, users operating accessibility tools such as screen readers can cycle through headings to target specific content.

To meet accessibility standards, it is best to use a logical hierarchy order from an HTML tag H1 to H6, following the information’s importance.

Make Headings Accessible

By default, the Text field under the Banner Section has an H1-style header assigned. Therefore, every subheading should consequently follow an H2 and so forth in a descending order, as in the example listed below:

On our site, all the headings have been predefined by color and size, following the compliant heading order. Furthermore, most of our blocks have also been assigned to an H2 heading style to maintain accessibility, except blocks three, four, and five.

We can achieve accessibility in two ways:

1. In a single text editor, you can reorganize the headings from the text format dropdown.
2. If using block sections, you can add a block two with a heading style and fill in the title section. This will automatically assign this header to an H2 tag. Consequently, you can add a block three with heading style (H3),  if needed, but not a block four (H4) to avoid breaking the descending heading order. To view a full example, feel free to review the web style guide.

Headings should form an outline of the page content (Heading 1 for the main heading, Heading 2 for the first level of sub-headings, etc.). This enables screen reader users to understand how the page is organized. If the heading structure skips or reverses heading levels, this breaks the page outline. Screen readers also have features that enable users to jump quickly between headings with a single keystroke. This functionality makes it possible for screen reader users to navigate within a page with the same efficiency as sighted users.

What to check for?

• Ensure there is only one H1 Heading tag on your page, especially after copying text into the webpage.
• Verify that the headings are ordered from H2 to H6, with no skipping levels.
• Don’t choose based on style: Use headings for their intended purpose, not just for how they look. Don’t use <h2> because you like the size; use it because it’s the right level in the hierarchy.
• Heading elements only for headings: Don’t style regular text as a heading. This confuses both users and search engines.
• Don’t use all caps in headings: Text in all capitals is harder to read, particularly for people with dyslexia. Instead, use title case (Capitalising Most Words) or sentence case (Capitalising the first word) to improve readability.

Benefits

• Descriptive headings are especially helpful for users who have disabilities that make reading slow, and for people with limited short-term memory. These people benefit when section titles make it possible to predict what each section contains.
• When headings and labels are also correctly marked up and identified in accordance with 1.3.1 Info and Relationships, this success criterion helps people who use screen readers by ensuring that labels and headings are clearer when presented in a different format — for example, in an automatically generated list of headings, a table of contents, or when jumping from heading to heading within a page.