@mattstuddert
Posted
It's awesome to see you post another solution, Anna. Welcome back! π
Your code looks great, scales up/down nicely, and it's awesome to see you using min-width
media queries! The only suggestions I could find were in your HTML:
- You've duplicated the navigation code when you don't need to. Instead of duplicating the HTML, you could style the
nav
differently for mobile or desktop layout inside a media query. - It's great to see you using a
button
element to trigger the mobile menu. If you want to take it up a notch and make it more accessible, I'd recommend checking out this Inclusive components article on menus & menu buttons. Addaria-*
attributes will really enhance the accessibility of the navigation. - You've got 3x
img
elements withalt
text of "illustration". These add no context to the content, so I'd recommend leaving thealt
attributes blank, making screen readers skip them. As it is, screen readers would read out the word "illustration" before each of those 3 blocks, which doesn't add anything and actually makes the experience worse.
I hope that helps. Let me know if you have any questions! π
@brasspetals
Posted
@mattstuddert Hi, Matt!
I really appreciate you taking the time to look over the code! I knew having two separate navigations was likelyβ¦not the best solution π - thanks for calling me out on it. Iβve gone back in and combined the navigations, and also changed the alt attributes as you suggested.
Thank you for sharing the article on menu accessibility! Iβm always uncertain on best practice when it comes to accessibility (and, honestly, just accessibility practices in general), and this is really helpful. I havenβt implemented the aria attributes yet, as Iβll need to give the article a few more reads, but Iβm excited to start adding proper accessibility into my projects.
Thanks again for your suggestions! π
@mattstuddert
Posted
@brasspetals you're welcome! Accessibility can be tricky, but it's well worth learning about as it's such a critical piece to being a good front-end developer. The Inclusive Components site is an incredible resource for that, so you'll get a lot out of reading that π