Design comparison
Solution retrospective
Any suggestions are very much welcomed.
Community feedback
- @PhoenixDev22Posted almost 3 years ago
Greeting Badhrikr,
Your solution looks nice. I have some suggestions ,
HTML:
-
Document should have one main landmark. Wrap the body content in< main>tag read more about main landmark.Section is not meant to be used anytime use a div . Imagine section is for a bigger chunk of content often titled by <h2>.
-
don't capitalise in html, let css text transform take care of that. Remember screen readers won't be able to Read capitalised text as they will often read them letter by letter thinking they are acronyms.
-
whenever you include interactive elements, make sure you include clearly visible focus-visible styles as well as hover ones.
-
swap
<div><p>Learn More</p></div>
for anchor tags. Clicking those "learn more" would trigger navigation . -
For any decorative images, each
img
tag should have emptyalt=""
andaria-hidden="true"
attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only. -
you can add a <h1> with
class="sr-only"
(Hidden visually, but present for assistive tech). AND use <h2> instead of <h1>.
.sr-only { border: 0 !important; clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */ -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; /* 2 */ height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important; }
To read more .
This fairly modern technique will hide or clip content that does not fit into a 1-pixel visible area. Like off-screen content, it will be visually hidden but still readable by modern screen readers.
- You can replace the
<div class="attribution">
by a<footer >
tag and it would be out the< main>
.
I really hope this feedback helps ,
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