Meter and progress elements in Safari
Date: November 1, 2021
On the weekend, I wrote some cross-browser styles for an HTML
The biggest difference was between Firefox and Chrome/Safari — I’ll spare the
details. There was a slight difference between Safari and Chrome which required
me to set
-webkit-appearance: none for Safari to override any of the browser
styles, immediately followed by
appearance: meter for Chrome. Safari doesn’t
support the latter rule. When all was done, I was pretty satisfied and began
some cross-browser testing.
After a visual test, I went on to using screen readers. That’s when I noticed an
issue in Safari: the element seemed to be completely ignored. Upon further
investigation, I discovered that the element didn’t have an implicit ARIA role
in the accessibility details of Safari’s Web Inspector. The first thing I did
was remove the
-webkit-appearance: none rule to set it back to its default
state to see if Safari set it in the first place. This resolved the issue; the
implicit role was now
meter as it should be. After reintroducing that rule,
then changing the value to
auto, etc. then back to
none, it became
none was the offending value.
I checked what effect
-webkit-appearance: none had on other elements with
implicit ARIA roles and the only two elements affected by the bug were
<progress>. I filed the bug report for WebKit this morning.
Until this bug is fixed, if you want to have visually consistent meters and
progress bars, and not break accessibility in Safari, you should not use
<progress>. Instead use the
along with the appropriate ARIA attributes to implement your own.