Headings

2. Use Headings to Create Structures

Headings in content allow readers to organize chunks of content and to navigate the content. A sighted user has the ability to discern headings based on attributes such as: size, spatial relationships, color, positioning, case, and punctuation to determine which text is a heading and what text relates to that heading. We must offer that same level of functionality to the non-sighted person who uses a screen reader. A non-sighted person can pull up a list of headings via their screen reader to navigate a document like an interactive table of contents. Manually formatting heading text does not offer a programmatic equivalent to the non-sighted person using a screen reader. This denies them the ability to programmatically scan the content in a way similar to a sighted person who can rely on size, spatial relationships, color, positioning, case, and punctuation to determine which text is a heading and which text relates to that heading. It is also important to provide semantic understanding to headings and to maintain an outline level hierarchy of the headings in a piece of content. 

Best Practices

  • Use the heading styles provided in a Drupal template
  • Do not override text styles with manual formatting to simulate headings
  • Do not skip headings (i.e., do not jump from h2 to h4, instead move from h2 to h3 and then to h4)
  • Only use only one h1 per page

Don't do This

Scenario One: Manually Formatted Headings

Heading Level 3 Text

Heading Level 4 Text

Why is This Wrong?

The text above is manually formatted with bold attribute in the rich text editor to appear visually as a heading. 


Scenario Two: Breaking Hierarchy

Heading level three text

Heading level five text

Why is This Wrong?

Technically, this is not a violation of the WCAG, but it is in violation of valid HTML per the World Wide Web Consortium. When you are selecting styles for headings, it is important to maintain an outline level hierarchy. Breaks in hierarchy can be confusing for the non-sighted community that relies on the programmatic markup of content for navigation and understanding. Always group headings like a table of contents and never skip a heading level (i.e., h2 to h4).

Do This

Scenario One: CSS Formatted Headings

Heading Level 3 Text

Heading Level 4 Text

Why Is This Right?

This sample uses only approved styles from the Drupal template that come from the CSS. 


Scenario Two: Maintaining Hierarchy

Heading level three text

Heading level four text

Why is This Right?

This sample uses only approved styles in the Drupal template. The CSS controls both the visual appearance and the programmatic semantic structure giving the sighted and non-sighted an equivalent reading experience.