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

Data storage component

@mubaraqwahab

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


Feedbacks are welcome, especially on the accessibility. Thanks.

Community feedback

Alex Kim 1,325

@alex-kim-dev

Posted

Hey Mubaraq, great solution! Here are some of my thoughts:

  • I would use aria-label instead of adding a span with .visually-hidden on the buttons, your solution works perfectly though, so that's just a preference;
  • I would add a visually hidden meter element + wrap the paragraph above into a label for that meter, just to be sure that assistive technology will announce this part.

Good luck and have fun making the next one!

3

@mubaraqwahab

Posted

@Alex-K1m Thanks a lot! I actually used a meter and label before, and I tested with NVDA. I changed it and used an aria-hidden div because I felt it was redundant and quite noisy.

1
Hari Ram 370

@hariramjp777

Posted

Good solution brother especially using classes for accessibility such as visually-hidden..

1

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