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.

Difference between revisions of "Using role="heading" to identify headings"

From WCAG WG
Jump to: navigation, search
(Status)
(Status)
Line 6: Line 6:
  
 
* 4th Nov, Ready for TF review.
 
* 4th Nov, Ready for TF review.
 +
* [https://www.w3.org/2002/09/wbs/35422/20130117misc/results#xheading WG survey 14 Jan 2013], returned to TF
  
 
Add use cases:  
 
Add use cases:  
 
* where retrofitting a site where can't change dom because of scripts that depend on existing hierarchy
 
* where retrofitting a site where can't change dom because of scripts that depend on existing hierarchy
 
* h7 equivalent (AT supported)
 
* h7 equivalent (AT supported)
 +
  
  

Revision as of 21:56, 20 June 2013


Status

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.

Applicability

This technique applies to HTML with WAI-ARIA.

This technique relates to Success Criterion (SC) 1.3.1. (Info and relationships):

Description

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.

Examples

Example 1

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>

Resources

WAI-ARIA Authoring Practices

Related Technques

  • 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

Tests

Procedure

  1. Examine each element with the attribute role="heading".
  2. Determine whether the content of the element is appropriate as a heading.

Expected results

  • Check #2 is true.