Design comparison
Solution retrospective
Trying to use SASS from what I've learned so far for a small component like this, I hope I did good and it was a good start.
Any feedback and suggestions on how I can improve are very welcome!
Community feedback
- @pikapikamartPosted about 3 years ago
Hey, great work on this one. Desktop layout looks really great and that 2nd layout when resizing is really nice, I would do that as well if I tackle this :>> Mobile state looks great as well.
Some suggestions would be:
- Use
main
tag instead of usingrole="main"
on the.preview
selector since there is already an existing element, better using it. - Those car icons are only decorations on the site. Decorative images should be hidden for screen-reader at all times by using
alt=""
andaria-hidden="true"
to theimg
tag or onlyaria-hidden="true"
if the image is usingsvg
. - Only use descriptive
alt
on images that are meaningful and adds content to the site otherwise hide the image for screen-reader users. - When using
img
tag, you don't need to add words that relates to "graphic" such as "icon" and others, sinceimg
is already an image so no need to describe it as one. - A single
h1
is needed for a page. On this one, I saw that you included anh1
as well and it is new to me to see thataria-readonly
don't know about that one hehe. But for this one, have a look at Grace's solution on this one to apply the screen-reader only h1.
Aside from those, great job again on this one.
Marked as helpful1@ahmedbesheerPosted about 3 years ago@pikamart WOW, what a comment.
I can't thank you enough for these helpful pieces of information.
just one thing I want to ask if you don't mind, Isn't it wrong to use the img tag without the alt attribute?
or do you mean in this particular component? if it is, should I remove the img tag and use the SVG directly on my HTML ?
Thanks again and have a good day :)
0@pikapikamartPosted about 3 years ago@ahmedbesheer Hey, glad that you found it useful and thank you as well for replying on this one^^
Yes, if you use
img
tag withoutalt
attribute, screen-reader will the source path instead I think if you didn't provide any:<img src="..." /> # wrong, there is no alt
It is fine to use
img
tag and using thesvg
path as the value for thesrc
of theimg
. But as I mentioned before, if an image or ansvg
is just a decoration on the site and you think that it doesn't really add any information on the site, hide them for screen-reader users:<img src="..." alt="" aria-hidden="true" />
If you however used
svg
and you also think that it is decorativesvg
only:<svg aria-hidden="true"> ....svg body </svg>
But if you think an
svg
makes sense and add information. For example, you usedsvg
as the website's logo add a text describing it:<svg role="img"> <title>logo name in here </title> ....svg body </svg>
Marked as helpful1@ahmedbesheerPosted about 3 years ago@pikamart Thanks for the examples now I got it even more.
so I think what I've done based on what you explained, will be fine semantically and for accessibility?
<img src="" alt="Sedan car icon" aria-hidden="true">
or should I remove the
alt
attribute in my example above?and it's a pleasure for me to have this discussion with you and know this valuable information
0@pikapikamartPosted about 3 years ago@ahmedbesheer Hey.
For that one, no. If you used
aria-hidden="true"
on the image, make sure that thealt
is empty as well. Because you are hiding theimg
right, so there's no reason for you to add an alternative text.Also, like what I pointed out when using
alt
, avoid those words that relates to "graphic" like that "icon" wordAlso, just feel free to leave any question/queries and i'll help as long as I know it
Marked as helpful1@ahmedbesheerPosted about 3 years ago@pikamart Well, I think in this case there is no better solution than using
<svg aria-hidden="true">
Do you agree?
0@pikapikamartPosted about 3 years ago@ahmedbesheer For your current tag usage, you are using
img
on the car icons, use<img alt="" aria-hidden="true" />
Marked as helpful1@ahmedbesheerPosted about 3 years ago@pikamart Thank you, I updated my solution, and thank god there are no issues.
1 - Use
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