-
Notifications
You must be signed in to change notification settings - Fork 34
/
index.html
182 lines (156 loc) · 7.27 KB
/
index.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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>
Switch Component: Radio Buttons
</title>
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script>
// remove no-js and add 'js' to the HTML
document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
</script>
<link rel="stylesheet" href="../assets/css/--demo-only--.css">
<link rel="stylesheet" href="../assets/css/--shared--.css">
<link rel="stylesheet" href="../assets/css/switch--radio-buttons.css">
</head>
<body>
<div class="demo-wrap">
<header class="demo-wrap__header">
<p class="demo-wrap__header__title">
Accessible Styled Form Controls
</p>
<nav>
<a href="https://github.com/scottaohara/a11y_styled_form_controls">See source on GitHub</a>,
<a href="/a11y_styled_form_controls">Index of styled form controls</a>
</nav>
</header>
<main aria-label="content">
<article class="demo">
<header>
<h1>Switch Component: Radio Buttons</h1>
<p>Published: <time>July 26, 2018</time></p>
<p>Last updated: <time>August 21, 2018</time></p>
<p>
Pattern to create a two option radio button group,
visually styled to resemble a <code>switch</code> component.
</p>
</header>
<h2>
Pattern Demo
</h2>
<fieldset class="radio-switch radio-switch--hide-legend">
<legend>
Away message
</legend>
<div class="radio-switch__inner">
<input type="radio" name="ex" id="on1" checked="">
<label for="on1">
On
</label>
<input type="radio" name="ex" id="off1">
<label for="off1">
Off
</label>
</div>
</fieldset>
<fieldset class="radio-switch">
<legend>
Signature
</legend>
<div class="radio-switch__inner">
<input type="radio" name="ex2" id="on2" checked="">
<label for="on2">
On
</label>
<input type="radio" name="ex2" id="off2">
<label for="off2">
Off
</label>
</div>
</fieldset>
<details style="margin-top: 1em;">
<summary>Visual design note</summary>
<div>
<p>
The inclusion of two labels makes this switch pattern unique from other single label switch components. The design tends to fall apart a bit if it can't fully fit on a narrow screen, so that should be taken into consideration if implementing this in your own projects.
</p>
<p>
Ideally there would be a visible overarching label (a <code>legend</code>) to provide better context as to what the switch was for.
</p>
<p>
Use an appropriate heading element (<code>h1</code> to <code>h6</code>) within a <code>legend</code> to surface this group as part of the document outline.
</p>
</div>
</details>
<section class="demo-details">
<h3>
Pattern Details
</h3>
<details open>
<summary>Pattern Markup</summary>
<pre><code class="language-html"><fieldset class="radio-switch">
<legend>
Something
</legend>
<div class="radio-switch__inner">
<input type="radio" name="lol" id="public">
<label for="public">
On
</label>
<input type="radio" name="lol" id="private">
<label for="private">
Off
</label>
</div>
</fieldset></code></pre>
</details>
<p>
The markup for this component relies on a standard radio button group setup. A <code>fieldset</code> surrounds the radio buttons to provide context as to what these two options refer to. Each <code>input</code> is placed before its <code>label</code> so sibling selectors can be used to modify the state of the switch UI, based on whether the <code>input</code> is <code>:checked</code> or not.
</p>
<h4>Affects on Screen Reader Announcements?</h4>
<p>
Being a custom styled radio button group, there's not much for screen readers to get tripped up on here. When testing with standard keyboard tabbing, and screen reader virtual cursor, there were no abnormal announcements from screen readers.
</p>
<p>
It should be noted that using standard visually hidden CSS to hide the native radio buttons off screen, or as a single pixel in the document, will mean that certain screen reader users might be unable to locate the radio button. For instance, those searching by touch, or using a mouse while a screen reader announces what is being hovered. To mitigate this, the radio buttons have been positioned on top of their styled <code>label</code>s (in this case the on and off visual labels). The radio buttons are still styled to be visually hidden, but with a very low opacity level. Note that NVDA does not announce the radio button role when hovered by mouse, regardless of it being styled or not, unless default NVDA settings are changed.
</p>
<p>
One bit of concern for the visual switch treatment is that there is implied UX that accompanies a switch. For example, a visual switch could be an actual <code>role="switch"</code>, a checkbox, or a toggle button, all depending on the context in which it is used. Each of these implementations would have a consistent single label, and the state of the component is what changes. This particular pattern doesn't adhere to those setups.
</p>
<h4>Usage note:</h4>
<p>
This type of a switch UI is heavily reliant on the idea that there are two visible labels that represent the opposing ends of the switch. Being that the switch has two labels, it would be expected that each label could receive mouse click or a tap to change the state of the switch.
</p>
<p>
Ideally the switch itself would also allow for mouse click or finger tap to freely toggle the state as well, as that's an expected interaction for a switch UI.
</p>
<p>
For single label switches, typically a user can focus the switch and toggle it with either <kbd>Space</kbd> or <kbd>Enter</kbd> keys. With a radio button switch, arrow keys would be used instead, and <kbd>Space</kbd> or <kbd>Enter</kbd> keys would be largely irrelevant, beyond a screen reader first focusing a radio button in this component, and using such keys to enter forms mode, if their screen reader hadn't entered forms mode already.
</p>
<p>
<b>Note:</b> due to <code>:focus-within</code> not having full support for older browsers, a polyfill has been added to this demo.
</p>
</section> <!-- /.demo-details -->
<h3>Continue reading</h3>
<p>
For additional information about radio button switch components, I suggest reviewing <a href="https://www.sarasoueidan.com/blog/toggle-switch-design/">On Designing and Building Toggle Switches, by Sara Soueidan</a>.
</p>
</article>
</main>
</div> <!-- /.demo-wrap -->
<script src="../assets/js/global--focus-within.js"></script>
<script>
var highlighterCSS = function () {
var head = document.head;
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '../assets/vendor/prism.css';
head.appendChild(link);
}
highlighterCSS();
</script>
<script src="../assets/vendor/prism.js"></script>
</body>
</html>