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.
Test
Use this headings bookmarklet or automated testing tool like WAVE to discover headings on a page.
- Do all visually formatted headings have a semantic h-tag?
- Do headings nest in outline level hierarchy properly?
Exceptions
None
Applicable WCAG Success Criteria
SC 1.3.1 Info and Relationships
Resources
WebAim's piece on creating semantic structure in Web content