W3C home > Mailing lists > Public > public-wcag2-techs@w3.org > July 2011

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

From: WCAG 2.0 Techniques Submission Form <nobody@w3.org>
Date: Thu, 07 Jul 2011 21:26:00 +0000
To: public-wcag2-techs@w3.org
Message-Id: <E1Qew5A-0002o2-Oj@barney.w3.org>

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


Example 2 Head: Link context from th elements of a table
Example 2 Description:

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


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 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Thursday, 7 July 2011 21:26:02 GMT