Read time: 50 seconds
Headings briefly describe the section it introduces. Headings represent an outline of the content.
- Lalit is blind and uses a screen reader to navigate the web. Lalit hears an outline of the page's main ideas, then backtracks to read the most interesting parts.
Steps to take
- Read the World Wide Web Consortium (W3C) web accessibility tutorial on headings.
- Use h1 to h6 to define your section headings, where h1 is the highest section level and h6 is the lowest.
- Avoid skipping heading levels: Always start with h1, use h2 next, and so on.
- Use only one h1 per page for the page title.
While HTML5 allows you to reset headings to h1 on new section elements, some screen reader users will have difficulty discerning the structure of pages with multiple h1s.
For this reason, it’s best to include only one h1 per page.
- Video tutorial: Using headings (YouTube)
- Video tutorial: How I do an accessibility check for page structure (YouTube)