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 aria-labelledby for link purpose"

From WCAG WG
Jump to: navigation, search
(Example 2)
(Status)
Line 7: Line 7:
 
* [https://www.w3.org/2002/09/wbs/35422/html-techs-28-June-2012/results#x2596 Surveyed 2 July 2012]
 
* [https://www.w3.org/2002/09/wbs/35422/html-techs-28-June-2012/results#x2596 Surveyed 2 July 2012]
 
* [http://www.w3.org/2012/07/02-html-techs-tf-minutes Discussed 2 July 2012]
 
* [http://www.w3.org/2012/07/02-html-techs-tf-minutes Discussed 2 July 2012]
* [https://www.w3.org/2002/09/wbs/35422/20130110aria/ Surveyed by WG 10 Jan 2013]
+
* [https://www.w3.org/2002/09/wbs/35422/20130110aria/ Surveyed by WG 10 Jan 2013], returned to TF
  
 
== Applicability ==
 
== Applicability ==

Revision as of 22:00, 20 June 2013


Status

Applicability

WAI-ARIA, HTML5

This technique applies to:

User agent and assistive technology support notes

Please see user agent ARIA support: [1]

Testing as of July 2012

Using VoiceOver 3 with Safari 5.1.3. On focus the link text 'Read more' was announced first with the referenced aria-labelledby content announced second.

Screen reader testing as of 22 October 2012

  • Not supported:
    • Win 7, IE 9, JAWS 13
    • Win 7, FF 13, NVDA 2012.2.1
    • Win XP, FF 15.0, NVDA 2011.3
    • Win XP, IE 8, SaToGo
  • Partial support (both link text and element referenced by aria-labeledby are read):
    • Win 7, IE9, NVDA 2012.2.1 (but Example 2 not supported)
    • Win XP, IE 8, NVDA 2011.3 (but Example 2 not supported)
  • Supported:
    • Win 7, FF 13, JAWS 13 (but Example 2 has only partial/buggy support: "Sales report 2012" is read twice)
    • Mac OS 10.5.8, VoiceOver

See full testing results for Example 1

See full testing results for Example 2

Description

The objective of this technique is to identify the purpose of a link based on the link and information in its context that may be readily apparent for sighted users, but less obvious for screen reader users. The aria-labelledby attribute creates a programmatic association between the link and one or more pieces of text. When a screen reader focuses on the link, the associated text is announced instead of the link text.

Examples

Example 1

This example should replace the "read more" link text at the end of the teaser text with the content of the h2 heading referenced by aria-labelledby.

<h2 id="headline">Storms hit east coast</h2>

<p>Torrential rain and gale force winds have struck the east coast, causing flooding in many coastal towns.
   <a href="news.html" aria-labelledby="headline">Read more...</a></p>

Example 2

The following example concatenates a link name through aria-labelledby referencing both the report title, "2012 Sales Report", and the respective file type, (PDF, Word, or Powerpoint).

Note: The use of tabindex="-1" on the span element is not meant to support focusing by scripts - here, it merely serves to ensure that some browsers (IE9, IE10) will include the span element in the accessibility tree, thus making it available for reference by aria-labelledby.

<p id="report-title">Download 2012 Sales Report:
<a aria-labelledby="report-title pdf" href="#" id="pdf">PDF</a> |
<a aria-labelledby="report-title doc" href="#" id="doc">Word</a> |
<a aria-labelledby="report-title ppt" href="#" id="ppt">Powerpoint</a></p>

Example 3

There may be cases where an author will placed a tag around a section of code that will be referenced. In this case the use of tabindex="-1" on the span will ensure that some browsers (IE9, IE10) will include the span element in the accessibility tree, thus making it available for reference by aria-labelledby. Below is the previous example using 1his technique

<p>Download <span id="report-title" tabindex="-1">2012 Sales Report</span>:
<a aria-labelledby="report-title pdf" href="#" id="pdf">PDF</a> |
<a aria-labelledby="report-title doc" href="#" id="doc">Word</a> |
<a aria-labelledby="report-title ppt" href="#" id="ppt">Powerpoint</a></p>

Tests

  1. Examine the element that has the aria-labelledby attribute.
  2. Check that the programmatic association is valid by making sure the ID ref of the element containing the label text and the aria-labelledby value are a match.
  3. Check that the text contained within the label element is an adequate label for the link.

Expected results

Tests 2 and 3 are true.