Headings play a crucial role in helping users understand, navigate, and interact with documents and websites. Well-structured headings provide a clear outline, guide users to the information they need, and improve the ability to scan or search content using keywords. 

Jump to:

Expectations

Headings should be used to help organize and structure content in a way that makes it easy to follow. They serve as signposts, guiding readers through the material with clarity and purpose. Each heading must accurately reflect the content of its section. While headings may be emphasized with larger font sizes or other visual elements, they must also be formatted with styles or markup so their structure can be recognized by assistive technologies. Headings should be used as a table of contents, starting with Heading 1 as the title and subheadings nested in a sequential order. This helps create a flow, allowing users to access content with ease.

Standard text must not use heading styles or markup solely for visual emphasis. For example, do not apply a heading format to a block quote for size or appearance.

Example of Heading Structure

Example:

Consider an article about modes of transportation split into different sections such as "Planes", "Trains", and "Automobiles". Subheadings can then be used to further detail the different types of Automobiles into other subcategories. Headings not only help screen readers identify sections but also guides users through the content, improving both clarity and navigation.

Why Headings are Important

Headings help divide large blocks of information, making it easier to follow, particularly for individuals with cognitive or visual disabilities.

Headings impact:

  1. Assistive technology: Headings help screen readers identify sections, enabling users who are blind or visually impaired to move between content more easily.
  2. Cognitive clarity and awareness: Headings provide clear markers that make it easier to understand and follow the flow of content.
  3. Content organization: By breaking up content into smaller, manageable sections, headings reduce cognitive load and help users focus on key information.

Headings support:

  1. Users who are blind or visually impaired: Headings allow screen readers to recognize when users have moved from one section to another, making it easier to navigate the content.
  2. People with learning disabilities: Headings make the structure of the content clearer, helping with understanding the information better.
  3. Keyboard users: Headings help users quickly jump from section to section, saving time and effort when moving through the page.

How to Implement

Write headings that are descriptive of the content that follows. Avoid language that is used solely to catch audience attention such as, “We’ve been busy!” or “Hard at work!” Instead, opt for professional, plain-language headings that clearly describe the content like, “Recent Events” and “Upcoming Events,” or “News.”

Headings are applied using underlying code or markup on digital content. Most content editors, like Microsoft Word, Cascade, and Canvas, make this easy with pre-formatted styles.

Quick Tips:

  • Do not use heading styles for visual styling alone
  • Use one level 1 heading (Heading 1) for the title of a document or webpage
  • Nest headings by their rank (or level). The most important heading has the rank 1 (<h1>), the least important heading rank 6 (<h6>). Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section.
  • Skipping heading ranks can be confusing and should be avoided where possible: Make sure that a <h2> is not followed directly by an <h4>, for example. It is ok to skip ranks when closing subsections, for instance, a <h2> beginning a new section, can follow an <h4> as it closes the previous section.

Examples for quick reference are provided below based on application.

Apply headings to selected text by choosing the appropriate “Heading” style in the “Styles” section of the “Home” ribbon.

Apply “Heading 1” to the document title rather than using the built-in “Title” style. This ensures consistency with website best practices.

Screenshot of a Microsoft Word document. Full description in image caption.
The “Styles” section of the “Home” ribbon is seen at the top of the Word document. Here, “Strategic Planning” is the title of the document and has “Heading 1” applied. “Mission, Vision, & Values” is the main sub-heading and “Heading 2” is applied. “Mission,” and “Vision” have “Heading 3” applied. The text “Values” is selected with and “Heading 3” is about to be applied.

 

Reference: Add a heading in a Word document (Microsoft)

PowerPoint offers less flexibility with headings than other applications. Here, the effective equivalent is a slide title.

Ensure that you are using an accessible PowerPoint template. Those who make custom templates must ensure that they are correctly assigning headings to the appropriate placeholders in the master slide editor. Use placeholders rather than custom text boxes to insert your content. Please review the Creating Accessible PowerPoint Presentations guide for more information.

You must ensure that each slide has a slide title. Each slide title should be unique. Slide titles are easily viewed using the “Outline View” (“View” > “Outline View”). Alternatively, use the “Check Accessibility” option (“Review” > “Check Accessibility”) to help catch missing or repeated slide titles.

Screenshot of Microsoft PowerPoint slide deck. Full description in image caption.
PowerPoint’s “Outline” view shows the “Titles” of each slide in bold directly to the right of the slide icon.

 

Reference: Title a slide in PowerPoint (Microsoft)

By default, the visible Page Title or Display name is automatically formatted as Heading 1. To add subheadings:

  1. Select the text in the WYSIWYG editor
  2. In the “Formats” dropdow, select  “Headings”
  3. Select the appropriate heading level.
Screenshot of Cascade W Y S I W Y G editor. Full description in image caption.
A WYSIWYG editor in Cascade for a website titled “Strategic Planning” (heading level one, not shown). Here “Mission, Vision, & Values,” is formatted as "Heading 2,” and “Mission,” and “Vision,” are formatted as “Heading 3.” The text “Values” is selected with the “Formats” dropdown expanded, the “Headings” category expanded, and “Heading 3” option selected.

Reference: Creating Headings (Cascade documentation)

In HTML, apply headings via the <H1> through <H6> tags respectively.

Screenshot of Cascade Source Code editor. Full description in image caption.
The Source Code Editor in Cascade shows properly formatted and nested headings. The title of the webpage is “Strategic Planning” which is heading level one by default (not shown). Here “Mission, Vision, & Values,” has heading level two applied, where “Mission,” “Vision,” have heading level three applied. "Values” is yet to have heading level three applied.

Reference: HTML Headings (W3 Schools)

WCAG Success Criteria

Meeting all of the above requirements (must statements) ensures that headings are in compliance with WCAG 2.1 (AA) as they relate to the following:

Further, meeting all of the above recommendations (should statements) ensures that headings are aligned with best practices as they relate to the following:

Back to Top
Digital Accessibility at JMU
Harrisonburg, Virginia 22807

Questions? Feedback? Concerns? 
Fill out the questions and feedback form!