-
Notifications
You must be signed in to change notification settings - Fork 285
/
Copy pathARIA6.html
68 lines (60 loc) · 4.92 KB
/
ARIA6.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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using aria-label to provide labels for objects</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using aria-label to provide labels for objects</h1><section class="meta"><p class="id">ID: ARIA6</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>The purpose of this technique is to provide a label for objects that can be read by assistive technology. The <code class="att">aria-label</code> attribute provides the text label for an object, such as a button. When a screen reader encounters the object, the <code class="att">aria-label</code> text is read so that the user will know what it is.</p>
<p>Authors should be aware that <code class="att">aria-label</code> may be disregarded by assistive technologies in situations where <code class="att">aria-labelledby</code> is used for the same object. For more information on the naming hierarchy please consult the <a href="https://www.w3.org/TR/wai-aria/#textalternativecomputation">ARIA specification</a> and the <a href="https://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">accessible name and description calculation</a> in the HTML to Platform Accessibility APIs Implementation Guide. Authors should be aware that use of <code class="att">aria-label</code> will override any native naming such as <code class="att">alt</code> on images or <code class="el">label</code> associated with a form field using the <code class="att">for</code> attribute.</p>
</section><section id="examples"><h2>Examples</h2>
<section class="example">
<h3>Distinguishing navigation landmarks</h3>
<p>The following example shows how <code class="att">aria-label</code> could be used to distinguish two navigation landmarks in a HTML4 and XHTML 1.0 document, where there are more than two of the same type of landmark on the same page, and there is no existing text on the page that can be referenced as the label.</p>
<pre xml:space="preserve"><div role="navigation" aria-label="Primary">
<ul><li>...a list of links here ...</li></ul> </div>
<div role="navigation" aria-label="Secondary">
<ul><li>...a list of links here ...</li> </ul></div></pre>
</section>
<section class="example">
<h3>Identifying region landmarks</h3>
<p>The following example shows how a generic "region" landmark might be added to a weather portlet. There is no existing text on the page that can be referenced as the label, so it is labelled with <code class="att">aria-label</code>.</p>
<pre xml:space="preserve"><div role="region" aria-label="weather portlet">
...
</div></pre>
</section>
<section class="example">
<h3>Providing a label for Math</h3>
<p>Below is an example of a MathML function, using the math role, appropriate label, and MathML rendering:</p>
<pre xml:space="preserve"><div role="math" aria-label="6 divided by 4 equals 1.5">
<math xmlns="https://www.w3.org/1998/Math/MathML">
<mfrac>
<mn>6</mn>
<mn>4</mn>
</mfrac>
<mo>=</mo>
<mn>1.5</mn>
</math>
</div></pre>
</section>
</section><section id="tests"><h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
<p>For each element where a <code class="att">aria-label</code> attribute is present.</p>
<ol>
<li>Examine whether the text description accurately labels the object or provides a description of its purpose or provides equivalent information.</li>
</ol>
</section>
<section class="results"><h3>Expected Results</h3>
<ul>
<li>#1 is true.</li>
</ul>
</section>
</section><section id="related"><h2>Related Techniques</h2><ul>
<li><a href="../aria/ARIA16">ARIA16</a></li>
<li><a href="../html/H44">H44</a></li>
</ul></section><section id="resources"><h2>Resources</h2>
<ul>
<li>
<a href="https://www.w3.org/TR/html-aapi/#html-element-to-accessibility-api-role-mapping-matrix">HTML to Platform Accessibility APIs Implementation Guide: HTML Element to Accessibility API Role Mapping Matrix</a>
</li>
<li>
<a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</a>
</li>
</ul>
</section></body></html>