Skip to content

Commit 2477108

Browse files
yatilpatrickhlaukehiddekfranqueirombgower
authored
Technique ARIA14: Replacing “invisible label” with “accessible name” (#4482)
Trying to be clear that aria-label sets the accessible name, also clarified some text. This technique could probably do with more examples of screen reader and voice input interactions, I’m not sure if readers understand what the impact really is and why it is important. I also modernised the language from “lightbox” to dialog, but I left the example mostly as is for now. It would be good to update it to a proper `<dialog>` example. My apologies for automatically re-indenting the file, but it is so difficult to work with these files otherwise. [Diff view of changes](https://services.w3.org/htmldiff?doc1=https%3A%2F%2Fwww.w3.org%2FWAI%2FWCAG22%2FTechniques%2Faria%2FARIA14&doc2=https%3A%2F%2Fdeploy-preview-4482--wcag2.netlify.app%2Ftechniques%2Faria%2Faria14) [Preview of Technique ARIA14](https://deploy-preview-4482--wcag2.netlify.app/techniques/aria/aria14) from this PR, Using aria-label to provide an accessible name where a visible label cannot be used --------- Co-authored-by: Patrick H. Lauke <[email protected]> Co-authored-by: Hidde de Vries <[email protected]> Co-authored-by: Kenneth G. Franqueiro <[email protected]> Co-authored-by: Mike Gower <[email protected]> Co-authored-by: Mike Gower <[email protected]>
1 parent bcd762d commit 2477108

File tree

3 files changed

+134
-86
lines changed

3 files changed

+134
-86
lines changed

‎techniques/aria/ARIA14.html‎

Lines changed: 83 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,96 @@
1-
<!DOCTYPE html><html lang="en"><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/editors.css" class="remove"></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>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Using aria-label to provide an accessible name where a visible label cannot be used</title>
5+
<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove">
6+
</head>
7+
8+
<body>
9+
<h1>Using aria-label to provide an accessible name where a visible label cannot be used</h1>
10+
<section class="meta">
11+
<p class="id">ID: ARIA14</p>
12+
<p class="technology">Technology: aria</p>
13+
<p class="type">Type: Technique</p>
14+
</section>
15+
<section id="applicability">
16+
<h2>When to Use</h2>
217
<p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>. </p>
3-
</section><section id="description"><h2>Description</h2>
4-
<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 <code>div</code>s (light boxes) to indicate the control for closing the div.
5-
</p>
6-
<p>In some situations, elements can be given the attribute <code>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>
18+
</section>
19+
<section id="description">
20+
<h2>Description</h2>
21+
<p>For sighted users, the context and visual appearance of an element can provide sufficient cues to determine the purpose. An example is the “&times;” often used in the top-right corner of dialogs to indicate the control for closing the dialog. While it might be visually clear that the button with the “&times;” symbol closes the dialog, users with assistive technologies rely on accessible names that clearly communicate the purpose of components, in this case “Close”.
22+
</p>
23+
<p>When no clear visible text label is available due to design decisions, the <a href="https://www.w3.org/TR/accname-1.2/#dfn-accessible-name">accessible name</a> can be set by using the <code>aria-label</code> attribute instead, provided that the element has an implicit or explicit <a href="https://www.w3.org/TR/wai-aria-1.2/#namefromauthor">role that supports naming</a>.</p>
24+
25+
<p>The <code>aria-label</code> attribute can also be used to provide an accessible name for custom controls that are not <a href="https://html.spec.whatwg.org/multipage/forms.html#category-label">labelable elements</a>, and cannot therefore use a <code>&lt;label&gt;</code> element with the <code>for</code> attribute.</p>
726

8-
<p>In other situations, elements can be given the attribute <code>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>div</code> set to <code>contentEditable</code> is used instead of native form elements such as <code>input type="text"</code> or <code>textarea</code> in order to provide a richer text editing experience.</p>
27+
<p>For instance, <code>aria-label</code> or <code>aria-labelledby</code> are the most suitable way to provide an accessible name when a <code>&lt;div&gt;</code> element is made editable using the <code>contentEditable</code> attribute, instead of native form elements such as <code>&lt;input type="text"&gt;</code> or <code>&lt;textarea&gt;</code> in order to provide a richer text editing experience.</p>
928

10-
</section><section id="examples"><h2>Examples</h2>
29+
</section>
30+
<section id="examples">
31+
<h2>Examples</h2>
1132
<section class="example">
12-
<h3>A close button in a pop-up box</h3>
13-
14-
<p>On a page, a link displays a pop-up box (a <code>div</code>) with additional information. The 'close' element is implemented as a <code>button</code> containing merely the letter 'X'. The property <code>aria-label="close"</code> is used to provide an accessible name to the <code>button</code>.</p>
15-
<pre xml:space="preserve"><code class="language-html">&lt;div id="box"&gt;
16-
This is a pop-up box.
17-
&lt;button aria-label="Close"&gt;X&lt;/button&gt;
18-
&lt;/div&gt;</code></pre>
19-
<p class="working-example">Working example: <a href="../../working-examples/aria-label-invisible-label-box/">Close button example</a>.
20-
</p>
21-
33+
<h3>A close button in a dialog</h3>
34+
35+
<p>On a page, a button displays a dialog (a <code>&lt;div&gt;</code> element) with additional information. The “close” element is implemented as a <code>&lt;button&gt;</code> containing merely the symbol “&times;”. The property <code>aria-label="close"</code> is used to provide an accessible name to the button.</p>
36+
<pre xml:space="preserve"><code class="language-html">&lt;dialog id=&quot;dialog&quot;&gt;
37+
This is the content of the dialog.
38+
&lt;button aria-label=&quot;Close&quot;&gt;&times;&lt;/button&gt;
39+
&lt;/dialog&gt;</code></pre>
40+
<p class="working-example">Working example: <a href="../../working-examples/aria-label-accessible-name-dialog/">Close button example</a>.
41+
</p>
42+
2243
</section>
23-
<section class="example">
24-
<h3>A phone number with multiple fields</h3>
25-
26-
<pre xml:space="preserve"><code class="language-html">&lt;div role="group" aria-labelledby="groupLabel"&gt;
44+
<section class=" example">
45+
<h3>A phone number with multiple fields</h3>
46+
47+
<pre xml:space="preserve"><code class="language-html">&lt;div role="group" aria-labelledby="groupLabel"&gt;
2748
&lt;span id="groupLabel"&gt;Work Phone&lt;/span&gt;
2849
+&lt;input autocomplete="tel-country-code" type="number" aria-label="country code"&gt;
2950
&lt;input autocomplete="tel-area-code" type="number" aria-label="area code"&gt;
3051
&lt;input autocomplete="tel-local" type="number" aria-label="subscriber number"&gt;
3152
&lt;/div&gt;</code></pre>
32-
53+
3354
</section>
34-
</section><section id="tests"><h2>Tests</h2>
35-
<section class="procedure"><h3>Procedure</h3>
36-
<p>For elements that use <code>aria-label</code>:
37-
</p>
38-
<ol>
39-
<li>Check that the value of the <code>aria-label</code> attribute properly describes the purpose of an element where user input is required
40-
</li>
41-
</ol>
55+
</section>
56+
<section id="tests">
57+
<h2>Tests</h2>
58+
<section class="procedure">
59+
<h3>Procedure</h3>
60+
<p>For elements that use the <code>aria-label</code> attribute:
61+
</p>
62+
<ol>
63+
<li>Check that the value of the <code>aria-label</code> attribute properly describes the purpose of an element where user input is required
64+
</li>
65+
</ol>
4266
</section>
43-
<section class="results"><h3>Expected Results</h3>
44-
<ul>
45-
<li>#1 is true.</li>
46-
</ul>
67+
<section class="results">
68+
<h3>Expected Results</h3>
69+
<ul>
70+
<li>#1 is true.</li>
71+
</ul>
4772
</section>
48-
</section><section id="related"><h2>Related Techniques</h2><ul>
49-
<li><a href="../aria/ARIA6">ARIA6</a></li>
50-
<li><a href="../aria/ARIA16">ARIA16</a></li>
51-
</ul></section><section id="resources"><h2>Resources</h2>
52-
53-
<ul>
54-
<li>
55-
<a href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</a>
56-
</li>
57-
<li>
58-
<a href="https://www.w3.org/TR/html-aam/">HTML Accessibility API Mappings</a>
59-
</li>
60-
</ul>
61-
62-
</section>
63-
</body></html>
73+
</section>
74+
<section id="related">
75+
<h2>Related Techniques</h2>
76+
<ul>
77+
<li><a href="../aria/ARIA6">ARIA6</a></li>
78+
<li><a href="../aria/ARIA16">ARIA16</a></li>
79+
</ul>
80+
</section>
81+
<section id="resources">
82+
<h2>Resources</h2>
83+
84+
<ul>
85+
<li>
86+
<a href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</a>
87+
</li>
88+
<li>
89+
<a href="https://www.w3.org/TR/html-aam/">HTML Accessibility API Mappings</a>
90+
</li>
91+
</ul>
92+
93+
</section>
94+
</body>
95+
96+
</html>

‎working-examples/aria-label-accessible-name-dialog/index.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6+
<title>aria-label Example: close button</title>
7+
8+
<style>
9+
body {
10+
font-family: sans-serif;
11+
}
12+
13+
button {
14+
border: 1px solid #000;
15+
border-radius: 3px;
16+
box-shadow: 3px 3px 4px rgba(0, 0, 0, .3);
17+
18+
&:hover,
19+
&:focus-visible {
20+
outline: 1px solid #000;
21+
box-shadow: 6px 6px 4px rgba(0, 0, 0, .3);
22+
}
23+
}
24+
25+
dialog {
26+
width: 30%;
27+
height: 20%;
28+
padding: 1rem;
29+
border: 2px solid black;
30+
background-color: #ddd;
31+
}
32+
33+
dialog button {
34+
float: right;
35+
}
36+
</style>
37+
38+
</head>
39+
40+
<body>
41+
42+
<p><button type="button" onclick="document.getElementById('dialog').showModal();">Display the dialog</button></p>
43+
44+
<dialog id="dialog">
45+
This is the content of the dialog.
46+
<button aria-label="Close" onclick="document.getElementById('dialog').close();">&times;</button>
47+
</dialog>
48+
49+
</body>
50+
51+
</html>

‎working-examples/aria-label-invisible-label-box/index.html‎

Lines changed: 0 additions & 36 deletions
This file was deleted.

0 commit comments

Comments
 (0)