Heading Structure – Accessibility Tips

  1. Home
  2. /
  3. Web Accessibility
  4. /
  5. Heading Structure – Accessibility...
18 May

Heading Structure – Accessibility Tips

Right heading structure improves user experience and provide easy access to content. It’s essential to mark up using real HTML heading mark-up and not just styling as headings. Often times some developers make text bold, increase font size for headings instead using real HTML mark-up.

Why is it essential to use real heading mark-up?

  • When styles are turned off, they still have to look like headings
  • Screen readers such as NVDA, rely on mark-up to expose information to users. If headings are not marked-up using real HTML, they will be treated as plain text
  • When HTML heading attributes are used, screen reader users can skim read the content
  • Search engines look up for headings to retrieve relevant content to users

things to remember while designing headings

  • Ensure that heading levels are not skipped
  • Ensure that page must have at least one <h1>

Related WCAG Success Criteria

  • 1.3.1 Info & Relationships Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
  • 2.4.1 Bypass Blocks A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)
  • 2.4.6 Headings and labels Headings and labels describe topic or purpose. (Level AA)
  • 2.4.10 Section headings – Section headings are used to organize the content. (Level AAA)

How to test?

  • Use WAVE by WebAIM and look for structured elements
  • If you are using NVDA screen reader, Press Insert + F7 which brings up elements dialog and look for Headings

Build structured contnet!

Srinivasu Chakravarthula

BySrinivasu Chakravarthula

Srinivasu is an Accessibility evangelist with about 13 years of experience in the industry. That experience has developed Srinivasu to treat Accessibility not just his day job, but something close to his heart.

Leave a comment

%d bloggers like this: