Design comparison
Solution retrospective
Any feedback would be appreciated, thank you.
Community feedback
- @grace-snowPosted over 3 years ago
Hi
I can't navigate this as it's missing interactive elements (like links/buttons) and/or it's missing focus styles. You want to make sure anything interactive is using an interactive element and has an appropriate label otherwise keyboard users like me (or screenreader users) can't move around the page properly or know where they are.
The other small thing I notice is description is missing top and bottom padding so hits the content above and below on mobile.
If you're using min width media queries, your mobile styles don't need to be in a max width one. You can write the base styles (mobile) and then only override what you need in a min width one.
I hope that makes sense.
Good job on the rest, it looks nice
0@JAnneSoPosted over 3 years agoHi @grace-snow , thank you very much for your feedback. I didn't put any link, because there is only one page so I thought it was useless. For the description, I didn't pay attention to the screens below 320px, should I ? And for the media queries, I thought it was not a good practice to override styles. Thank you again !
0@grace-snowPosted over 3 years ago@JAnneSo in fact I've just tried it on my actual mobile and there's no vertical scroll so I can't see any of the page below the heading.
You still need to put interactive elements in as if this was a real page, and include focus states every time. But it's more than navigational links here - on keyboard I can't interact with your next and previous slider controls as they are not using the right html elements either.
0@JAnneSoPosted over 3 years ago@grace-snow oh ok, I understood now, I will fix that. Thank you for these really helpful information.
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