-
Notifications
You must be signed in to change notification settings - Fork 285
/
Copy pathARIA7.html
54 lines (47 loc) · 5.69 KB
/
ARIA7.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using aria-labelledby for link purpose</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using aria-labelledby for link purpose</h1><section class="meta"><p class="id">ID: ARIA7</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
<p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>. </p>
</section><section id="description"><h2>Description</h2>
<p>With the <code class="att">aria-labelledby</code> attribute, authors can use a visible text element on the page as a label for a focusable element (a form control or a link). For example, a "read more..." link could be associated with the text of the heading of the preceding section to make the purpose of the link unambiguous (see example 1).</p>
<p>When associating text to a focusable element with the help of <code class="att">aria-labelledby</code>, the target text element is given an ID which is referenced in the value of the <code class="att">aria-labelledby</code> attribute of the focusable element.</p>
<p>It is also possible to use several text elements on the page as a label for a focusable element. Each of the text elements used must be given a unique ID which is referenced as a string of IDs (IDREF) in the value of the <code class="att">aria-labelledby</code> attribute. The label text should then be concatenated following the order of IDs in the value of the <code class="att">aria-labelledby</code> attribute.</p>
<p>When applied on links, <code class="att">aria-labelledby</code> can be used to identify the purpose of a link that may be readily apparent for sighted users, but less obvious for screen reader users.</p>
<p>The specified behavior of <code class="att">aria-labelledby</code> is that the associated label text is announced instead of the link text (not in addition to the link text). When the link text itself should be included in the label text, the ID of the link should be referenced as well in the string of IDs forming the value of the <code class="att">aria-labelledby</code> attribute.</p>
<p>For more information on the naming hierarchy please consult the <a href="https://www.w3.org/TR/accname/">Accessible Name and Description Computation</a> and the <a href="https://www.w3.org/TR/html-aapi/#a-element">accessible name and description calculation for links</a> in the HTML to Platform Accessibility APIs Implementation Guide.</p>
</section><section id="examples"><h2>Examples</h2>
<section class="example">
<h3>Providing additional information for links</h3>
<p>This example will mean that the link text as shown on screen is then used as the start of the accessible name for the link. Popular screen readers like JAWS and NVDA will announce this as:
"Read more ...Storms hit east coast" and will display that same text in the links list which is very useful for screen reader users who may browse by links.</p>
<pre xml:space="preserve"><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 id="p123" href="news.html" aria-labelledby="p123 headline">Read more...</a></p></pre>
</section>
<section class="example">
<h3>Concatenating link text from multiple sources</h3>
<p>There may be cases where an author will placed a tag around a section of code that will be referenced.</p>
<p>Note: The use of tabindex="-1" on the <code class="el">span</code> element is not meant to support focusing by scripts - here, it merely serves to ensure that some browsers (IE9, IE10) will include the <code class="el">span</code> element in the accessibility tree, thus making it available for reference by <code class="att">aria-labelledby</code>. For more details see <a href="https://msdn.microsoft.com/en-us/library/ie/gg701963%28v=vs.85%29.aspx#Accessible_HTML_Elements">Accessible HTML Elements</a>.</p>
<pre xml:space="preserve"><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></pre>
</section>
</section><section id="tests"><h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
<p>For each link that has an <code class="att">aria-labelledby</code> attribute:</p>
<ol>
<li>Check that each ID in the value of the <code class="att">aria-labelledby</code> attribute matches an ID of a text element used as part of the link purpose.</li>
<li>Check that the combined value of the text referenced by the one or more ID's in the <code class="att">aria-labelledby</code> attribute properly describes the purpose of the link element.</li>
</ol>
</section>
<section class="results"><h3>Expected Results</h3>
<ul>
<li>Checks #1 and #2 are true.</li>
</ul>
</section>
</section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2>
<ul>
<li>
<a href="https://www.w3.org/TR/accname/">Accessible Name and Description Computation</a>
</li>
</ul>
</section></body></html>