-
Notifications
You must be signed in to change notification settings - Fork 285
/
Copy pathARIA10.html
53 lines (48 loc) · 4.06 KB
/
ARIA10.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
<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using aria-labelledby to provide a text alternative for non-text content</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using aria-labelledby to provide a text alternative for non-text content</h1><section class="meta"><p class="id">ID: ARIA10</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
<p>This technique applies to HTML with <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>The purpose of this technique is to provide a short description for an element that can be read by assistive technologies (AT) by using the <code class="att">aria-labelledby</code> attribute. The <code class="att">aria-labelledby</code> attribute associates an element with text that is visible elsewhere on the page by using an ID reference value that matches the ID attribute of the labeling element. Assistive technology such as screen readers use the text of the element identified by the value of the <code class="att">aria-labelledby</code> attribute as the text alternative for the element with the attribute.</p>
</section><section id="examples"><h2>Examples</h2>
<section class="example">
<h3>Providing a short description for a complex graphic</h3>
<p>This example shows how to use the <code class="att">aria-labelledby</code> attribute to provide a short text description for a read-only complex graphic of an star rating pattern; the graphic is composed of several image elements. The text alternative for the graphic is the label, visible on the page beneath the star pattern.</p>
<pre xml:space="preserve"><div role="img" aria-labelledby="star_id">
<img src="fullstar.png" alt=""/>
<img src="fullstar.png" alt=""/>
<img src="fullstar.png" alt=""/>
<img src="fullstar.png" alt=""/>
<img src="emptystar.png" alt=""/>
</div>
<div id="star_id">4 of 5</div></pre>
<p class="working-example">Working example: <a href="../../working-examples/aria-labelledby-description-complex-graphic/">Providing a short description for a complex graphic</a>.
</p>
</section>
</section><section id="tests"><h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
<ol>
<li>Examine each element where the <code class="att">aria-labelledby</code> attribute is present and the element does not support the <code class="att">alt</code> attribute.</li>
<li>Check whether the value of the <code class="att">aria-labelledby</code> attribute is the id of an element on the web page.</li>
<li>Determine that the text of the element identified by the <code class="att">aria-labelledby</code> attribute accurately labels the element, provides a description of its purpose, or provides equivalent information.</li>
</ol>
</section>
<section class="results"><h3>Expected Results</h3>
<ul>
<li>#2 and #3 are true.</li>
</ul>
</section>
</section><section id="related"><h2>Related Techniques</h2><ul>
<li><a href="../html/H37">H37</a></li>
<li><a href="../failures/F65">F65</a></li>
</ul></section><section id="resources"><h2>Resources</h2>
<ul>
<li>
<a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</a>
</li>
<li>
<a href="https://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">HTML to Platform Accessibility APIs Implementation Guide: Accessible Name and Description Calculation</a>
</li>
<li>
<a href="https://www.w3.org/TR/accname/">Accessible Name and Description Computation</a>
</li>
</ul>
</section></body></html>