Overview

Sighted users often scan a page and use visual cues to determine how a page or document is organized. This lesson will address headings and how they help ensure non-sighted users and people using assistive technology can make sense of how a document/page is organized as well.

This lesson does not cover how to add headings to a page or document. That is addressed in the Accessibility Skills courses as it depends on what program you are using.

Core Concepts

What are headings?

Headings are the labels given to each section title of your doc/webpage; they give your document structure by organizing the content into sections. Often, people use a bold or larger font to indicate section titles (which allows sighted users to scan the document for the section they need). Assistive technology, however, does not allow the user to navigate based on whether the text is bold or larger. By using headings, a person using assistive tech can jump from section to section rather than read through all of the text to find what they need.

Without headings, a document/webpage is essentially one long stream of text that forces someone using assistive tech to navigate through from the start, rather than jump to what they need (imagine if you could only navigate a webpage by using the right and left arrow keys - no scroll bar, no up and down arrows!).

*Visual Formatting and the User Experience*
Visual Formatting	User Experience
Sections are visually distinct due to spaces, bold text, but headings are not used.	Visual formatting is stripped away leaving one long stream of text.

You won't always know if a document or webpage uses heading just by looking at it. Headings are often visually distinct, but just because text is larger or bold doesn't mean it is actually formatted as a heading. In the Accessibility Skills courses we'll discuss how to look for headings, as it differs depending on the program you are using.

How to Use Headings

Headings are used in a hierarchical manner. Document/page titles should always be Heading 1. Heading 2 is used for section titles. Heading 3 would be applied to sub-section titles.

Headings are nested under other headings; you should never jump from Heading 1 to Heading 4 without using Headings 2 and 3. For instance, anything formatted as Heading 3 should be a sub-section to what has been labeled as Heading 2.

Example Word doc with headings noted

Headings exist on their own line. So, you cannot make one part of a sentence or the first line of a paragraph a heading without making all of the text a heading. Sometimes people new to accessibility will try to turn anything they've made bold into a heading. However, sometimes you need to add a section title or change the semantic structure in order to apply a heading. See the examples below.

In the table below, the first column illustrates a document with bold visual formatting at the start of each line. The second column illustrates adding headings to organize the information. The headings are visually distinct, and also marked as headings so a screen reader user can navigate using them.

Before Adding Headings

Adding Headings

Item titles are bold at the start of each line.

Text is restructured with section titles added to accommodate headings.

Course: SOC 101

Section: 3805

Term: Winter 2019

Credits: 5

Instructor: Tess Johnson

Email: tjohnson@college.edu

Office: ESB 28

Phone: 360-555-3848

Course Info (Heading)

Course: SOC 101
Section: 3805
Term: Winter 2019
Credits: 5

Instructor Info (Heading)

Instructor: Tess Johnson
Email: tjohnson@college.edu
Office: ESB 28
Phone: 360-555-3848

Check Your Understanding:

Without headings, a person using assistive technology like a screen reader

A. will not be able to access the document text at all.

Incorrect.
As long as it's real text, the user can still access the text, but they won't see how it's structured.

B. cannot navigate by sections, or scan section titles to understand the document structure.

Correct.

C. will need to OCR the document in order to navigate it.

Incorrect.
You OCR a document to convert scanned text to real text.

Video Supplements

How Headings Help Screen Reader Users (3 mins)

This video out of NC State University provides a good explanation as to how headings on a website assist screen reader users to understand how content on the page is arranged.

How Headings Help Screen Reader Users

Additional Resources

Headings from AccessibleU, Univ of Minnesota - A very good discussion about the importance of headings in documents and webpages. While it references Moodle (a different LMS than what we use), the rest of the information is relevant.
Semantic Structure - This page from WebAIM discusses how headings are useful for webpages.