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!
