Design comparison
Solution retrospective
I am pretty happy to finish this project.
I am mostly interested in opinions if my code is enough clean and if I respect all accessibility issues?
I am open to any suggestions ;).
Community feedback
- @ErayBarslanPosted about 2 years ago
Hey there, excellent work with this one! Design looks good and is responsive. Some suggestions:
- There is a little gotcha about design. When the screen gets wider, around
1600px
illustration-intro starts overflowing out of it's place and covers other elements. That's because it's width is relative to the parent. You can fix it by adding amax-width
to the image. Also you can givemax-width
to container elements such as.header__container
aswell. Because as wider it gets, content starts to stretch out. - When you use an
<input>
you should either use<label>
oraria-label
attribute.aria-describedby
won't help in this case. An example usage would be:
<button aria-describdyby="hidden-text"> <p id="hidden-text">Text only shows when clicked the button</p> </button>
- If there are several
<nav>
in the page you can use aria-label as:aria-label:"primary navigation"
Also you shouldn't leavearia-label:""
empty like this because it won't provide any info about the element to assistive techs. In your case you can use like:<a href="#" aria-label="instagram">
- I see you use
aria-hidden:true
on images for design purpose which is right. But empty alt might effect SEO results. You can use likealt:"close icon"
Other than these semantic markup looks alright to me and solution is great in general. Happy coding :)
Marked as helpful0 - There is a little gotcha about design. When the screen gets wider, around
- @JoannaLapaPosted about 2 years ago
@ErayBarslan thank you for Your feedback! I think that I corrected all issues according to your comments.
I think that the problem with my intro image was connected with the fix grid-templates-row value because I don't see this issue now on the 1600px width screen and more (in the meantime I deleted this property).
Concerning aria-describedby on my input, I put this for my error message:
<div> <input class="footer__input" type="email" name="email" id="email" aria-describedBy="message" aria-label="email" placeholder="Updates in your inbox…"> <p class="footer__input-msgtext " id="message"></p> </div> the message appears only when the user set an invalid email and is connected with ariadescribedby with same id ('message'), is that correct usage?Thanks a lot again for your feedback :) Happy coding! Joanna
1@ErayBarslanPosted about 2 years ago@JoannaLapa Yep all looks good. I didn't notice the <p> tag below and thought you tried to use
aria-describedBy
to label the input. That's alright to keep it in this case pardon me :)0@JoannaLapaPosted about 2 years ago@ErayBarslan no problem, thank you for your answer :). Accessibility is the issue that I try to get to know now more and I feel that there is still a lot to learn ;)
0@ErayBarslanPosted about 2 years ago@JoannaLapa Once upon a time when I was a noobie, I thought I knew all there is to html, until my first submission throwing me bunch of accessibility issues :)
There are still cases I'm not sure of, needs me checking. But once we get the general idea of how screen readers works, there are lots of articles to help on details. And to my observation you're pretty close to the stage. So I'd say once you're comfortable with general approaches, don't try to consume all about accessibility. You can always keep learning project by project.
One thing programming thought me is; it ain't possible to learn everything but when we get the idea of how things works, that's enough make things work as supposed to. If you wish to be careful on the subject, in addition to what's provided here I can suggest these two sites to check the performance of your sites: accessibility & everything:)
Marked as helpful0
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