Design comparison
Community feedback
- @PhoenixDev22Posted almost 3 years ago
Hello @xAkashax,
I have some suggestions regarding your solution:
-
To tackle the accessibility issues, you can use landmark
<main>
to wrap the NFT card content. HTML5 landmark elements are used to improve navigation . -
Anything with a hover style in design means it's interactive. you need to add an interactive element
<a>
around the image,Equilibrium #3429 and Jules Wyvern
.You should add the hover effect on them . -
For any decorative images, each img tag should have empty
alt=""
andaria-hidden="true"
attributes to make all web assistive technologies such as screen reader ignore those images in(icon-view, icon-ethereum, icon-clock
). -
the
icon-view
doesn't really need to be in the html, you could do it with css. If you want it to stay in html it needs to be aria-hidden or role presentation with empty alt. -
I would use pseudo-elements to change the teal bg color to a hsla. Then opacity can be changed from 0 to 1 on the pseudo element on hover as there is no reason to have the extra clutter in the html.
-
The avatar's alt shouldn't be
empty
, you can useJules Wyvern
for it. -
So you can use
<ul>
to wrapclass="wrap"
and in each<li>
there would be<img >
and <p>`` . Then you can use flexbox properties to align them centrally . -
the link should be wrapping the main image and either have
Sr-only
text, anaria-label
oralt
text that says where that link takes you. -
width: 325px;
an explicit width is not a good way . Remove the width from the main component and change it tomax width
instead. That will let it shrink a little when it needs to. -
It's not recommended to use
px
for font size . Usingpx
won't allow the user to control the font size based on their needs.
General point : Really important to keep css specificity as low/flat as possible. The best way to do styling is single class selectors.
Overall, your solution is good, Hopefully this feedback helps.
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