Foundations of Accessible Document Design: Headings

This article is the second in a nine-part series covering the basic principles of digital document design. Check out the first article for more digital document design tips!

Imagine you're walking around an unfamiliar city, but there are no road signs to guide you. You're wandering down streets and alleys, unsure of which direction to take or where to turn next. It's a frustrating experience to be lost in a sea of unknown landmarks. 

This is an experience all too familiar for screen reader users. Navigating a document without headings is like navigating a new city without any directional cues - it's disorienting, confusing, and time-consuming. In this article, we’ll discuss the importance of headings when creating digital documents that are accessible to everyone.

Select the graphic for a full-screen display of the Accessible Document Checklist.

Select to expand for full description of Accessibility Document Checklist graphic.

---

Rule No. 2: Use headings to organize the content of your document

You may know the term “headings” by many other names - titles and subtitles; main sections and subsections; maybe even topics and subtopics. Whatever the term, the goal is the same: to provide structure and organization in your document.  

Traditionally, you may have incorporated headings by using bolded or larger text to structure your document. This allows readers to quickly scan the content and find the information they’re looking for. While this strategy creates a great visual cue for some, it’s only helpful for sighted readers. 

The importance of programmatic headings

When you hear the word “programmatic”, you might think of complicated coding tasks. But for documents, it’s often as simple as using built-in tools to create headings that are designated as, well, headings. 

When you use the headings feature in a document authoring tool, you essentially create a digital label for assistive technologies. This invisible label indicates how the content of the document is organized. So when a screen reader user accesses your document, they can pull up a list of headings to hear its outline and structure - just like a sighted reader might skim through the document to get a sense of what’s included in each section.

Instead of relying solely on font styles, make sure your headings are programmatically assigned. For example, in this article, we’ve used larger, bolded text for each section header. But if this article were to be read with a screen reader, it would also announce these headings as - you guessed it! - headings. This ensures assistive technologies can interpret and navigate your document effectively.

Select the graphic for a full-screen display of a Styles tool.

Creating heading hierarchies

It’s equally important to use hierarchical headings in your document. Think of this like a flowchart that organizes your document clearly and logically. Headings will branch from one to the next to show how the content of your document is grouped together.

The first heading in your document - Heading Level 1 - acts as the overall title of your document. From here, your content is organized into main sections - begin each of these sections with a Heading Level 2. If there are subsections within these, they’ll begin with a Heading Level 3 and so on. Most importantly, don’t skip heading levels; this can create confusion about how your content is organized. If a screen reader user were to hear “Heading Level 2” followed by “Heading Level 4”, they might assume they’ve missed out on important information.

By using headings that follow a hierarchy, readers can easily understand the structure of your document. Plus, they’ll be able to find the information they need more efficiently. This organization is especially important for people using assistive technologies. They’ll be able to navigate through your content more easily if they understand the relationships between sections. And remember - this relationship should be shown visually and programmatically so that everyone’s needs are met.

Select the graphic for a full-screen display of the relationship between heading levels.

Select to expand for full description of the relationship between heading levels graphic.

---

Best practices for creating headings in your document

• Start with a clear and accurate outline for your document. Think about the structure and organization of your text. Use headings to convey that structure to readers. Ask yourself, if all you could read were the headings in your document, would you get a sense of what the document was about, or where to find certain information?

• Create unique and descriptive headings for each section of your document. Headings should accurately label the content they refer to. Focus on brief, clear, and informative headings. Avoid duplicating headings within the same document to prevent confusion. 

• Use built-in Styles or mark-up features when creating your headings. Remember: screen readers rely on programmatic labels to understand the layout of your document. Once you’ve designated your headings using these tools, you can change the appearance of your font to match the aesthetic of your document.

• Create a hierarchical structure with your headings. Each heading level indicates a relationship to the content around it. This will create a clear outline of your document. Make sure each heading level logically relates to the content it comes before and follows. Consistency is the key to creating a well-structured document.

Incorporating headings into your document design isn't just about aesthetics; it's about accessibility and usability for all readers. By following these best practices, you can create documents that are easier to navigate, understand, and engage with, regardless of how they're being accessed.

Get ready for the next installment of our Foundations of Accessible Document Design series where we discuss why your content should be written in plain language.