-
Notifications
You must be signed in to change notification settings - Fork 285
/
Copy pathARIA14.html
63 lines (57 loc) · 4.21 KB
/
ARIA14.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
<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using aria-label to provide an invisible label where a visible label cannot be used</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using aria-label to provide an invisible label where a visible label cannot be used</h1><section class="meta"><p class="id">ID: ARIA14</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>For sighted users, the context and visual appearance of an element can provide sufficient cues to determine the purpose. An example is the 'X' often used in the top right corner of pop-up divs (light boxes) to indicate the control for closing the div.
</p>
<p>In some situations, elements can be given the attribute <code class="att">aria-label</code> to provide an accessible name for situations when there is no visible label due to a chosen design approach or layout but the context and visual appearance of the control make its purpose clear.
</p>
<p>In other situations, elements can be given the attribute <code class="att">aria-label</code> to provide an accessible name when the native HTML labeling element is not supported by the control - for example, when a <code class="el">div</code> set to <code class="att">contentEditable</code> is used instead of native form elements such as input type="text" or <code class="el">textarea</code> in order to provide a richer text editing experience.
</p>
</section><section id="examples"><h2>Examples</h2>
<section class="example">
<h3>A close button (X) in a pop-up box</h3>
<p>On a page, a link displays a pop-up box (a div) with additional information. The 'close' element is implemented as a button containing merely the letter 'x'. The property aria-label="close" is used to provide an accessible name to the button.
</p>
<pre xml:space="preserve"><div id="box">
This is a pop-up box.
<button aria-label="Close" onclick="document.getElementById('box').style.display='none';" class="close-button">X</button>
</div></pre>
<p class="working-example">Working example: <a href="../../working-examples/aria-label-invisible-label-box/">Close button example</a>.
</p>
</section>
<section class="example">
<h3>A phone number with multiple fields</h3>
<pre xml:space="preserve"><div role="group" aria-labelledby="groupLabel">
<span id="groupLabel>Work Phone</span>
+<input type="number" aria-label="country code">
<input type="number" aria-label="area code">
<input type="number" aria-label="subscriber number">
</div></pre>
</section>
</section><section id="tests"><h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
<p>For elements that use <code class="att">aria-label</code>:
</p>
<ol>
<li>Check that the value of the <code class="att">aria-label</code> attribute properly describes the purpose of an element where user input is required
</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/ARIA6">ARIA6</a></li>
<li><a href="../aria/ARIA16">ARIA16</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>
</ul>
</section></body></html>