Fylo data storage component

Community feedback

• 

  Mark Mitchell•1,820

  @markup-mitchellPosted about 4 years ago

  Hi Alex,

  Wow, that's among the most pixel-perfect solutions I've seen on FEM!

  1. 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-images 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!

  2. 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!

  2

  ---

  

  Alex Kim•1,325

  @alex-kim-devPosted about 4 years ago

  @markup-mitchell Hi Mark, thank you for the feedback!

  1. I think screenreaders can retrieve the information about min & max values from the meter element - it has min & 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 add aria-hidden="true" to these labels to prevent screenreaders announcing them.

  2. 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.

  1
• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted about 4 years ago

  Another brilliant solution, Alex! You're considering all the right things as well, which is great. The approach you've taken with a visually hidden meter element for screen reader users works well with the additional content then hidden using the aria-hidden attribute, as you've discussed.

  For the visual order change, it's not necessarily a bad thing as long as the DOM order is correct for screen reader users. If the DOM order didn't make sense, but the visual order did, then you'd have a potential accessibility issue.

  I hope that helps!

  1

  ---

  

  Alex Kim•1,325

  @alex-kim-devPosted about 4 years ago

  If the DOM order didn't make sense, but the visual order did, then you'd have a potential accessibility issue.

  Oh I see, that's a great explanation, Matt! Thanks!

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted about 4 years ago

  @Alex-K1m no problem! 👍

  0
• 

  Mark Mitchell•1,820

  @markup-mitchellPosted about 4 years ago

  aria-hidden sounds more declarative than my suggestion. nice.

  0