Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Fylo data storage component

Alex Kim 1,325

@alex-kim-dev

Desktop design screenshot for the Fylo data storage component coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


  1. I'm not sure what's the best approach to making a custom meter element. My .meter element consists of visual markup - .bar & two .labels, and visually hidden html meter element - for assitive technology.

  2. I change the white badge position from bottom on mobile to top on bigger screens using css grid, but it introduces an issue with visual order not following DOM order. How can i avoid it?

Community feedback

Mark Mitchell 1,820

@markup-mitchell

Posted

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!

  1. 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-dev

Posted

@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
P
Matt Studdert 13,611

@mattstuddert

Posted

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-dev

Posted

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

0
P
Matt Studdert 13,611

@mattstuddert

Posted

@Alex-K1m no problem! 👍

0
Mark Mitchell 1,820

@markup-mitchell

Posted

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

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord