Chapter 4: Headings

Headings form the most important part in the structure of the page. They allow the users to skim through the page and directly read the information they need. Headings also help user’s those depend on screen readers to skip the repeated navigational elements and directly jump to the main content region of the page.

Screen reader commands for headings

Validation for headings

Check 1 : Missing Markup

1. Open the page on the browser.
2. Navigate from top to bottom using a screen reader.
3. Identify if any content on the page that looks and function like a heading but not announced as a heading
4. If the page contains headings that are not spoken out by NVDA it is an accessibility

Check 2: Incorrect markup

1. Repeat step 1 and step 2 from check 1 i.e. open the page in the browser and navigate top to bottom using NVDA.
2. Check if any content is read as heading but is a normal text.
3. Content that is contextually not a heding should not be read as a heading by NVDA.
4. If step 2 is passed this success criteria is passed, els failed.

Check 3: Heading Hierarchy

1. Open the page on a browser.
2. Either using NVDA or Paul Adam’s headings bookmarklet navigate through all the headings on the page.
3. Check if the headings are in hierarchical order.
4. If the order of heading levels are not hierarchical consider it as an accessibility violation.If headings form a hierarchical order this success criteria is passed.
5. Also verify if more than one level of heading is skipped in the hierarchy. Eg: After heading level consider using level 2 or level 3 heading (level 2 recommended). Having level 4 heading after level 1 can be considered a violation.

Note: Riverse hierarchy is an accessibility violation.

Note 2: Header, main content and footer elements can have a individual structure of headings. It is not necessary to consider page as a single entity while evaluating heading structure.

WCAG Success Criteria

1.3.1 Info & relationships. (level A)