About This Page
This page has been adapted from the headings core concept page on the WSU digital accessibility website by Daniel Rieck (daniel.rieck@wsu.edu). Daniel included all the content on the original headings page and then expanded it with additional thoughts and opinions mainly to create more opportunities to demonstrate how to test a document for common accessibility errors that involve headings. Accessibility issues involving headings were then intentionally introduced to the page for the purpose of learning. This page was used as part of a presentation on web accessibility testing for GAAD 2024.
Compared to the reference page that has no accessibility issues that affect headings, this page has had its heading structure largely removed while the same content is otherwise presented. One can see how this change makes it much more difficult to scan the page and understand its topical sections.
Headings provide an outlined structure to your content. They help guide people through your content by identifying the topic and sub-topics of the information.
Headings start at heading level 1 and progress down to heading level 6. Heading level 2 is a subtopic of heading level 1, heading level 3 is a subtopic of heading level 2, and so on. That is, each child heading is a subtopic of its previous parent heading. These heading levels display the hierarchy of content.
Heading hierarchy allows people to understand the outline and structure of the content. When correctly applied to a document, heading hierarchy can be easily translated into a nested ordered list that represents the sectional topics that make up the document’s narrative. By paying attention to headings, people can quickly form a broad idea of the content that is communicated by a web page.
People tend to scan content on the web rather than carefully read it from beginning to end. Heading hierarchy helps people accurately scan through an online document and quickly find what they want. But if headings are not properly coded, people who depend on assistive technology will be prevented from scanning a document in this way. Assistive tools cannot safely construe mere visual formatting like bolding or font sizing as implying hierarchical levels.
Headings need to be appropriately formatted as heading styles for headings to be accessible within digital content and technology. That is, headings are not recognized by software as true headings unless they are properly coded as such. Formatting text as a heading style using an application’s formatting tools causes the text to be coded heading data.
When headings are properly coded, programs and assistive technologies can display the formatted headings to outline the content structure. Additionally, assistive technology allows people to navigate to, and scan through, the content by the headings alone.
It is the reasonable duty of an author to understand and correctly follow the rules of a language when writing a document. And as web content creators, it is our duty to understand and follow the rules of the language of computers when we use an application to translate a document into computer form and transmit it to other people using computers. We must not fail to observe this duty because we must not allow the web content we create to contain barriers to access for people who rely on assistive technology.
The Web Design System theme for WordPress styles headings so that the most common heading levels—h1, h2, h3, and h4—are very easy to visually distinguish from each other. This is helpful for web content creators whose visual acuity is in good enough health to manually test pages by eye.
For example, figure 1 shows how the following HTML code appears on screen on a website created with WSU WordPress.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>In general, the higher the level of a heading is, the larger and bolder its text appears. The visual difference between the higher and most commonly used heading levels is also more dramatic.
Testing with the WAVE tool to look for errors with headings removes all doubt because WAVE uses icons to mark how each piece of text data is coded on the web page. It will also evaluate heading structure to determine if accessibility errors are present on the page that affect headings.