-
Notifications
You must be signed in to change notification settings - Fork 21
/
Copy pathinput-help-text-wrapped-label.html
62 lines (62 loc) · 2.94 KB
/
input-help-text-wrapped-label.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>input with help text wrapped inside label</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="favicon.ico">
<link href="assets/css/examples.css" rel="stylesheet">
</head>
<body>
<h1><code><input></code> with help text wrapped inside <code><label></code></h1>
<p>← <a href="index.html">Return to main list</a></p>
<p>This is a test case designed to determine how help information, associated with an <a href="https://html.spec.whatwg.org/multipage/input.html#the-input-element" target="_blank"><code><input></code></a> is announced by various screen readers.</p>
<p>In this case, the <code><label></code> is wrapped around the content, form control and help information. For this reason, the help information is part of the label content and should be announced as part of the accessible name.</p>
<h2>Example</h2>
<form action="#">
<div class="form-group">
<label for="name">
<span class="label">Name</span>
<span class="help-text">Make sure to include full name</span>
<input class="input" type="text" id="name">
</label>
</div>
</form>
<h2>Code</h2>
<!-- start code -->
<pre><code><div class="form-group">
<label for="name">
<span class="label">Name</span>
<span class="help-text">Make sure to include full name</span>
<input class="input" type="text" id="name">
</label>
</div></code></pre>
<!-- end code -->
<h2>Assistive technologies</h2>
<div class="note">
<h3>VoiceOver</h3>
<ul class="browser-list">
<li><b>Chrome:</b> Name. <span class="green">Make sure to include full name</span>. Edit text.</li>
<li><b>Firefox:</b> Name. <span class="green">Make sure to include full name</span>. Edit text.</li>
<li><b>Safari:</b> Name. And one more item. Edit text. <span class="red">[Additional content not announced]</span></li>
</ul>
</div>
<div class="note">
<h3>NVDA</h3>
<ul class="browser-list">
<li><b>Chrome:</b> Name. <span class="green">Make sure to include full name</span>. Edit. Blank.</li>
<li><b>Firefox:</b> Name. <span class="green">Make sure to include full name</span>. Edit. Has autocomplete. Blank.</li>
<li><b>Edge:</b> Name. <span class="green">Make sure to include full name</span>. Edit. Blank.</li>
</ul>
</div>
<div class="note">
<h3>JAWS</h3>
<ul class="browser-list">
<li><b>Chrome:</b> Name. <span class="green">Make sure to include full name</span>. Edit. Type in text.</li>
<li><b>Firefox:</b> Name. <span class="green">Make sure to include full name</span>. Edit. Type in text.</li>
<li><b>Edge:</b> Name. <span class="green">Make sure to include full name</span>. Edit. Type in text.</li>
</ul>
</div>
<p>← <a href="index.html">Return to main list</a></p>
</body>
</html>