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!

BySrinivasu Chakravarthula

Srinivasu Chakravarthula is an accessibility evangelist for 12+ years. Accessibility is not just his profession but something that is very close to his heart. Srinivasu believes that technology plays an important role to make lives of people with disabilities independent. Srinivasu is recipient of Yahoo! Ratna and NCPEDP MphasiS Universal Design Award. Srinivasu is Certified Web Accessibility Specialist by International Association of Accessibility Professionals (IAAP). Srinivasu is also an individual Professional member of IAAP. Visit his personal website to learn more.

Leave a comment

%d bloggers like this: