-
Notifications
You must be signed in to change notification settings - Fork 34
/
index.html
249 lines (215 loc) · 8.4 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
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>
Styled Meter
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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/meter.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>Styled Meter</h1>
<p>Published: <time>July 30, 2018</time></p>
<p>Last updated: <time>November 21, 2018</time></p>
<p>
Cross-browser styling for the HTML meter element.
</p>
</header>
<h2>
Pattern Demo
</h2>
<div class="progress-meter-example">
Test 1<br>
<meter class="meter" low="64" high="80" max="100" value="84"></meter>
</div>
<div class="progress-meter-example">
<label for="meter_2">
Test 2<br>
<meter class="meter" low="0" value="0" high="70" max="100"></meter>
</label>
</div>
<div class="progress-meter-example">
<label for="meter_n3">
Test 3<br>
<meter class="meter" low="10" value="100" high="80" max="100"></meter>
</label>
</div>
<div class="progress-meter-example">
<label>
<meter aria-label="test 4" class="meter" value="20" high="70" max="100"></meter>
</label>
</div>
<section class="demo-details">
<h3>
Pattern Details
</h3>
<details open>
<summary>Pattern Markup</summary>
<pre><code class="language-html"><p>
Test 1<br>
<meter class="meter"
low="64"
high="80"
max="100"
value="84"></meter>
<p></code></pre>
</details>
<p>
The <code>meter</code> element, like the <a href="../progress-bar/index.html"><code>progress</code></a>, is a non-interactive form element that is meant to indicate a current value, within a known range, much like a gauge. For example, a <code>meter</code> would be the semantically appropriate element to indicate the status of a finite storage limit for a DVR, email or web storage limit.
</p>
<p>
The <code>meter</code> element can be styled by use of the following selectors:
</p>
<dl>
<dt><code>meter</code></dt>
<dd>
<p>Styling with the element selector is respected by all browsers without the need for <code>appearance: none;</code>. Though Firefox and Webkit / Edge browsers differ a bit in how styling the element will either affect the "background" of the element, or the visual indicator of the <code>meter</code>'s value.</p>
</dd>
<dt><code>::-moz- and ::-webkit-meter-bar</code></dt>
<dd>
<p>
Firefox uses this selector to style the visual indicator of the <code>meter</code>'s value. Webkit seems to use this to style the "background" of the element.
</p>
</dd>
<dt>
<code>::-webkit-meter-optimum-value</code><br>
<code>:-moz-meter-optimum::-moz-meter-bar</code>
</dt>
<dd>
<p>
Styling for the optimum value of the element.
</p>
</dd>
<dt>
<code>::-webkit-meter-suboptimum-value</code><br>
<code>:-moz-meter-sub-optimum::-moz-meter-bar</code>
</dt>
<dd>
<p>
Styling for a suboptimal value of the element.
</p>
</dd>
<dt>
<code>::-webkit-meter-even-less-good-value</code><br>
<code>:-moz-meter-sub-sub-optimum::-moz-meter-bar</code>
</dt>
<dd>
<p>
Styling for a less than suboptimal value for the element.
</p>
</dd>
</dl>
<h4>Affects on Screen Reader Announcements?</h4>
<p>
The <code>meter</code> element has no support in Internet Explorer, but is supported in Microsoft Edge. The element has different levels of support in other major browsers, and screen readers can vary quite a bit in how they interpret the element, if at all.
</p>
<dl>
<dt>
JAWS 2018 + Edge (latest) and Firefox 63 (nightly)
</dt>
<dd>
<p>
JAWS will completely ignore the existence of <code>meter</code> elements, regardless of if they are styled or not.
</p>
</dd>
<dt>
JAWS 2018 + Chrome (latest)
</dt>
<dd>
<p>
Chrome + JAWS will announce both styled and unstyled <code>meter</code> elements and their current value, with no indication of their low, high, or max values. If a <code>meter</code> is provided an accessible name by <code>aria-label</code> or <code>aria-labelledby</code>, it will be completely ignored by JAWS.
</p>
</dd>
<dt>
NVDA 2018.2.1 + Edge (latest)
</dt>
<dd>
<p>
NVDA will announce a styled <code>meter</code> as <q>progress bar [current value]</q>.
</p>
<p>
NVDA will not announce an accessible name for the <code>meter</code>, so <code>aria-label</code> and <code>aria-labelledby</code> are ignored.
</p>
</dd>
<dt>
NVDA 2018.2.1 + Firefox 63 (nightly)
</dt>
<dd>
<p>
NVDA will announce nothing but the accessible name to <code>meter</code> elements, regardless of if they are styled or not.
</p>
</dd>
<dt>
NVDA 2018.2.1 + Chrome (latest)
</dt>
<dd>
<p>
Chrome + NVDA do not have issues with announcing styled meters unless they are given an accessible name via <code>aria-label</code> or <code>aria-labelledby</code>. Doing so will result in NVDA only announcing the accessible name and none of the <code>meter</code>'s current state.
</p>
</dd>
<dt>
VoiceOver + Safari 11.1.1 & 12.0 on macOS High Sierra
</dt>
<dd>
<p>
VoiceOver will completely ignore a styled <code>meter</code> element unless it has an accessible name set by <code>aria-label</code> or <code>aria-labelledby</code>. But even then, VoiceOver will only announce the accessible name and none of the <code>meter</code>'s current state.
</p>
</dd>
<dt>
VoiceOver + Safari on iOS 11.4 & 12.1
</dt>
<dd>
<p>
VoiceOver will completely ignore the existence of <code>meter</code> elements, regardless of if they are styled or not.
</p>
</dd>
<dt>
TalkBack (Android Accessibility Suite 6.2) + Android Chrome
</dt>
<dd>
<p>
Chrome + TalkBack will completely ignore <code>meter</code> elements without an accessible name provided by <cod>aria-label</cod> or <code>aria-labelledby</code>. However, even when focusing such an instance, TalkBack will announce <q>[accessible name], meter</q> with no further announcements of the current values of the element.
</p>
</dd>
</dl>
<h4>Usage note:</h4>
<p>
As with the <a href="../progress-bar/index.html"><code>progress</code> element</a>, the <code>meter</code> element can be restyled with some browser prefixed selectors, but doing so can have significantly adverse affects on how the elements are interpreted by screen readers. Coupled with the fact that Internet Explorer 11 doesn't support <code>meter</code> at all, and even the unstyled element doesn't have the best screen reader support in the browsers that do render it, it's probably best to not rely on this element alone (or at all).
</p>
</section>
</article> <!-- /.demo -->
</main>
</div> <!-- /.demo-wrap -->
<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>