Skip to content

Commit f6095ea

Browse files
russmaxdesignrussmaxdesign
authored
Adjust groups
1 parent b008576 commit f6095ea

7 files changed

Lines changed: 165 additions & 17 deletions

‎fieldset-checkbox-group-presentation.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>Checkbox group with role="presentation"</title>
5+
<title>Checkbox group with list and role="presentation"</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<link rel="shortcut icon" href="favicon.ico">
88
<link href="assets/css/examples.css" rel="stylesheet">
99
</head>
1010
<body>
11-
<h1>Checkbox group with <code>role="presentation"</code></h1>
11+
<h1>Checkbox group with list and <code>role="presentation"</code></h1>
1212
<p>&larr; <a href="index.html">Return to main list</a></p>
1313
<p>This is a test case designed to determine how the <a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-fieldset-element" target="_blank"><code>&lt;fieldset&gt;</code></a> and <a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-legend-element" target="_blank"><code>&lt;legend&gt;</code></a> elements are announced in relation to a checkbox group by various screen readers. In this test, the checkbox group is presented inside a list, which has been set with <a href="https://www.w3.org/TR/wai-aria/#presentation" target="_blank"><code>role="presentation"</code></a>.</p>
1414
<h2>Example</h2>

‎fieldset-checkbox-group-role-group.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Checkbox group with role="group"</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="shortcut icon" href="favicon.ico">
8+
<link href="assets/css/examples.css" rel="stylesheet">
9+
</head>
10+
<body>
11+
<h1>Checkbox group with <code>role="group"</code></h1>
12+
<p>&larr; <a href="index.html">Return to main list</a></p>
13+
<p>This is a test case designed to determine how the <a href="https://www.w3.org/TR/wai-aria-1.1/#group" target="_blank"><code>group</code></a> role is announced in relation to a checkbox group by various screen readers.</p>
14+
<h2>Example</h2>
15+
<form action="#">
16+
<div role="group" aria-labelledby="group-heading">
17+
<h3 id="group-heading">Favourite animal</h3>
18+
<div class="form-group">
19+
<input type="checkbox" id="dog">
20+
<label for="dog">Dog</label>
21+
</div>
22+
<div class="form-group">
23+
<input type="checkbox" id="cat">
24+
<label for="cat">Cat</label>
25+
</div>
26+
<div class="form-group">
27+
<input type="checkbox" id="rabbit">
28+
<label for="rabbit">Rabbit</label>
29+
</div>
30+
</div>
31+
</form>
32+
<h2>Code</h2>
33+
<!-- start code -->
34+
<pre><code>&lt;div role="group" aria-labelledby="group-heading"&gt;
35+
&lt;h3 id="group-heading"&gt;Favourite animal&lt;/h3&gt;
36+
&lt;div class="form-group"&gt;
37+
&lt;input type="checkbox" id="dog"&gt;
38+
&lt;label for="dog"&gt;Dog&lt;/label&gt;
39+
&lt;/div&gt;
40+
&lt;div class="form-group"&gt;
41+
&lt;input type="checkbox" id="cat"&gt;
42+
&lt;label for="cat"&gt;Cat&lt;/label&gt;
43+
&lt;/div&gt;
44+
&lt;div class="form-group"&gt;
45+
&lt;input type="checkbox" id="rabbit"&gt;
46+
&lt;label for="rabbit"&gt;Rabbit&lt;/label&gt;
47+
&lt;/div&gt;
48+
&lt;/div&gt;</code></pre>
49+
<!-- end code -->
50+
<h2>Assistive technologies</h2>
51+
<div class="note">
52+
<h3>VoiceOver</h3>
53+
<ul class="browser-list">
54+
<li><b>Chrome:</b> Dog. Unticked. Tick box. <span class="green">Favourite animal</span>. <span class="green">Group</span>.</li>
55+
<li><b>Firefox:</b> Dog. Unticked. Checkbox. <span class="green">Favourite animal</span>. <span class="green">Group</span>.</li>
56+
<li><b>Safari:</b> Dog. Unticked. Tick box. <span class="red">Favourite animal</span>. <span class="green">Favourite animal</span>. <span class="green">Group</span>. <span class="red">[Legend announced twice]</span></li>
57+
</ul>
58+
</div>
59+
<div class="note">
60+
<h3>NVDA</h3>
61+
<ul class="browser-list">
62+
<li><b>Chrome:</b> <span class="green">Favourite animal</span>. <span class="green">Grouping</span>. Dog. Checkbox. Not checked.</li>
63+
<li><b>Firefox:</b> <span class="green">Favourite animal</span>. <span class="green">Grouping</span>. Dog. Checkbox. Not checked.</li>
64+
<li><b>Edge:</b> <span class="green">Favourite animal</span>. <span class="green">Grouping</span>. Dog. Checkbox. Not checked.</li>
65+
</ul>
66+
</div>
67+
<div class="note">
68+
<h3>JAWS</h3>
69+
<ul class="browser-list">
70+
<li><b>Chrome:</b> <span class="green">Favourite animal</span>. <span class="green">Group</span>. Dog. Checkbox. Not checked.</li>
71+
<li><b>Firefox:</b> <span class="green">Favourite animal</span>. Dog. Checkbox. Not checked.</li>
72+
<li><b>Edge:</b> <span class="green">Favourite animal</span>. <span class="green">Group</span>. Dog. Checkbox. Not checked.</li>
73+
</ul>
74+
</div>
75+
<p>&larr; <a href="index.html">Return to main list</a></p>
76+
</body>
77+
</html>

‎fieldset-checkbox-group.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>Checkbox group</title>
5+
<title>Checkbox group with list</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<link rel="shortcut icon" href="favicon.ico">
88
<link href="assets/css/examples.css" rel="stylesheet">
99
</head>
1010
<body>
11-
<h1>Checkbox group</h1>
11+
<h1>Checkbox group with list</h1>
1212
<p>&larr; <a href="index.html">Return to main list</a></p>
1313
<p>This is a test case designed to determine how the <a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-fieldset-element" target="_blank"><code>&lt;fieldset&gt;</code></a> and <a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-legend-element" target="_blank"><code>&lt;legend&gt;</code></a> elements are announced in relation to a checkbox group by various screen readers.</p>
1414
<h2>Example</h2>
@@ -55,8 +55,8 @@ <h2>Assistive technologies</h2>
5555
<div class="note">
5656
<h3>VoiceOver</h3>
5757
<ul class="browser-list">
58-
<li><b>Chrome:</b> Dog. Unticked. Tick box. List 3 items. <span class="red">[Legend not announced]</span></li>
59-
<li><b>Firefox:</b> Dog. Unticked. Checkbox. List 3 items. <span class="red">[Legend not announced]</span></li>
58+
<li><b>Chrome:</b> Dog. Unticked. Tick box. List 3 items. <span class="red">[Role and legend not announced]</span></li>
59+
<li><b>Firefox:</b> Dog. Unticked. Checkbox. List 3 items. <span class="red">[Role and legend not announced]</span></li>
6060
<li><b>Safari:</b> Dog. Unticked. Tick box. <span class="red">Favourite animal</span>. <span class="green">Favourite animal</span>. <span class="green">Group</span>. <span class="red">[Legend announced twice]</span></li>
6161
</ul>
6262
</div>

‎fieldset-radio-group-presentation.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>Radio group with role="presentation"</title>
5+
<title>Radio group with list and role="presentation"</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<link rel="shortcut icon" href="favicon.ico">
88
<link href="assets/css/examples.css" rel="stylesheet">
99
</head>
1010
<body>
11-
<h1>Radio group with <code>role="presentation"</code></h1>
11+
<h1>Radio group with list and <code>role="presentation"</code></h1>
1212
<p>&larr; <a href="index.html">Return to main list</a></p>
1313
<p>This is a test case designed to determine how the <a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-fieldset-element" target="_blank"><code>&lt;fieldset&gt;</code></a> and <a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-legend-element" target="_blank"><code>&lt;legend&gt;</code></a> elements are announced in relation to a radio group by various screen readers. In this test, the radio group is presented inside a list, which has been set with <a href="https://www.w3.org/TR/wai-aria/#presentation" target="_blank"><code>role="presentation"</code></a>.
1414
<h2>Example</h2>

‎fieldset-radio-group-role-radiogroup.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Radio group using role="radiogroup"</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="shortcut icon" href="favicon.ico">
8+
<link href="assets/css/examples.css" rel="stylesheet">
9+
</head>
10+
<body>
11+
<h1>Radio group using <code>role="radiogroup"</code></h1>
12+
<p>&larr; <a href="index.html">Return to main list</a></p>
13+
<p>This is a test case designed to determine how the <a href="https://www.w3.org/TR/wai-aria-1.1/#radiogroup" target="_blank"><code>radiogroup</code></a> role is announced in relation to a radio group by various screen readers.</p>
14+
<h2>Example</h2>
15+
<form action="#">
16+
<div role="radiogroup" aria-labelledby="group-heading">
17+
<h3 id="group-heading">Do you like boats?</h3>
18+
<div class="form-group">
19+
<input type="radio" id="boats-y" name="boats">
20+
<label for="boats-y">Yes</label>
21+
</div>
22+
<div class="form-group">
23+
<input type="radio" id="boats-n" name="boats">
24+
<label for="boats-n">No</label>
25+
</div>
26+
</div>
27+
</form>
28+
<h2>Code</h2>
29+
<!-- start code -->
30+
<pre><code>&lt;div role="radiogroup" aria-labelledby="group-heading&gt;
31+
&lt;h3 id="group-heading"&gt;Do you like boats?&lt;/h3&gt;
32+
&lt;div&gt;
33+
&lt;input type="radio" id="boats-y" name="boats"&gt;
34+
&lt;label for="boats-y"&gt;Yes&lt;/label&gt;
35+
&lt;/div&gt;
36+
&lt;div&gt;
37+
&lt;input type="radio" id="boats-n" name="boats"&gt;
38+
&lt;label for="boats-n"&gt;No&lt;/label&gt;
39+
&lt;/div&gt;
40+
&lt;/div&gt;</code></pre>
41+
<!-- end code -->
42+
<h2>Assistive technologies</h2>
43+
<div class="note">
44+
<h3>VoiceOver</h3>
45+
<ul class="browser-list">
46+
<li><b>Chrome:</b> Yes. Radio button. 1 of 2. <span class="green">Do you like boats?</span> <span class="green">Group</span>.</li>
47+
<li><b>Firefox:</b> Yes. Radio button. 1 of 2. <span class="green">Do you like boats?</span> <span class="green">Group</span>.</li>
48+
<li><b>Safari:</b> Yes. Radio button. 1 of 2. <span class="red">Do you like boats?</span> <span class="green">Do you like boats?</span> <span class="green">Group</span>. <span class="red">[Legend announced twice]</span></li>
49+
</ul>
50+
</div>
51+
<div class="note">
52+
<h3>NVDA</h3>
53+
<ul class="browser-list">
54+
<li><b>Chrome:</b> <span class="green">Do you like boats?</span> <span class="green">Grouping</span>. Yes. Radio button. Not checked. 1 of 2.</li>
55+
<li><b>Firefox:</b> <span class="green">Do you like boats?</span> <span class="green">Grouping</span>. Yes. Radio button. Not checked. 1 of 2.</li>
56+
<li><b>Edge:</b> <span class="green">Do you like boats?</span> <span class="green">Grouping</span>. Yes. Radio button. Not checked. 1 of 2.</li>
57+
</ul>
58+
</div>
59+
<div class="note">
60+
<h3>JAWS</h3>
61+
<ul class="browser-list">
62+
<li><b>Chrome:</b> <span class="green">Do you like boats?</span> <span class="green">Group</span>. Yes. Radio button. Not checked. 1 of 2.</li>
63+
<li><b>Firefox:</b> To change the selection use the up or down arrow. <span class="green">Do you like boats?</span> Yes. Radio button. Not checked. Yes. Radio button. Not checked. 1 of 2.</li>
64+
<li><b>Edge:</b> <span class="green">Do you like boats?</span> <span class="green">Group</span>. Yes. Radio button. Not checked. 1 of 2.</li>
65+
</ul>
66+
</div>
67+
<p>&larr; <a href="index.html">Return to main list</a></p>
68+
</body>
69+
</html>

‎fieldset-radio-group.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>Radio group</title>
5+
<title>Radio group with list</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<link rel="shortcut icon" href="favicon.ico">
88
<link href="assets/css/examples.css" rel="stylesheet">
99
</head>
1010
<body>
11-
<h1>Radio group</h1>
11+
<h1>Radio group with list</h1>
1212
<p>&larr; <a href="index.html">Return to main list</a></p>
1313
<p>This is a test case designed to determine how the <a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-fieldset-element" target="_blank"><code>&lt;fieldset&gt;</code></a> and <a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-legend-element" target="_blank"><code>&lt;legend&gt;</code></a> elements are announced in relation to a radio group by various screen readers.</p>
1414
<h2>Example</h2>
@@ -47,8 +47,8 @@ <h2>Assistive technologies</h2>
4747
<div class="note">
4848
<h3>VoiceOver</h3>
4949
<ul class="browser-list">
50-
<li><b>Chrome:</b> Yes. Radio button. 1 of 2. 2 items. <span class="red">[Legend not announced]</span></li>
51-
<li><b>Firefox:</b> Yes. Radio button. 1 of 2. 2 item. <span class="red">[Legend not announced]</span></li>
50+
<li><b>Chrome:</b> Yes. Radio button. 1 of 2. 2 items. <span class="red">[Role and legend not announced]</span></li>
51+
<li><b>Firefox:</b> Yes. Radio button. 1 of 2. 2 item. <span class="red">[Role and legend not announced]</span></li>
5252
<li><b>Safari:</b> Yes. Radio button. 1 of 2. <span class="red">Do you like boats?</span> <span class="green">Do you like boats?</span> <span class="green">Group</span>. <span class="red">[Legend announced twice]</span></li>
5353
</ul>
5454
</div>

‎index.html‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ <h2>Page content sections</h2>
2828
<li>&darr; <a href="#invalid"><code>aria-invalid</code> tests</a></li>
2929
<li>&darr; <a href="#attributes">Form-based attribute tests</a></li>
3030
<li>&darr; <a href="#disabled"><code>disabled</code> attribute tests</a></li>
31-
<li>&darr; <a href="#readonly"><code>readonly</code> and <code>aria-readonly</code> attribute tests</a></li>
31+
<li>&darr; <a href="#readonly"><code>readonly</code> and <code>aria-readonly</code> attribute tests</a> <span class="badge">New tests added: 21/2/2022</span></li>
3232
<li>&darr; <a href="#landmark">ARIA landmark tests</a> <span class="badge">New tests added: 18/2/2022</span></li>
3333
<li>&darr; <a href="#header"><code>&lt;header&gt;</code> scope tests</a></li>
3434
<li>&darr; <a href="#rotor">VoiceOver Rotor tests</a></li>
@@ -84,15 +84,17 @@ <h2><code>&lt;fieldset&gt;</code> tests</h2>
8484
</ul>
8585
<h3>Checkboxes</h3>
8686
<ul class="main-list">
87-
<li>&rarr; <a href="fieldset-checkbox-group.html">Checkbox group</a></li>
88-
<li>&rarr; <a href="fieldset-checkbox-group-presentation.html">Checkbox group with <code>role="presentation"</code></a></li>
87+
<li>&rarr; <a href="fieldset-checkbox-group.html">Checkbox group with list</a></li>
88+
<li>&rarr; <a href="fieldset-checkbox-group-presentation.html">Checkbox group with list and <code>role="presentation"</code></a></li>
8989
<li>&rarr; <a href="fieldset-checkbox-group-without-list.html">Checkbox group without a list</a></li>
90+
<li>&rarr; <a href="fieldset-checkbox-group-role-group.html">Checkbox group using <code>role="group"</code></a></li>
9091
</ul>
9192
<h3>Radio buttons</h3>
9293
<ul class="main-list">
93-
<li>&rarr; <a href="fieldset-radio-group.html">Radio group</a></li>
94-
<li>&rarr; <a href="fieldset-radio-group-presentation.html">Radio group with <code>role="presentation"</code></a></li>
94+
<li>&rarr; <a href="fieldset-radio-group.html">Radio group with list</a></li>
95+
<li>&rarr; <a href="fieldset-radio-group-presentation.html">Radio group with list and <code>role="presentation"</code></a></li>
9596
<li>&rarr; <a href="fieldset-radio-group-without-list.html">Radio group without a list</a></li>
97+
<li>&rarr; <a href="fieldset-radio-group-role-radiogroup.html">Radio group using <code>role="radiogroup"</code></a></li>
9698
</ul>
9799
<p><a class="button-secondary small" href="support-fieldsets.html">Fieldset support chart</a></p>
98100
</section>

0 commit comments

Comments
 (0)