2. Use Headings to Create Structure

Create Accessible Page Structure Through Headings

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 what 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. It is important to provide semantic understanding to headings and to maintain an outline level hierarchy of the headings in a piece of content. 

Back to Accessibility Checklist

Incorrect usage of heading structure

Correct usage of heading structure

Best Practice

We should only be using the heading styles provided in a Drupal template, and not overriding with manual styling. In addition, we should only use only one h1 per page. Lastly, we should not skip headings (i.e., do not jump from h2 to h4, instead move from h2 to h3 and then to h4. 


Use this headings bookmarklet or automated testing tool like WAVE to discover headings on a page.

  1. Do all visually formatted headings have a semantic h-tag?
  2. Do headings nest in outline level hierarchy properly?



Applicable WCAG Success Criteria

SC 1.3.1 Info and Relationships

SC 2.4.6 Headings and Labels


WebAim's piece on creating semantic structure in Web content