Accessible headings

These guidelines supplement the ASU IT Accessibility Standard and describe the requirements for creating accessible 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.

Cities

New York
Albany
Rochester
Washington
Seattle
Spokane

States with cities

New York

Albany
Rochester

Washington

Seattle
Spokane

 

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.

Unorganized content

Text without headings is dense and unstructured

Structured content

Page with headings is more structured

 

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.

The Styles Pane in Microsoft Word

 

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).

Properly nested headings in MS Word

 

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.

The Paragraph dropdown in Canvas

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.

The Formats dropdown in ASU Webspark (Drupal 9)

 

Relevant W3C WAI documents

Was this helpful?

 
 

Slack

Accessibility Connections