Using role="heading" to identify headings
- 4th Nov, Ready for TF review.
Add use cases:
- where retrofitting a site where can't change dom because of scripts that depend on existing hierarchy
- h7 equivalent (AT supported)
User Agent notes
- Jaws 13 and higher supports this technique.
- NVDA 2012.3 supports this technique.
This technique applies to HTML with WAI-ARIA.
This technique relates to Success Criterion (SC) 1.3.1. (Info and relationships):
The purpose of this technique is to provide a way for Assistive Technologies (AT) to identify a piece of content as a heading. Applying role="heading" to an element causes an AT (like a screen reader) to treat it as though it were a heading.
Headings are used by screen readers to convey the structure of content on the page. Screen readers also use headings as a means of navigating through the content on a page.
This example demonstrates how to apply role="heading" to a piece of content. Note: The aria-labelledby attribute is used to associate the heading content with its parent element.
<div id="hd1"> <div role="heading" aria-labelledby="hd1">Apples</div> <p>Apples grow on trees in areas known as orchards...</p> </div>
- H42: Using h1-h6 to identify headings
- H69: Providing heading elements at the beginning of each section of content
- G141: Organizing a page using headings
- F2: Failure of Success Criterion 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text
- Examine each element with the attribute role="heading".
- Determine whether the content of the element is appropriate as a heading.
- Check #2 is true.