These guidelines supplement the ASU IT Accessibility Standard and describe the requirements for creating accessible headings.
- Why headings are important
- Guideline: Use "real" headings.
- Guideline: Don't skip heading levels.
- How to add headings
Why headings are important
Headings are text that act as the title of a page or subsections of a page. They help organize content into groups of ideas—and they reveal relationships between those groups. Consider these two lists. In the first, the six items appear visually and semantically to be cities. In the second, the six items seem to be two states with two cities under them.
States with cities
This information is important to convey to screen readers users, who can access hierarchical lists of headings with a single keystroke, providing them with a mental picture of the page and helping them understand and find content more quickly.
Headings are also important for sighted users. Large blocks of text without headings appear dense and daunting, particularly online. Many users simply skip over them. Headings organize content and make text much more approachable.
Guidelines: Use "real" headings
Use "real" headings in digital documents and online. Merely making text bold and larger does not make it a heading. Instead, use the heading styles in a WYSIWYG (rich-text) editor (or mark headings up with proper HTML), which will apply underlying code telling screen readers (and other machines) that this text is a heading and what level heading it is. Screen readers only recognize real headings that have this hidden code.
Guidelines: Don't skip heading levels
Headings should follow a logical hierarchy. For example, don't use a level-four heading directly after a level-two heading merely because it looks better. Instead, use the correct level-three heading—then if you don't like the look of it, alter its appearance with WYSIWYG (rich-text) editor options (or in the CSS).
How-to create headings with a WYSIWYG (rich-text) editor
It's easy to create a heading in a WYSIWYG (rich-text) editor like those used in Microsoft Word, Canvas, Drupal/WordPress and other desktop and online applications.
Do not merely make the text bold and larger. Instead, highlight the text you want to make a heading, and select the appropriate heading level from the "Paragraph" dropdown (also sometimes called Styles, Text or Format) in the rich content editor.
This adds underlying markup that makes headings available to screen readers and other assistive technologies.
Relevant W3C WAI documents
- WCAG 2.1 Guideline 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
- How to Meet WCAG 2.1 Guideline 1.3.1
- WCAG 2.1 Guideline 2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
- How to Meet WCAG 2.1 Guideline 2.4.1
- WCAG 2.1 Guideline 2.4.6 Headings and Labels: Headings and labels describe topic or purpose.
- How to Meet WCAG 2.1 Guideline 2.4.6
- For accessibility in online learning and education, join the UDAT working group.
- Connect with us on ASU's #accessibility Slack channel.
- Subscribe to ASU's ITACCESS mailing list.