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

From WCAG WG
Jump to: navigation, search
m (Example 2)
(Description)
Line 88: Line 88:
 
<h3>Link context from <code>P</code> element</h3>  
 
<h3>Link context from <code>P</code> element</h3>  
  
<p>The following example is modified from [http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H78 H78: Identifying the purpose of a link using link text combined with its enclosing paragraph]</p>  
+
<p>The following example is derived from [http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H78 H78: Identifying the purpose of a link using link text combined with its enclosing paragraph]</p>  
  
 
<pre>
 
<pre>
Line 107: Line 107:
 
<h3>Link context from <code>th</code> elements of a table</h3>  
 
<h3>Link context from <code>th</code> elements of a table</h3>  
  
<p>The following example is modified from [http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H79 H79: Identifying the purpose of a link using link text combined with its enclosing table cell and associated table headings]</p>  
+
<p>The following example is derived from [http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H79 H79: Identifying the purpose of a link using link text combined with its enclosing table cell and associated table headings]</p>  
  
 
<pre>
 
<pre>
Line 159: Line 159:
 
<h3>Link context from preceeding <code>h1-h6</code> heading elements</h3>  
 
<h3>Link context from preceeding <code>h1-h6</code> heading elements</h3>  
  
<p>The following example is modified from [http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H80 H80: Identifying the purpose of a link using link text combined with the preceding heading element]</p>  
+
<p>The following example is derived from [http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H80 H80: Identifying the purpose of a link using link text combined with the preceding heading element]</p>  
  
 
<pre>
 
<pre>
Line 185: Line 185:
 
<h3>Link context from nested list content</h3>  
 
<h3>Link context from nested list content</h3>  
  
<p>The following example is modified from [http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H81 H81: Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested]</p>  
+
<p>The following example is derived from [http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H81 H81: Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested]</p>  
  
 
<pre>
 
<pre>

Revision as of 17:31, 4 March 2013


Status

User Agent Notes

  • Windows 7, Firefox 18.02, NVDA 2012.3, reads the link text and then the text content of the elements identified with the aria-describedby attribute
  • Windows 7, IE 9, NVDA 2012.3, reads the link text and then the text content of the elements identified with the aria-describedby attribute
  • Windows 7, Firefox 18.02, JAWS 13, user is alerted to additional information and JAWS+ALT+R is used to read the descriptive information
  • Windows 7, IE 9, JAWS 13, reads the link text and then the text content of the elements identified with the aria-describedby attribute
  • OS X 10.8.2, Safari 6.0.2, Voice Over, Automaticallyr reads descriptive text if you stay on a link long enough

Applicability

As of this writing this technique applies to HTML technologies.

This technique relates to:

Success Criterion 1.3.1 (Info and Relationships)

Description

The context of a link will help people understand the purpose of a link, especially if link text content is the same or similar to other link text on the page. For assistive technologies to be able to provide similar contextual information the relationship between the link and the other content is established through markup. One way to provide this relationship is to place an aria-describedby attribute on the link and provide an ID or list of space separated IDs to the other elements with text content on the page that provide contextual information. Assistive technologies will typically alert the user that there is additional information about this link available and the user can use the assistive technology to access this information.

The following examples are derived versions of current WCAG techniques that use the aria-describedby attribute to provide programmatic contextual information to the links.

Example 1

Link context with a LI element

The following example is derived from H77: Identifying the purpose of a link using link text combined with its enclosing list item technique


<ul> 
  <li id="li1"> 
    Check out the video report for last year's 
    <a href="festival.htm" aria-describedby="li1">National Folk Festival</a>. 
  </li> 
  <li id="li2"> 
    <a href="listen.htm">Listen to the instruments</a> 
  </li> 
  <li id="li3"> 
    Guitar Man: George Golden talks about 
    <a href="mkguitars.htm" aria-describedby="li3">making guitars</a>. 
  </li> 
</ul> 

Example 2

Link context from a preceding sibling LI element

The following example is derived from H77: Identifying the purpose of a link using link text combined with its enclosing list item technique


<ul> 
  <li> 
    <a href="tomb_raider.htm" id="a1">Tomb Raider: Legend</a> 
    <a href="tomb_raider_images.htm" aria-describedby="a1">See Images</a> 
    <a href="tomb_raider.mpeg" aria-describedby="a1">(Download Demo)</a> 
  </li> 
  <li> 
    <a href="fear_extraction.htm" id="a2">F.E.A.R. Extraction Point</a> 
    <a href="fear_extraction_images.htm" aria-describedby="a2">See Images</a> 
    <a href="fear_extraction.mpeg" aria-describedby="a2">(Download Demo)</a>
  </li> 
  <li> 
    <a href="call_of_duty.htm" id="a3">Call of Duty 2</a> 
    <a href="call_of_duty_images.htm" aria-describedby="a3">See Images</a> 
    <a href="call_of_duty.mpeg" aria-describedby="a3">(Download Demo)</a>
  </li> 
  <li> 
    <a href="Warhammer_40K.htm" id="a4">Warhammer 40K</a>  
    <a href="warhammer_40k_images.htm"  aria-describedby="a4">See Images</a>  
    <a href="Warhammer_40k.mpeg"  aria-describedby="a4">(Download Demo)</a> 
  </li> 
</ul>   

Example 3

Link context from P element

The following example is derived from H78: Identifying the purpose of a link using link text combined with its enclosing paragraph

<h4>The final 15</h4> 
<p id="p1">Coming soon to a town near you...the final 15 in the 
National Folk Festival lineup. 
<a href="final15.html" aria-describedby="p1">[Read more...]</a> 
</p> 

<h4>Folk artists get awards</h4> 
<p id="p2">Performers from the upcoming National Folk Festival receive 
National Heritage Fellowships. 
<a href="nheritage.html" aria-describedby="p2">[Read more...]</a> 
</p> 

Example 4

Link context from th elements of a table

The following example is derived from H79: Identifying the purpose of a link using link text combined with its enclosing table cell and associated table headings

<table class="links" border="1" style="border-collapse:collapse;"> 
<caption>Comparison of Rental Car Rates</caption> 
<tr> 
  <th></th> 
  <th id="c1">Alamo</th> 
  <th id="c2">Budget</th> 
  <th id="c3">National</th> 
  <th id="c4">Avis</th> 
  <th id="c5">Hertz</th> 
</tr> 
<tr> 
  <th id="r1">Economy cars</th> 
  <td><a href="econ_ala.htm" aria-describedby="c1 r1">$67/day</a></td> 
  <td><a href="econ_bud.htm" aria-describedby="c2 r1">$68/day</a></td> 
  <td><a href="econ_nat.htm" aria-describedby="c3 r1">$72/day</a></td> 
  <td><a href="econ_av.htm" aria-describedby="c4 r1">$74/day</a></td> 
  <td><a href="econ_hz.htm" aria-describedby="c5 r1">$74/day</a></td> 
</tr> 
<tr> 
  <th id="r2">Compact cars</th> 
  <td><a href="comp_ala.htm" aria-describedby="c1 r2">$68/day</a></td> 
  <td><a href="comp_bud.htm" aria-describedby="c2 r2">$69/day</a></td> 
  <td><a href="comp_nat.htm" aria-describedby="c3 r2">$74/day</a></td> 
  <td><a href="comp_av.htm" aria-describedby="c4 r2">$76/day</a></td> 
  <td><a href="comp_hz.htm" aria-describedby="c5 r2">$76/day</a></td> 
</tr> 
<tr> 
  <th id="r3">Mid-sized cars</th> 
  <td><a href="mid_ala.htm" aria-describedby="c1 r3">$79/day</a></td> 
  <td><a href="mid_bud.htm" aria-describedby="c2 r3">$80/day</a></td> 
  <td><a href="mid_nat.htm" aria-describedby="c3 r3">$83/day</a></td> 
  <td><a href="mid_av.htm" aria-describedby="c4 r3">$85/day</a></td> 
  <td><a href="mid_hz.htm" aria-describedby="c5 r3">$85/day</a></td> 
</tr> 
<tr> 
  <th id="r4">Full-sized cars</th> 
  <td><a href="full_ala.htm" aria-describedby="c1 r4">$82/day</a></td> 
  <td><a href="full_bud.htm" aria-describedby="c2 r4">$83/day</a></td> 
  <td><a href="full_nat.htm" aria-describedby="c3 r4">$89/day</a></td> 
  <td><a href="full_av.htm" aria-describedby="c4 r4">$91/day</a></td> 
  <td><a href="full_hz.htm" aria-describedby="c5 r4">$91/day</a></td> 
</tr> 
</table> 

Example 5

Link context from preceeding h1-h6 heading elements

The following example is derived from H80: Identifying the purpose of a link using link text combined with the preceding heading element


<h2 id="head1"><a href="royal_palm_hotel.html">Royal Palm Hotel</a></h2> 
  <ul class="horizontal"> 
    <li><a href="royal_palm_hotel_map.html" aria-describedby="head1">Map</a></li> 
    <li><a href="royal_palm_hotel_photos.html" aria-describedby="head1">Photos</a></li> 
    <li><a href="hroyal_palm_hotel_directions.html" aria-describedby="head1">Directions</a></li> 
    <li><a href="royal_palm_hotel_reviews.html" aria-describedby="head1">Guest reviews</a></li> 
    <li><a href="royal_palm_hotel_book.html" aria-describedby="head1">Book now</a></li> 
  </ul> 

<h2 id="head2"><a href="hotel_three_rivers.html">Hotel Three Rivers</a></h2> 
  <ul class="horizontal"> 
    <li><a href="hotel_three_rivers_map.html" aria-describedby="head2">Map</a></li> 
    <li><a href="hotel_three_rivers_photos.html" aria-describedby="head2">Photos</a></li> 
    <li><a href="hotel_three_rivers_directions.html"  aria-describedby="head2">Directions</a></li> 
    <li><a href="hotel_three_rivers_reviews.html"  aria-describedby="head2">Guest reviews</a></li> 
    <li><a href="hotel_three_rivers_book.html"  aria-describedby="head2">Book now</a></li> 
  </ul>     

Example 6

Link context from nested list content

The following example is derived from H81: Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested

<ul> 
<li id="li4">Annual Report 2005-2006 
  <ul> 
  <li><a href="annrep0506.html" aria-describedby="li4">(HTML)</a></li> 
  <li><a href="annrep0506.pdf"  aria-describedby="li4">(PDF)</a></li> 
  <li><a href="annrep0506.rtf"   aria-describedby="li4">(RTF)</a></li> 
  </ul> 
</li> 
<li id="li5">Annual Report 2006-2007 
  <ul> 
  <li><a href="annrep0607.html" aria-describedby="li5">(HTML)</a></li> 
  <li><a href="annrep0607.pdf" aria-describedby="li5">(PDF)</a></li> 
  <li><a href="annrep0607.rtf" aria-describedby="li5">(RTF)</a></li> 
  </ul> 
</li> 
</ul> 

Example 7 (I think we can drop this, almost identical to hotel example above -David)

<ul> 
<li id="li6"><a href="royal_palm_hotel.html">Royal Palm Hotel</a> 
  <ul class="horizontal"> 
    <li><a href="royal_palm_hotel_map.html" aria-describedby="li6">Map</a></li> 
    <li><a href="royal_palm_hotel_photos.html" aria-describedby="li6">Photos</a></li> 
    <li><a href="hroyal_palm_hotel_directions.html" aria-describedby="li6">Directions</a></li> 
    <li><a href="royal_palm_hotel_reviews.html" aria-describedby="li6">Guest reviews</a></li> 
    <li><a href="royal_palm_hotel_book.html" aria-describedby="li6">Book now</a></li> 
  </ul> 
</li> 
<li id="li7"><a href="hotel_three_rivers.html">Hotel Three Rivers</a> 
  <ul class="horizontal"> 
    <li><a href="hotel_three_rivers_map.html" aria-describedby="li7">Map</a></li> 
    <li><a href="hotel_three_rivers_photos.html" aria-describedby="li7">Photos</a></li> 
    <li><a href="hotel_three_rivers_directions.html" aria-describedby="li7">Directions</a></li> 
    <li><a href="hotel_three_rivers_reviews.html" aria-describedby="li7">Guest reviews</a></li> 
    <li><a href="hotel_three_rivers_book.html" aria-describedby="li7">Book now</a></li> 
  </ul> 
</li> 
</ul> 

</div>