Design comparison
Solution retrospective
This was a bit challenging. use the overflow:hidden for the faq expanded. open to suggestions. thanks in advanse!
Community feedback
- @kens-visualsPosted about 3 years ago
Hey @efs0-cod3 👋🏻
I have some quick tips to help you fix the HTML issues and some accessibility suggestions.
- First things first, as the error says you cannot have
<div>
inside<label>
., but you can have the opposite. However, in this case since you're putting text inside those<div>
s, I suggest replacing them with<p>
tags. - Next, instead of using
<hr>
, I'd suggest usingborder-bottom
like this:
.collapsible { display: block; margin-bottom: 1rem; border-bottom: 1px solid gray; }
those will fix the HTML issues, just don't forget to generate a new report once you fix them.
- What comes to accessibility, these two images should have
aria-hidden="true"
<img class="il-box-mobile" src="images/illustration-woman-online-mobile.svg" aria-hidden="true"> <img class="il-box" src="images/illustration-box-desktop.svg" aria-hidden="true">
You can read more about
aria-hidden
here.I hope this was helpful 👨🏻💻 overall, you did a great job. Nice touch on the animations, well done. Cheers 👾
Marked as helpful1@efs0-cod3Posted about 3 years ago@kens-visuals Thanks a lot I forgot to read the accessibility issues. but really appreciate your time to comment out and share your knowledge!
0@kens-visualsPosted about 3 years ago@efs0-cod3 you're welcome, I'm glad I could be helpful 😇
0 - First things first, as the error says you cannot have
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