Fylo data storage - HTML, SCSS, JS, Flexbox, mobile-first & @keyframes
Design comparison
Solution retrospective
Hi everyone π
Good to be back after having a few weeks off over the holidays.
I used this challenge to learn more about accessibility, focusing on:
- semantic mark up and use of interactive elements
- custom focus states
- use of aria-label
- making sure i removed animations and transitions for people that prefer not to see them
I also had a play around with some animations which was great practice!
Any feedback that could help me to improve my understanding of accessibility would be very welcome!
Happy coding π€
Community feedback
- @MiculinoPosted almost 3 years ago
Congrats on completing the challenge, @darryncodes!
I love how you added your own creative twist to it. The functionality and responsiveness are all on point.
Regarding your accessibility, you've done quite a great job. I have one suggestion regarding it: The point of accessibility attributes in HTML is to offer more context. I think having alt for your img such as "Attach document icon" is a bit redundant. The images are inside a button and each button has an aria-label that already describes what each button is about
Marked as helpful0@darryncodesPosted almost 3 years agoCheers @Remus432 it was a fun one to build!
You make a really good point, I've updated the mark up.
1 - @elroytoscanoPosted almost 3 years ago
Brilliantly done Darryn, especially the use of the
meter
tag. The code is very readable as well. Great job π1 - @denieldenPosted almost 3 years ago
Hi Darryncodes, Good job! Congratulations, very clean code :)
To further improve accessibility you can also add the
title
attribute to theimg
html tag.Happy coding! π€
1 - @Kamasah-DicksonPosted over 2 years ago
I like the implementation of animation. Good job thereπ Happy coding experience.
0
Please log in to post a comment
Log in with GitHubJoin 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