Four Card Feature using CSS Grid

Community feedback

• 

  Samy•85

  @anaielPosted over 4 years ago

  Good job, the design is very neat! This is coming from s/o without actual experience, but from what I've gathered around the web in terms of accessibility, it is better to leave an empty alt attribute for images which do not add meaning (such is the case for the icons here). Also, I would add a h2 heading to make sure the structure is ok (you can hide it by making sure its position if off screen) Also, is there a reason to chain all the class selectors ? It probably doesn't have a huge impact here but since selectors are read right to left anyway, it feels like it forces the browser to make unnecessary checks (since all the .icon are within a .icon-container are within a .card-container are within a .card.

  1

  ---

  

  P

  Kevin•250

  @zs-kevPosted over 4 years ago

  @anaiel Thanks for the feedback, really appreciate it!

  My thinking about adding the alt attributes on the icons is if they for some reason don't load, does the alt attribute not show? Do you think that would be necessary though?

  Where should I put the h2? Thanks for noting this, I know that it's not a problem to skip headings, but never actually thought about it not being semantically correct.

  Could you perhaps clarify your last statement a bit for me? Are you talking about in the HTML file or the SASS files? If you are looking at the CSS file, remember that I am using SASS (not SCSS or CSS) which is then being compiled into CSS, and so somethings might come out differently as opposed to writing everything in CSS.

  1

  

  Samy•85

  @anaielPosted over 4 years ago

  @zs-kev About alt text: In this case, since the images don't add meaning, there is no need to display an alternative (that would just clutter the page). However, you should still add alt="". I'm not 100% sure of the reason, but I suppose it is so that people using adaptive technologies (such as screen readers) know that the image doesn't convey meaning, and not that someone just didn't consider adding an alt attribute. You can have a look at this for alt text best practices : https://www.w3.org/WAI/tutorials/images/decision-tree/

  About headings: It can be problematic for accessibility reasons to skip headings. I believe headings can be used as reference point for assistive technologies, so having a logical headings hierarchy helps. So you can either use h2 in the cards, or add a h2 above the cards div, give it a descriptive title, and add position: absolute; left: -10000; to "hide it" (that way it will still show in the hierarchy tree but won't mess with your design)

  And finally, my bad for the comment about the css, I did not realize you are using SASS!

  1

  

  P

  Kevin•250

  @zs-kevPosted over 4 years ago

  @anaiel Thanks for the reply.

  With the alt text what you say makes sense, the images are not really important and they don't add meaning, so I guess it's not important for screen readers and what not to read it out. I'll remove it from my HTML ;).

  With the headings, could I not just use "display: none" in the SASS/CSS?

  0

  

  Samy•85

  @anaielPosted over 4 years ago

  I did a quick check and display none would hide the heading for assistive technologies as well : https://a11yproject.com/posts/how-to-hide-content/

  In the post they use different trick (clip) but I suppose the effect is the same.

  1