Strategies
Related Guidelines1: WCAG 1.3.1, WCAG 1.3.2, WCAG 2.4.6
Headings not only help guide learners’ eyes around a page, they also help them to organize the page’s content. For learners who rely on screen readers2, using headings correctly can help them better understand the content and the relationship between information.
Here are a few tips for using headings to help make your course content more accessible:
- Consider using headings when there are multiple paragraphs and/or pages of information.
- Be concise, but descriptive. An effective heading gives a sense of what content will follow, while also encouraging the learner to move ahead into the content itself.
- Always use the heading styles built into the tool you’re using. In other words, avoid only changing the visual appearance of text to create headings; e.g., using bold font, or larger text. This is because there’s HTML code embedded in the tools that will teach the screen reader how to read the page, which will help the student organize the content they’re learning.
- When possible, use the built-in heading styles in their numbered order. It’s very important that you never skip heading levels. That is, do not go from Heading 1 to Heading 3 consecutively. Instead go from Heading 1 to Heading 2, or Heading 2 to Heading 3. As with using the tool’s built-in headings, using the headings in consecutive numbered order will tell the screen reader how to read the structure of the page.
Specific Tools
Google Doc
In a Google doc, the headings are in a drop-down menu in the toolbar at the top of the page, or via Format > Paragraph Styles. You can use this menu to apply headings, as described in the above Strategies section.
Microsoft Word
In a Microsoft Word document, you can use the Styles box in the ribbon at the top of the document to apply headings as described in the Strategies section. See Styles Box in Microsoft Word.
Here’s how:
- Highlight the text you want to make into a heading.
- Click on the heading style in the Styles box.
Tips
Use Heading 1 for the Title
In both Google Docs and Microsoft Word, you will find a style called “Title.” While this may intuitively seem like a good option, we suggest instead using the Heading 1 style for the title. This is because some accessibility remediation3 tools and assistive technology4 may not recognize the “Title” style as the actual title in the semantic HTML.
Change the Appearance of a Style
We recognize that not all heading options will be to all tastes. Don’t worry: If you don’t like the look of the document’s headings, you can still modify their appearance.
Here’s how:
Google Doc
- Highlight the text in the document.
- Change the appearance of the text as you like (e.g., change the font, color, size, etc.).
- With the text highlighted, go to Format > Paragraph Styles and then hover over the applicable heading (i.e. Heading 1, Heading 2, Heading 3, etc.).
- Select Update ‘Heading’ to Match in the menu that appears.
Microsoft Word
- Highlight the text in the document.
- Change the appearance of the text as you like (e.g., change the font, color, size, etc.).
- With the text highlighted, right-click on the heading in the Styles menu (i.e. Heading 1, Heading 2, Heading 3, etc.) and then select Update Heading to Match Selection.
- This will apply your design to that particular heading in the Styles box.
Accessibility Checker
Some programs can help you to search for and track accessibility errors. The following Microsoft products have an Accessibility Checker that generates a list of accessibility errors:
- Word
- Excel
- Outlook
- OneNote
- PowerPoint
Please note: While we encourage you to make use of accessibility checkers, this technology is not perfect and cannot flag all errors. Because of this, if possible, we recommend doing a manual review as well.
For more detailed information about the accessibility checker in Microsoft Word, see Microsoft’s Improve Accessibility with the Accessibility Checker.
Context
Why are headings important?
Headings are important for all learners, but especially for learners who rely on screen readers5 to perceive information in a document. Headings direct your attention to important points in a long body of text and give you an idea of what you’re about to read. This is why screen readers need to be able to identify the headings and recite them to the learner.
Why use the built-in heading styles?
As mentioned above, the only way a screen reader can distinguish a heading from regular text is if the text is labeled as a heading in the semantic HTML. Heading styles built into the tool are usually already labeled as headings in the HTML.
Visual means of distinguishing headings (such as using bold and larger font) are not labeled in the HTML. Because of this, screen readers cannot identify them as headings.
Note that you can use visual means of distinguishing headings, as long as you apply that formatting to the built-in heading styles.