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

From WCAG WG
Revision as of 23:26, 19 January 2013 by Dmacdona (Talk | contribs)

Jump to: navigation, search


Status

Example 1

Link context with a LI element

The following example is modified from WCAG <a href="http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H77">H77: Identifying the purpose of a link using link text combined with its enclosing list item technique</a>


<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" aria-describedby="li2">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 preceeding sibling LI element

The following example is modified from WCAG <a href="http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H77">H77: Identifying the purpose of a link using link text combined with its enclosing list item technique</a>


<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 modified from WCAG <a href="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</a>

<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 modified from WCAG <a href="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</a>

<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 modified from WCAG <a href="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</a>


<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 modified from WCAG <a href="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</a>

<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>