@markup-mitchell
Posted
Hi Alex,
Wow, that's among the most pixel-perfect solutions I've seen on FEM!
- I can't tell you anything about the
meter
element (since you just introduced me to it!) but this occurred to me:
You have a visually hidden meter
and a content-less visual one - cool. But the 0GB and 1000GB nodes are dangling from the visual one without context and could be confusing for screenreader users - a shame since you've made a real a11y effort. Not sure what the best solution is - perhaps adding the visual meter labels as background-image
s on the empty meter
class? My undestanding is that they would not be announced.
I'm really impressed with the thought you've put into this for accessiblity. It's almost like the visual meter is an affordance for people not using screenreaders!
- Again, amazing thing to have considered. I actually don't think you have an issue here; I think "visual order" is a matter of interpretation, and the fact that the badge is "floating" outside the end of the
status
section signifies that it is a kind of suffix.
It's a really instructive solution, thank you!
@alex-kim-dev
Posted
@markup-mitchell Hi Mark, thank you for the feedback!
-
I think screenreaders can retrieve the information about min & max values from the
meter
element - it hasmin
&max
attributes. So the '0GB' and '1000GB' labels should be purely visual - so I think there's no need to tie them with the.bar
element. However I should addaria-hidden="true"
to these labels to prevent screenreaders announcing them. -
This was one of the checks to do manually mentioned in Lighthouse report. But I just noticed it says about importance of 'logical tab order', and I don't have any focusable controls inside the white badge, so I think it's alright.