Headings & Document/Page Structure
Overview
Sighted users often scan a page and use visual cues to determine how a page or document is organized. This lesson addresses headings and how they help ensure non-sighted users and people using assistive technology can make sense of how a document or page is organized.
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 document editing 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!).
The following table illustrates the effect of bold and other formatting that has been added for visual effect but that doesn't use headings. For sighted users, the visual experience is assisted by the visual formatting. The second column of the table illustrates how a screen reader user would experience the text. Since none of the text is marked with headings, there is no apparent structure to the document, the text appears to be one long stream of words and sentences.
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, as in an outline; 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.
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.
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 Instructor Info (Heading) Instructor: Tess Johnson |
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.
B. cannot navigate by sections, or scan section titles to understand the document structure.
Video Supplements
How Headings Help Screen Reader Users
This video from 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 (3 mins) Links to an external site.
Creating accessible documents: Applying heading styles for structure in Word
This video from citybytes provides a good overview of why we use headings and demonstrates how to incorporate headings into a Word document.
Creating accessible documents: Applying heading styles for structure in Word (4:15 mins) Links to an external site.
Additional Resources
- Headings Links to an external site. from AccessibleU, Univ of Minnesota - A very good discussion about the importance of headings in documents and web pages. While it references Moodle (a different LMS than what we use), the rest of the information is relevant.
- Semantic Structure Links to an external site. - This page from WebAIM discusses how headings are useful for web pages.
Click Next to advance to the next lesson or return to the Module Overview.