Headings
Can you understand a page's content structure associated with Headings?
Why it’s important
- Sione is blind and uses a screen reader to navigate the web. The headings give him a good idea of what is on the page and of what material is most important.
- Sabrina has dyslexia and can better understand the page organization reflected by the proper use of headings.
Correctly applied headings (e.g. <h1> - <h6>) provide efficient navigation to users with cognitive and visual disabilities.
Without heading markup assistive technology users are unable to skip through irrelevant content. Some users may have to navigate line-by-line through a web page with missing or improper section headings.
Next steps
- For online heading styles use h2 as the highest section level and h6 as the lowest. Headings on well-designed web pages and online documents will form an outline of the page’s content.
- Avoid skipping heading levels: Always start with h2, use h3 next etc.
- H1 is reserved for the page or online document title. Use only one h1 per page as screen readers may have difficulty understanding page structure when there is multiple h1's used.
- Avoid overusing headings. In most cases, content editors will not need more than h2 rank headings and the occasional h3 rank. Only for exceptionally long or complex pages would h5 and h6 be necessary.
- Avoid using headings based on their looks. Use the heading structure of the page first to prevent confusing heading structures.
- Do not use manual formatting (bold, font size overrides) to impersonate headings
- Screen reader and sighted user's often skim links, so the first few words of a link are important. Start with the most meaningful words for the link though limit the number of words to a maximum of 4 or 5.
References
Resources
- Headings (W3C)(this link opens an external website)
- Semantic Structure: Regions, Headings, and Lists (WebAIM)(this link opens an external website)
- The importance of Headings(this link opens an external website)