Accessible Headings

What Is an Accessible Heading?

Accessible headings assist the web audience scan and navigate information.  When a web page has the correct heading markup, screen readers have the functionality to list page headings and sub-headings. Assistive technology users can then easily navigate and scan information, much the same as non-assistive technology users do.

Why Use Accessible Headings?

For all audiences including the assistive technology audience, the appropriate use of headings and sub-headings increases the scannability, usability and functionality of web content. 

The assistive technology audience that uses screen readers to access and navigate web content, headings and sub-headings use headings as a tool to understand site architecture, page structure, organization and to scan information.

Best Practices for Accessible Headings

  • Name headings within a web page with appropriate descriptive titles for the web content.
  • Create headings and sub-headings for navigation of your web content.
  • Create headings and sub-headings so that web browsers (e.g. Firefox, Chrome, Internet Explorer, Safari) and search engines can easily search and find your web content.
  • Use nested heading levels to emphasis and organize your content. Example: headings and sub-headings.
  • Know and follow your area's guidelines for heading markup.
    • For example, the Division of Student Affairs asks for main headings to be marked up in Cascade as heading level 3.
  • Do not link a heading.
  • Do not add images to headings.

Quick Tips

  • Plan webpage content and use appropriate headings.
  • Do not use sub-headings for decorative purposes.

Example Of Accessible Headings

The following image displays a variety of accessible heading levels on a web page.  

example of accessible headings from the msa website http://www.northwestern.edu/msa/services/index.html

Resources

Cascade Instructions For Adding Accessible Headings