This Wiki page is edited by participants of the WCAG Working Group. It does not necessarily represent consensus and it may have incorrect information or information that is not supported by other Working Group participants, WAI, or W3C. It may also have some very useful information.
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.