Summary

Headings provide structure to your document using paragraph styles (for documents) or heading tags (for web pages). Headings make the structure of your documents accessible to screen readers while improving both scannability and maintainability.

You can apply heading best practices in any written medium, from emails to presentations, newsletters, to blog posts. Everywhere you write, document structure can help you organize your work like an outline.

As a benefit, if you style your headings correctly and decide to change a font, font weight or size later, you can make one change and all of your headings will change, saving you time and energy.

User Impact

Structure is critical for adaptive technology users, who rely on properly formatted headings to understand and navigate through documents and web pages. Without this structure, there is no easy way to navigate because the document is read from top to bottom. If the accessibility features are not present, everything has the same weight. The discovery process of where a major section starts and ends is the most time consuming problem.

Screen Reader Demonstration

Watch this video by expert Hadi Rangin, a member of IT Accessibility Team at the University of Washington, demonstrates how web content sounds to someone using screen reader software and shares characteristics of accessible web pages.

  • Year: 2017
  • Runtime: 07:33 minutes

Using a Screen Reader from the

Best Practices

Learn to organize your paragraphs under descriptive headings, and apply "styles" to these headings. This habit will make it easier for anyone to scan through your document and find the parts of the document they want to read, an attribute known as "scannability."

Examples

In most software applications and web content management systems, you can highlight the text you want to make into a heading and apply built-in styles using the styles menu on the formatting toolbar.

Examples of Using Heading Styles in Google

Heading dialogue box showing Heading 1-6 style options
Google Documents: Use styles menus in your software

Note

  • Google Documents and Google Slides are not accessible once downloaded as PDF without remediation. At this point are only accessible as browser files.
    • Remediation is the process of making a document accessible.
  • Microsoft Word and PowerPoint retains heading strucutre when setup properly and saved as a PDF.

Example of Using Heading Styles in a Content Management System

Drupal Text Editor showing Headings 1-4 and other options
Drupal: Use styles menus in your software

Avoid:

Don't use the text character options in the formatting toolbar to individually change the look of each heading in a document or webpage (e.g. larger font size, bolded, and underlined).

Example to Avoid Changing Text using Character Tools

Avoid increasing font size or changing colors as the only way to designate a heading.

Google text characte pallet with Bold and font size highlighted
Google: Character style menus in your software
Drupal text character pallet with bold hightlighted
Drupal: Character style menus in your software

Example to Avoid

that do not follow logical order and use character styles that ineffectively convey semantic meaning.

Heading tags should never be used to control font characteristics alone. They should reflect the semantic structure of the content. Headings should be applied to paragraph headings based upon their hierarchy within a document.

In Digital Documents

  • Heading 1 is applied to the title (on the cover page).
  • Heading 2 is applied to the major topic headings (the topic on the next page).
  • Heading 3 is applied to sub-sections.
  • Heading 4, 5, 6 is not really necessary, but it makes it easier for someone to quickly find information if using a screen reader.

Web Pages

  • Use level 1 headings to indicate the title, topic, or purpose of each page. (i.e. <title>)
  • Repeat all or part of the level 1 heading in the browser page title of webpages. (i.e. <h1>)
  • Use level 2 headings to indicate each main section of the document. (i.e. <h2>)
  • Use level 3 headings to indicate sub-sections. (i.e. <h3>)
  • Use level 4, 5, and 6 headings to indicate sub-sub-sections. (i.e. <h4> <h5> <h6>)

Examples to Achieve

A table of contents can make it easier for people to navigate and preview long documents or web pages.

Implementation Tips

Use the styles menu for headings, and your software may be able to automatically create a table of contents based on the headings.

Example to Achieve

Make sure you indicate that the links are anchors, such as by giving them a heading such as:

  • Table of Contents
  • Article Contents
  • What's on This Page
  • On This Page
  • Jump To
  • In This Document
Anchor links labelled Article Contents on the PowerPoint Accessibility of the WebAIM site
Appropriately labelled anchor links on the WebAIM site

See Google Document

Avoid

Don't include anchor links to different sections of a page or a table of contents without indicating what the links will do.

Don't create a long document without a functioning Table of Contents that is navigable.

Anchor links without a label on an example PowerPoint Accessibility page
Users may expect anchor links to open other pages rather than jump down a page

How-to Resources

Digital Documents

  • W3C:
  • WebAIM:
  • Google:
  • Microsoft Word:
  • Accessible Digital Documents:

Presentations

  • WebAIM:
  • Google:
  • PowerPoint:

Web Pages

  • W3C Web Accessibility Tutorials:
  • WebAIM Semantic Structure:
  • Smart WYSIWYG HTML editor