Headings

Headings and subheadings are essential components of accessible design. Most web pages and documents contain a main heading to indicate the title or primary topic, with subheadings marking the beginning of new sections. Visually, headings are typically displayed in a larger and bolder font than regular text. The use of headings supports all users by maintaining organizational structure and facilitating the efficient location of specific information.

The user of a screen reader benefits from headings when the headings are accurately identified as such (Heading 1, Heading 2, etc.) using the heading features provided by the authoring tool. Virtually every document authoring format includes support for headings and subheadings.

Headings are used to outline page content, with Heading 1 indicating the main heading and Heading 2 designating the first level of sub-headings. This structure helps screen reader users understand the organization of the page. If heading levels are skipped or reversed, it disrupts the outline and makes it more difficult for users to determine the relationships between different sections.

Screen readers are equipped with features that allow users to efficiently navigate between headings using single keystrokes or to access a hierarchical outline of the page generated from its heading structure. These capabilities enable individuals utilizing screen readers to move within a webpage with efficiency comparable to that of sighted users.

Tools for Creating Headings

Explore the best practices for creating headings in these popular authoring tools.

Screenshot indicating the option to Modify a heading within the Styles menu on the Word ribbon at the top of the program window.

In Word, add headings using the built-in heading styles (Heading 1, Heading 2, etc.) available in the Ribbon. Right-click on the style button and select “Modify” to modify the appearance of any of the heading styles.

Screenshot indicating how to accurately apply Heading tags using the Reading Order dialog box in Adobe Acrobat Pro.

When a PDF document is generated from an authoring tool that includes support for headings and tagged PDF export (such as Microsoft Word), and these features are properly applied during document creation, the heading structure will typically be retained in the resulting PDF file.

You can confirm and/or edit using one of the following methods in Adobe Acrobat Pro DC:

Using the Tag Tree

Follow these steps to inspect the tag tree of a tagged document:

  1. From the View menu, select Show/Hide > Navigation Panes > Tags. This will display the tags in descending order from top to bottom.
  2. Review the tag tree of the PDF, checking to be sure headings are tagged as headings at the appropriate levels to form an outline of the page content (e.g., <H1>, <H2>, <H3>).

Using the Reading Order Tool

Adding headings to an untagged document using the Reading Order tool is part of the remediation process (i.e., manual tagging) and requires tagging the entire document. For more detailed information, review Adobe Support’s document: Reading Order tool for PDFs. Additional training on using the Reading Order tool to manually remediate a PDF document may be necessary.

To add heading tags using the Reading Order tool, follow these steps:

  1. From the All Tools panel on the left, select the option to Prepare for Accessibility.
  2. Within the Accessibility Panel, launch the Reading Order tool from the tool options on the right. (Hint: It looks like a "Z".)
  3. Right-click on the desired text in the right panel and choose Show Reading Order panel from the drop-down menu.
  4. Within the Reading Order dialogue box, apply the appropriate heading structure from the available options. 

 

Screenshot indicating the Paragraph drop-down menu of Heading options with the Rich Text Editor found in Canvas platform

In Canvas, headings are chosen from the Blocks selector located on the toolbar, with “Paragraph” set as the default option. It is important to note that Canvas automatically designates Heading 1 for the page title; therefore, Heading 2 is the first heading level available in the rich content editor (as indicated in the screenshot below).

For the main content, all top-level headings should utilize Heading 2. If sub-headings are required, apply Heading 3 or Heading 4 appropriately, ensuring that the heading levels reflect a logical outline of the page and do not skip any levels.

  • Use <h1> for the main heading of the page. For most pages, there will be only one <h1>, marking the content that is unique on that page. The name of the website, which is often shown at the top of each web page within a website, does not need to be tagged as a heading at all.
  • Use <h2> for subheadings beneath the main heading.
  • Use additional levels of headings (<h3> through <h6>) as needed if for additional levels of sub-headings within the web page content.
  • Ensure headings form an outline of page content.
  • Avoid skipping heading levels.

WCAG 2.1 Success Criteria

The issues described on this page, and associated Techniques pages, map to the following success criteria in the W3C’s Web Content Accessibility Guidelines (WCAG) 2.1: