-
Notifications
You must be signed in to change notification settings - Fork 21
/
Copy pathinput-error-message-wrapped-label.html
62 lines (62 loc) · 3.04 KB
/
input-error-message-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 error message 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 error message 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 an error message, 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 error message 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>
<input class="input" type="text" id="name">
<span class="error-message">Error: Make sure to include full name</span>
</label>
</div>
</form>
<h2>Code</h2>
<!-- start code -->
<pre><code><div class="form-group">
<label for="name">
<span class="label">Name</span>
<input class="input" type="text" id="name">
<span class="error-message">Error: Make sure to include full name</span>
</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">Error: Make sure to include full name</span>. Edit text.</li>
<li><b>Firefox:</b> Name. <span class="green">Error: 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">Error: Make sure to include full name</span>. Edit. Blank.</li>
<li><b>Firefox:</b> Name. Has autocomplete. <span class="green">Error: Make sure to include full name</span>. Edit. Blank.</li>
<li><b>Edge:</b> Name. <span class="green">Error: 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">Error. Colon. Make sure to include full name</span>. Edit. Type in text.</li>
<li><b>Firefox:</b> Name. <span class="green">Error. Colon. Make sure to include full name</span>. Edit. Type in text.</li>
<li><b>Edge:</b> Name. <span class="green">Error. Colon. 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>