Result Summary Component using HTML and CSS Flexbox

Community feedback

• 

  chill31•190

  @chill31Posted over 1 year ago

  Very nice design!

  HTML

  As you may have read above, the auto generated report shows that the images you used don't have a alternate text. To make the images more accessible, we add alt attributes and this is very important for all images.

  • You can fix your report's error by this:

  <img src="./images/icon-reaction.svg" alt="reaction icon">
  

  And follow the same steps for all the other icons.

  • Another way to do this same thing is just use the svg's in the HTML itself, rather than making images and using them as a source.

  <svg ...>...</svg>
  

  these are the same svg's provided in the images/ folder in your design. Just an alternate, it does not make any difference.

  CSS

  • Another thing to notice is that you've (I think) ignored the active state of the button, which is supposed to be a gradient on hover (also focus because it's a button)

  Leaving aside the accessibility, your design is very nice, and I really can't tell a difference between the design and your solution. Great work on the responsiveness too.

  0

  ---

  

  Pasang24•20

  @Pasang24Posted over 1 year ago

  @chill31 Thanks for the feedback. I did added the alt attribute when I saw the error but it still didn't go so I left it as it is. But I didn't know about the <svg></svg> tag till now and thought every image format was only meant to be used in <img> tag. I'll make sure to use it in from next time, thanks again!

  0

  

  chill31•190

  @chill31Posted over 1 year ago

  @Pasang24 I think there is a button for Generate new Report if you're able to see it anywhere here. (I don't see any errors shown in the report as of now)

  The <svg> tag is not really necessary, but still it provides better quality. The <img> tag is meant for images such as .png, .jpg, you get it.

  0