Accessible Headings

​What Are Headings?

Headings are a special type of text formatting. You may already use bold, color and/or a larger font to distinguish the section titles in your content, but that type of formatting alone won't allow a screen reader to recognize the text as a heading. You also need to format the text using the heading style settings in your word processor, website content editor, the text editor on eCampus, etc.

Example Heading in Microsoft Word

In the example below, a Heading 1 style has been applied to the section title.

Screenshot of the heading buttons in the Word ribbon bar. 

Why Use Headings?

People using screen readers need to have text formatted in certain ways in order to easily navigate content. Think of headings as an outline or table of contents that will help screen reader users understand the structure of the document and quickly find information. Heading structure allows screen reader users to easily search for sections and jump directly to specific content without having to listen to the entire document each time.

You should add headings to indicate all main topics and subtopics, especially in longer documents.

Video Overview: Improve accessibility with heading styles

Heading Hierarchies

You should use headings in a hierarchical (nested) order to indicate main topics and subtopics.

  • Heading 1 is usually a page title or the main content heading. It's the most important heading, and there is generally just one Heading 1.
  • Heading 2 is usually a major section heading.

  • Heading 3 is usually a sub-section of a Heading 2, and so on (ending with Heading 6).

Never skip a heading level. For example, don't jump directly from a Heading 1 to a Heading 3.

Example Heading Structure

Below is an example of one possible heading hierarchy for a course syllabus.

Note that the document title ("ENGL 1301 Course Syllabus") is the only Heading 1.

The main topics of the document are all Heading 2, and any subtopic for one of those main topics is a Heading 3.

Also, please note that the following example is coded as a list to illustrate the organizational structure of header elements and is not coded with the matching header tags.

  • Heading 1: ENGL 1301 Course Syllabus
    • Heading 2: Instructor Information
    • Heading 2: Basic Course Information
      • Heading 3: Course Prerequisites
      • Heading 3: Course Description
      • Heading 3: Student Learning Outcomes
    • Heading 2: Required Course Materials
    • Heading 2: Course Activities
    • Heading 2: Grading
    • Heading 2: Course and Institutional Policies
      • Heading 3: Attendance Policy
      • Heading 3: Late Policy
      • Heading 3: Institutional Policies
    • Heading 2: Course Schedule

Additional Resources