Headings

Problem

Web pages without proper HTML headings tags (e.g. H1, H2, H3, etc.) make it impossible for people using assistive technology to tell the difference between headings and regular body text.

How to Fix

  • Use proper HTML heading tag to identify headings (e.g. H1, H2, H3, H4, etc.)
  • Nest headings in order to convey the logical hierarchy of the page. (e.g. an H2 heading called "Apples" becomes a subsection of an H1 headings called "Types of Fruit")
  • Page titles should ideally be contained within an H1 tag.
  • Provide heading elements at the beginning of any important sections of content. This will help people use the browse-by-heading feature of their assistive technology.

Things to Avoid

  • Do not use bold, italics, emphasis, or strong to convey a heading. (i.e. <b>, <i>, <em>, <strong>)
  • Do not style content so that it looks like a heading without using the appropriate heading markup.
  • Avoid skipping levels when a heading is a sub-section of another heading. (e.g. an H3 should not follow an H1)

External Resources

  1. Understanding Success Criterion 1.3.1 Info and Relationships (Level A)
  2. Understanding Success Criterion 2.4.1 Bypass Blocks (Level A)
  3. Understanding Success Criterion 2.4.6 Headings and Labels (Level AA)