HTML and XHTML Techniques - Providing programmatic markup using aria-describedby to define authors intended context for a link

Submitter's Name: Jon Gunderson
Submitter's Email: jongund@illinois.edu

Technique ID: UNKNOWN
Short Name: Providing programmatic markup  using aria-describedby to define authors intended context for a link
Technique Category: HTML and XHTML Techniques
Success Criterion Reference: UNKNOWN

Applicability:
The technique should be used for any link that requires contextual information to understand the purpose or target of the link

UA Issues:
This technique is already supported by the following browsers and assistive technologies:
1. JAWS for Windows with Internet Explorer 8.0 and 9.0
2. JAWS for Windows with Firefox 4.0+
3. NVDA for Windows with Firefox 4.0+




Description:
Uses the aria-describedby attribute on a link to identify the container element(s) content for the context of the link.  See how this technique would modify the current WCAG 2.0 techniques related to requirement 2.4.4:

http://www.oaa-accessibility.org/examplep/wcag244/ 



Example 1 Head: Link context from a preceeding sibling LI element
Example 1 Description:
<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 2 Head: Link context from th elements of a table
Example 2 Description:

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


Resource 1 Title: http://www.oaa-accessibility.org/examplep/wcag244/
Related Techniques:
H77
H78
H79
H80
H81

Test Procedure:
Use a recent version of JAWS or NVDA with Firefox 4 or later and tab through the links.
Use a recent version of JAWS with Internet Explorer 9 and tab through links.

Expected Result:
Reads the link text and then the context text or warn the user their is more information to help understand the link.

Test File 1:
http://www.oaa-accessibility.org/examplep/wcag244/

Additional Notes:
What is the process for how submissions are reviewed?
I have submitted several techniques, yet I have never heard back on if they were even considered or when they will be discussed by the working group.

No guidelines reference was submitted!
No resource 1 URI submitted!
No resource 2 title submitted!
No resource 2 URI submitted!
No test file 1 pass/fail was submitted!
No test file 2 was submitted!
No test file 2 pass/fail was submitted!


------------------------------------------------

<technique id="UNKNOWN">
<short-name>Providing programmatic markup  using aria-describedby to define authors intended context for a link</short-name>
<applies-to>
<guideline idref="" />
<success-criterion idref="UNKNOWN" />
</applies-to>

<applicability>
The technique should be used for any link that requires contextual information to understand the purpose or target of the link
</applicability>
<ua_issues>
This technique is already supported by the following browsers and assistive technologies:
1. JAWS for Windows with Internet Explorer 8.0 and 9.0
2. JAWS for Windows with Firefox 4.0+
3. NVDA for Windows with Firefox 4.0+



</ua_issues>
<description>
Uses the aria-describedby attribute on a link to identify the container element(s) content for the context of the link.  See how this technique would modify the current WCAG 2.0 techniques related to requirement 2.4.4:

http://www.oaa-accessibility.org/examplep/wcag244/ 


</description>

<examples>
<ex_head_1>
Link context from a preceeding sibling LI element
</ex_head_1>
<ex_desc_1>
<ul> 
  <li> 
    <a href=&quot;tomb_raider.htm&quot; id=&quot;a1&quot;>Tomb Raider: Legend</a> 
    <a href=&quot;tomb_raider_images.htm&quot; aria-describedby=&quot;a1&quot;>See Images</a> 
    <a href=&quot;tomb_raider.mpeg&quot; aria-describedby=&quot;a1&quot;>(Download Demo)</a> 
  </li> 
  <li> 
    <a href=&quot;fear_extraction.htm&quot; id=&quot;a2&quot;>F.E.A.R. Extraction Point</a> 
    <a href=&quot;fear_extraction_images.htm&quot; aria-describedby=&quot;a2&quot;>See Images</a> 
    <a href=&quot;fear_extraction.mpeg&quot; aria-describedby=&quot;a2&quot;>(Download Demo)</a> 
  </li> 
  <li> 
    <a href=&quot;call_of_duty.htm&quot; id=&quot;a3&quot;>Call of Duty 2</a> 
    <a href=&quot;call_of_duty_images.htm&quot; aria-describedby=&quot;a3&quot;>See Images</a> 
    <a href=&quot;call_of_duty.mpeg&quot; aria-describedby=&quot;a3&quot;>(Download Demo)</a> 
  </li> 
  <li> 
    <a href=&quot;Warhammer_40K.htm&quot; id=&quot;a4&quot;>Warhammer 40K</a> 
    <a href=&quot;warhammer_40k_images.htm&quot;  aria-describedby=&quot;a4&quot;>See Images</a> 
    <a href=&quot;Warhammer_40k.mpeg&quot;  aria-describedby=&quot;a4&quot;>(Download Demo)</a> 
  </li> 
</ul>   

</ex_desc_1>
<ex_head_2>
Link context from th elements of a table
</ex_head_2>
<ex_desc_2>

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

</ex_desc_2>
</examples>

<resources>
<resources_title1>
http://www.oaa-accessibility.org/examplep/wcag244/
</resources_title1>
<resource_uri1>

</resource_uri1>
<resources_title2>

</resources_title2>
<resource_uri2>

</resource_uri2>
</resources>

<related_techniques>
<related_technique>
H77
</related_technique>
<related_technique>
H78
</related_technique>
<related_technique>
H79
</related_technique>
<related_technique>
H80
</related_technique>
<related_technique>
H81
</related_technique>
</related_techniques>

<tests>
<procedure>
Use a recent version of JAWS or NVDA with Firefox 4 or later and tab through the links.
Use a recent version of JAWS with Internet Explorer 9 and tab through links.
</procedure>
<expected_result>
Reads the link text and then the context text or warn the user their is more information to help understand the link.
</expected_result>
<test_file_1>
http://www.oaa-accessibility.org/examplep/wcag244/
</test_file_1>
<pass_fail_1>

</pass_fail_1>
<test_file_2>

</test_file_2>
<pass_fail_2>

</pass_fail_2>
</tests>

</technique>

Additional Notes:

What is the process for how submissions are reviewed?
I have submitted several techniques, yet I have never heard back on if they were even considered or when they will be discussed by the working group.

Received on Thursday, 7 July 2011 21:26:02 UTC