Skip to content

Commit 2427fc4

Browse files
scottaoharascottaohara
committed
meter and progress bar
1 parent 3b9befc commit 2427fc4

File tree

2 files changed

+137
-61
lines changed

2 files changed

+137
-61
lines changed

‎src/meter/index.html‎

Lines changed: 134 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
<article class="demo">
3535
<header>
3636
<h1>Styled Meter</h1>
37-
<p>Last updated: <time>July 26, 2018</time></p>
37+
<p>Last updated: <time>July 28, 2018</time></p>
3838
<p>
3939
Cross-browser styling for the HTML meter element.
4040
</p>
@@ -46,34 +46,9 @@ <h2>
4646

4747
<div class="progress-meter-example">
4848
Test 1<br>
49-
<meter low="69" high="80" max="100" value="84"></meter>
49+
<meter class="meter" low="64" high="80" max="100" value="84"></meter>
5050
</div>
51-
<div class="progress-meter-example">
52-
<label for="meter_2">
53-
Test 2<br>
54-
<meter low="0" value="0" high="70" max="100"></meter>
55-
</label>
56-
</div>
57-
58-
<div class="progress-meter-example">
59-
<label for="meter_n3">
60-
Test 3<br>
61-
<meter low="10" value="100" high="80" max="100"></meter>
62-
</label>
63-
</div>
64-
65-
<div class="progress-meter-example">
66-
<label>
67-
<meter aria-label="test 4" value="20" high="70" max="100"></meter>
68-
</label>
69-
</div>
70-
71-
<hr>
7251

73-
<div class="progress-meter-example">
74-
Test 1<br>
75-
<meter class="meter" low="69" high="80" max="100" value="84"></meter>
76-
</div>
7752
<div class="progress-meter-example">
7853
<label for="meter_2">
7954
Test 2<br>
@@ -102,38 +77,150 @@ <h3>
10277

10378
<details open>
10479
<summary>Pattern Markup</summary>
105-
<pre><code class="language-html">&lt;
106-
&gt;</code></pre>
80+
<pre><code class="language-html">&lt;p>
81+
Test 1<br>
82+
&lt;meter class="meter"
83+
low="64"
84+
high="80"
85+
max="100"
86+
value="84">&lt;/meter>
87+
&lt;p></code></pre>
10788
</details>
10889

10990
<p>
110-
...
111-
</p>
112-
113-
<h4>Affects on Screen Reader Announcements?</h4>
114-
<p>
115-
macOS Safari + VO will completely ignore a styled meter 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.
116-
</p>
117-
118-
<p>
119-
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.
91+
The <code>meter</code> element can be styled by use of the following selectors:
12092
</p>
12193

122-
<p>
123-
Firefox + NVDA do not announce anything but an accessible name to <code>meter</code> elements, regardless of if they are styled or not.
124-
</p>
94+
<dl>
95+
<dt><code>meter</code></dt>
96+
<dd>
97+
<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>
98+
</dd>
99+
100+
<dt><code>::-moz- and ::-webkit-meter-bar</code></dt>
101+
<dd>
102+
<p>
103+
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.
104+
</p>
105+
</dd>
106+
107+
<dt>
108+
<code>::-webkit-meter-optimum-value</code><br>
109+
<code>:-moz-meter-optimum::-moz-meter-bar</code>
110+
</dt>
111+
<dd>
112+
<p>
113+
Styling for the optimum value of the element.
114+
</p>
115+
</dd>
116+
117+
<dt>
118+
<code>::-webkit-meter-suboptimum-value</code><br>
119+
<code>:-moz-meter-sub-optimum::-moz-meter-bar</code>
120+
</dt>
121+
<dd>
122+
<p>
123+
Styling for a suboptimal value of the element.
124+
</p>
125+
</dd>
126+
127+
<dt>
128+
<code>::-webkit-meter-even-less-good-value</code><br>
129+
<code>:-moz-meter-sub-sub-optimum::-moz-meter-bar</code>
130+
</dt>
131+
<dd>
132+
<p>
133+
Styling for a less than suboptimal value for the element.
134+
</p>
135+
</dd>
136+
137+
</dl>
125138

139+
<h4>Affects on Screen Reader Announcements?</h4>
126140
<p>
127-
Firefox + JAWS 2018 do not announce the presence of <code>meter</code> elements.
141+
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.
128142
</p>
129143

130-
<p>
131-
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.
132-
</p>
144+
<dl>
145+
<dt>
146+
JAWS 2018 + Edge (latest) and Firefox 63 (nightly)
147+
</dt>
148+
<dd>
149+
<p>
150+
JAWS will completely ignore the existence of <code>meter</code> elements, regardless of if they are styled or not.
151+
</p>
152+
</dd>
153+
154+
<dt>
155+
JAWS 2018 + Chrome (latest)
156+
</dt>
157+
<dd>
158+
<p>
159+
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.
160+
</p>
161+
</dd>
162+
163+
<dt>
164+
NVDA 2018.2.1 + Edge (latest)
165+
</dt>
166+
<dd>
167+
<p>
168+
NVDA will announce a styled <code>meter</code> as <q>progress bar [current value]</q>.
169+
</p>
170+
<p>
171+
NVDA will not announce an accessible name for the <code>meter</code>, so <code>aria-label</code> and <code>aria-labelledby</code> are ignored.
172+
</p>
173+
</dd>
174+
175+
<dt>
176+
NVDA 2018.2.1 + Firefox 63 (nightly)
177+
</dt>
178+
<dd>
179+
<p>
180+
NVDA will announce nothing but the accessible name to <code>meter</code> elements, regardless of if they are styled or not.
181+
</p>
182+
</dd>
183+
184+
<dt>
185+
NVDA 2018.2.1 + Chrome (latest)
186+
</dt>
187+
<dd>
188+
<p>
189+
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.
190+
</p>
191+
</dd>
192+
193+
<dt>
194+
VoiceOver + Safari 11.1.1 on macOS High Sierra
195+
</dt>
196+
<dd>
197+
<p>
198+
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.
199+
</p>
200+
</dd>
201+
202+
<dt>
203+
VoiceOver + Safari on iOS 11.4
204+
</dt>
205+
<dd>
206+
<p>
207+
VoiceOver will completely ignore the existence of <code>meter</code> elements, regardless of if they are styled or not.
208+
</p>
209+
</dd>
210+
211+
<dt>
212+
TalkBack (Android Accessibility Suite 6.2) + Android Chrome
213+
</dt>
214+
<dd>
215+
<p>
216+
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.
217+
</p>
218+
</dd>
219+
</dl>
133220

134221
<h4>Usage note:</h4>
135222
<p>
136-
223+
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).
137224
</p>
138225

139226
</section>

‎src/progress-bar/index.html‎

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
<article class="demo">
3434
<header>
3535
<h1>Styled Progress Bar</h1>
36-
<p>Last updated: <time>July 26, 2018</time></p>
36+
<p>Last updated: <time>July 28, 2018</time></p>
3737
<p>
3838
Cross-browser styling for the HTML progress bar.
3939
</p>
@@ -275,24 +275,13 @@ <h4>Affects on Screen Reader Announcements?</h4>
275275
</dd>
276276
</dl>
277277

278-
279278
<h4>Usage note:</h4>
280279
<p>
281-
Though the <code>progress</code> element is reporting the correct information to browsers, screen readers have quite a few kinks in how they announce that information to users.
280+
Though the <code>progress</code> element is largely reporting the correct information to browsers, screen readers have quite a few kinks in how they announce the element to users.
282281
</p>
283282
<p>
284-
At the time of testing, it doesn't appear a styled progress bar alone will be fully accessible in all screen reader and browser pairings. Instead it may be more appropriate to simply treat the progress bar as a visual decoration, hide it from screen readers, and provide visually hidden text as a means to consistently convey the information.
283+
At the time of testing, a styled progress bar won't be fully accessible in all screen reader and browser pairings. Instead it may be more appropriate to simply treat the progress bar as a visual decoration, hide it from screen readers, and provide visually hidden text as a means to consistently convey the information.
285284
</p>
286-
287-
<!-- <pre><code class="language-html"> -->
288-
<div class="progress-meter-example">
289-
Progress Label:
290-
<span class="visually-hidden">50%</span>
291-
<progress class="progress-bar" value="50" max="100" aria-hidden="true"></progress>
292-
</div>
293-
<!-- </code></pre> -->
294-
295-
296285
</section>
297286
</article> <!-- /.demo -->
298287
</main>

0 commit comments

Comments
 (0)