robmc.github.io/aria_checkboxes.html at master · robmc/robmc.github.io · GitHub

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
64
65
66
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>ARIA Checkbox Example</title>

		<link rel="stylesheet" type="text/css" href="/stylesheets/aria_checkboxes_stylesheet.css">
		<script src="/javascripts/aria_checkboxes_javascript.js"></script>

	</head>

	<body>
		<h1>Standard HTML and ARIA Checkbox examples</h1>
		<p>The following are examples of standard checkboxes built with HTML as well as simulated checkboxes built with ARIA</p>
		<p>Concepts included in the ARIA checkboxes include:</p>
		<ul>
			<li>The <code>tabindex="0"</code> attribute has been added as the checkboxes are built with a <code>&lt;span&gt;</code> elements which do not receive keyboard focus by default.</li>
				<ul>
					<li><strong>Note:</strong> Positive <code>tabindex</code> attributes should not be used as it makes it difficult to ensure a consistent focus order as page content is changed and can cause issues for users navigating using a keyboard. It is recommended to only use a value of <code>0</code> for tabindex attributes and to ensure content is ordered logically in the DOM.</li>
				</ul>
			<li>Once the control rececives focus, it must still provide a role to ensure users can identify its intended function. The ARIA <a href="https://www.w3.org/TR/wai-aria-1.1/#checkbox">checkbox</a> role has been added to the <code>&lt;span&gt;</code> to convey the element's role.</li>
			<li>To convey an accessible name for the simulated checkboxes, the <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby">aria-labelledby</a> property has been applied to them and references the ID of the text beside them which is visually labelling them.</li>
			<li>Checkboxes can exist in both a checked and unchecked state. The <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-checked">aria-checked</a> state has been applied to the checkboxes to indicate their state. When interacting with the controls, their programmatic state is updated via this value.</li>
			<li>In addition to the programmatic state, the visual state of the simulated controls is updated as well. These are rendered via images (often done to ensure the same visual presentation across browsers) and the source of the images are updated when activating the simulated checkboxes to reflect their state visually.</li>
			<li>The JavaScript <code>onClick</code> event has been applied to the simulated checkboxes which supports mouse interaction. This event supports keyboard input via the Enter key on controls such as native HTML buttons and links however is not supported on simulated controls. For this reason, the JavaScript <code>onKeyUp</code> event has been applied to the simulated controls as well to support keyboard input. This listens for Event Code 32 as that is the code for a Space Bar press, which is the expected behavior of native HTML checkboxes.</li>
		</ul>
		<form>
			<fieldset>
				<legend>Standard HTML Checkboxes</legend>
				<p>Standard checkbox elements using HTML &lt;input&gt; and &lt;label&gt; tags:</p>
				<input type="checkbox" id="option1">
				<label for="option1">Option 1</label><br />
				<input type="checkbox" id="option2">
				<label for="option2">Option 2</label><br />
				<input type="checkbox" id="option3">
				<label for="option3">Option 3</label><br />
				<input type="checkbox" id="option4">
				<label for="option4">Option 4</label>
			</fieldset>
			<fieldset>
				<legend>ARIA Checkboxes</legend>
				<p>Checkboxes using ARIA and JavaScript:</p>
				<!-- The "aria-labelledby" attribute is required because label elements can only be applied to form elements. -->
				<!-- Span elements are being used instead of default HTML checkbox inputs so aria-labelledby is needed for association. -->
				<span role="checkbox"  tabindex="0" aria-checked="false" aria-labelledby="labelA" onclick="toggleState(this);" onkeyup="ARIA_Checkbox_Key(event);">
					<img src="/images/unchecked.png" alt="" role="presentation">
				</span>
				<span id="labelA">Option A</span>
				<br />
				<span role="checkbox"  tabindex="0" aria-checked="false" aria-labelledby="labelB" onclick="toggleState(this);" onkeyup="ARIA_Checkbox_Key(event);">
					<img src="/images/unchecked.png" alt="" role="presentation">
				</span>
				<span id="labelB">Option B</span>
				<br />
				<span role="checkbox"  tabindex="0" aria-checked="false" aria-labelledby="labelC" onclick="toggleState(this);" onkeyup="ARIA_Checkbox_Key(event);">
					<img src="/images/unchecked.png" alt="" role="presentation" id="imageC">
				</span>
				<span id="labelC">Option C</span>
				<br />
				<span role="checkbox"  tabindex="0" aria-checked="false" aria-labelledby="labelD" id="optionD" onclick="toggleState(this);" onkeyup="ARIA_Checkbox_Key(event);">
					<img src="/images/unchecked.png" alt="" role="presentation">
				</span>
				<span id="labelD">Option D</span>
			</fieldset>
		</form>
	</body>
</html>