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.
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.
- Do all visually formatted headings have a semantic h-tag?
- Do headings nest in outline level hierarchy properly?