Design comparison
Solution retrospective
This is my first challenge. I would appreciate any feedback on this.
Community feedback
- @PhoenixDev22Posted almost 3 years ago
Greeting @luissitoe ,
I have few suggestions regarding your solution:
- To tackle the accessibility issues, you can add a
<h1>
withclass="sr-only"
(Hidden visually, but present for assistive tech).
.sr-only { border: 0 !important; clip: rect(1px, 1px, 1px, 1px) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important; }
And use <h2> instead of <h3>.
-
You should use
em
andrem
units .Bothem
andrem
are flexible, Usingpx
won't allow the user to control the font size based on their needs. -
Never use px for font size.
You can generate another report for your solution.
Overall , your solution is good. Hopefully this feedback helps.
Marked as helpful0 - To tackle the accessibility issues, you can add a
- @GitHub-dev12345Posted almost 3 years ago
If you want to reduce your accessibility change this code: Give Alternative image name : like - <img src="./images/image-qr-code.png" class="card__img" alt="Code">
and
<div class="attribution"> to <footer> ( Used footer tag for footer design )Marked as helpful0 - @optimusprime202Posted almost 3 years ago
Hey @luissitoe, Excellent work!
Marked as helpful0 - @NaveenGumastePosted almost 3 years ago
Hay ! Luis Good Job on challenge
These below mentioned tricks will help you remove any Accessibility Issues
-> Add Main tag after body
<main class="container"></main>
-> Always use the "alt attribute" and write what img is , and if the img is for decorative then leave it empty but always add it with img tag.
-> Learn more on accessibility issues
If this comment helps you then pls mark it as helpful!
Have a good day and keep coding 👍!
Marked as helpful0 - @SamarthMaliPosted almost 3 years ago
To solve HTML use alt attribute in img tag overall Good job 🤗🤗
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