3-column preview card component

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 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 using role="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="" and aria-hidden="true" to the img tag or only aria-hidden="true" if the image is using svg.
  • 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, since img 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 an h1 as well and it is new to me to see that aria-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 helpful

  1

  ---

  

  Ahmed Besheer•90

  @ahmedbesheerPosted almost 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

  

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 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 without alt 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 the svg path as the value for the src of the img. But as I mentioned before, if an image or an svg 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 decorative svg only:

  <svg aria-hidden="true">
  ....svg body
  </svg>
  

  But if you think an svg makes sense and add information. For example, you used svg as the website's logo add a text describing it:

  <svg role="img">
    <title>logo name in here </title>
    ....svg body
  </svg>
  

  Marked as helpful

  1

  

  Ahmed Besheer•90

  @ahmedbesheerPosted almost 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

  

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  @ahmedbesheer Hey.

  For that one, no. If you used aria-hidden="true" on the image, make sure that the alt is empty as well. Because you are hiding the img 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" word

  Also, just feel free to leave any question/queries and i'll help as long as I know it

  Marked as helpful

  1

  

  Ahmed Besheer•90

  @ahmedbesheerPosted almost 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

  

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 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 helpful

  1

  

  Ahmed Besheer•90

  @ahmedbesheerPosted almost 3 years ago

  @pikamart Thank you, I updated my solution, and thank god there are no issues.

  1