Results summary component - Fully responsive & mobile first
Design comparison
Community feedback
- @0xabdulkhaliqPosted over 1 year ago
Hello there π. Congratulations on successfully completing the challenge! π
- I have other recommendations regarding your code that I believe will be of great interest to you.
HEADINGS β οΈ:
- This solution consists incorrect usage of
<h1>
so it can cause severe accessibility errors due to incorrect usage of level-one headings<h1>
- Every site must want only one
h1
element identifying and describing the main content of the page.
- An
h1
heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.
- In this solution there's
<h1>
element which is this<h1>Summary</h1>
, you can preferably use<h2>
instead of<h1>
. Remember<h1>
provides an important navigation point for users of assistive technologies so we want to use it wisely
- So we want to add a level-one heading to improve accessibility by reading aloud the heading by screen readers, you can achieve this by adding a
sr-only
class to hide it from visual users (it will be useful for visually impaired users)
- Example:
<h1 class="sr-only">Results summary component</h1>
- If you have any questions or need further clarification, you can always check out
my submission
for another challenge where i used this technique and feel free to reach out to me.
.
I hope you find this helpful π Above all, the solution you submitted is great !
Happy coding!
Marked as helpful1@abobykinPosted over 1 year ago@0xAbdulKhalid Hey Abdul, thanks a lot, it's really needed, I forgot :)
But could you please take a look, I did exactly like your code but current system validator still showing this error, could you please push "Generate New Report" for your solution you shared, because maaaybe you had a same mate)
"Page should contain a level-one heading <html lang="en">" ... This is pretty stubborn thing...
But I believe you're right in general - thank you! :)
0@abobykinPosted over 1 year ago@0xAbdulKhalid Yes! I think I've just found the exact fix solution, could you just remove 'position: absolute' from sr-only class too, and it should work well then afterwards.
Thanks again Abdul. Happy coding! :)
0 - @Kamlesh0007Posted over 1 year ago
Congratulations on completing the challenge! That's a great achievement, and I'm sure you put a lot of effort into it. I really liked the way you approached the challenge and the code you wrote. You demonstrated a good understanding of the concepts and applied them effectively to solve the problem.I have a few suggestions to improve your code further. You need to add the hover effect to button with correct background-color Add this lines of code to make it as per design
.results-summary button:hover { background: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%)); }
Marked as helpful1
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