Headings

This article discusses using headings for accessibility in webpages, documents and D2L.

Headings and subheadings play a critical role in accessibility.  Most web pages and documents include a main heading that identifies the title or main topic, and subheadings that identify the start of new sections. Visibly, headings typically appear in a larger, bolder font than the surrounding text. Headings benefit all users, as they keep content organized and help users quickly find the particular content they’re looking for.

In order for screen reader users to benefit from headings, the headings must be identified as such (Heading 1, Heading 2, etc.) using the heading features that are provided by the authoring tool. Virtually every document authoring format includes support for headings and subheadings.

Headings should form an outline of the page content (Heading 1 for the main heading, Heading 2 for the first level of sub-headings, etc.). This enables screen reader users to understand how the page is organized. If the heading structure skips or reverses heading levels, this breaks the outline and users have a much harder time figuring out the relationships between sections of the page.

Screen readers also have features that enable users to jump quickly between headings with a single key-stroke, or to view an outline of the page created from its heading structure. This functionality makes it possible for screen reader users to navigate within a page with the same efficiency as sighted users.

 

Headings and subheadings should provide an outline of page content, so users can understand how the page is structured and easily navigate between headings.

Techniques using HTML

The following are best practices for using HTML headings:

• 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 there are additional levels of sub-headings within your web page content.
• Ensure headings form an outline of your page content; avoid skipping heading levels.

 

Headings and subheadings should provide an outline of page content, so users can understand how the page is structured and easily navigate between headings.

Techniques for Word

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

Techniques for PDF

If a PDF document is created from an authoring tool that supports headings and exports to tagged PDF (e.g., Microsoft Word), and these features were used properly when authoring the document, the document’s heading structure should be preserved within the PDF.

This can be checked and/or edited using either of two methods in Adobe Acrobat Pro DC:

Using the tag tree

To inspect the tag tree of a tagged document, follow these steps:

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 a manual tagging, or remediation process, and will require tagging the entire document. For more information, see the Adobe Support documentation on using the Reading Order tool for PDFs. Additional training on using the Reading Order tool to remediate a PDF document manually is recommended.

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

1. From the Accessibility Panel, launch the Reading Order tool.
2. Marquee the text, then apply the appropriate heading structure from the options in the Reading Order dialogue box.

NOTE: Modifying PDFs can have unpredictable results. Save often! (Saving multiple versions is recommended.)

Techniques for Google Docs

In Google Docs, headings are selected from the Styles selector on the toolbar.

 

Headings and subheadings should provide an outline of page content, so users can understand how the page is structured and easily navigate between headings.

Techniques

In D2L, headings are selected from the selector on the toolbar (by default, “Paragraph” is selected). Note that D2L automatically uses Heading 1 for the title of the page, so the first heading available in the rich content editor is Heading 2. Therefore, all top-level headings in the main content should use Heading 2. If the page includes sub-headings, use Heading 3 or Heading 4 as needed, keeping in mind that headings should form an outline of the page content and should not skip levels.