@chill31
Posted
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.
@Pasang24
Posted
@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!
@chill31
Posted
@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.
