Using Headings

Headings outline content

Headings and subheadings organize your content and are important for usability and accessibility. People with limited or no vision depend on screen reading software to read aloud the text that appears on the screen. Using headings properly provides a hierarchy of content that allows users to navigate more efficiently.  

Still from video - Web Accessibility 101: Web Headings for Screen Readers

How do headings help users of screen readers?

Using Headings Correctly

Bold Formatting vs. Pre-formatted Headings

This is Bold Text Being Used Incorrectly as a Heading

  • If you bold paragraph text to create the look of a heading, a screen reader will still read it as paragraph text. This is not helpful for someone using a screen reader. 
This is a True Heading Used Correctly as a Heading (Heading 6)
  • Conversely, do not use a heading style to make text big and bold if it really is not a heading. The screen reader will read it as a heading and not properly communicate the emphasis you intended. 
Nesting and Order
  • Have only one H1 heading that encompasses the topic of the entire page or document. 
  • Nest all subsequent headings numerically: H2 follows H1, H3 follows H2 and so forth. You can use a level more than once, but do not skip a level.