Design comparison
SolutionDesign
Solution retrospective
Any feedback will be appreciated. Thanks.
Community feedback
- @pikapikamartPosted about 3 years ago
Hey, great work on this one. I rarely see this challenge so I am on luck to seeing this one. Layout in desktop is good as well as for the mobile state. In terms of responsiveness, it is fine as well.
Some suggestions would be:
- The
a
tag that wraps theheader
logo should have anaria-label
likearia-label="homepage"
. This way, a screen reader user would know where this link would navigate them hence it will bring them to the "homepage" of your website. - The
img
as well on theheader
should have thealt
be likealt="creative"
. The logo itself have the text "creative" and it would be great to have thealt
to be that as well. Also when addingalt
text to an image, do not add the word "logo, picture, icon, graphic" anything else that relates to "image" word. Assistive tech will handle those for you. alt
text for the hero section image could be better and not just "background". If you think an image adds a content, make bit more descriptivealt
text.alt
text for other section images as well could be better and descriptive.- The slider arrow toggler should have used a
button
element and not justimg
. Usingimg
on this one is not really accessible and keyboard or screen reader users won't be able to toggle it.button
would be good along with it'saria-label
like "change slider". Since the slider doesn't really contains any text that can be read, there is no need for it to be focused on this, I say this if you were to have those focused on javascript like.focus()
. - On mobile layout, the hamburger menu should have used a
button
element witharia-expanded
attribute andimg
. Also, since you are adding like a no-scroll, it would be good to trap the focus to the dropdown only along with the hamburger toggler.
But still, you did a good job on this one. Really liked this one.
Marked as helpful0 - The
- @zaraag92Posted about 3 years ago
Raymart Pamplona thanks so much for your feedback. I really do appreciate it and will pay more attention on screen readers and make changes on my project. Thanks again and have a good day !!!!
1
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