DEV Community

Discussion on: Increasing my PageSpeed score from 92% to 100% using CSS only

Collapse
 
s_aitchison profile image
Suzanne Aitchison

If you have your icons as plain divs with background images like this, you lose the semantic html that allows screen readers to pick them up, and for users to tab and click them via keyboard 🤔

Collapse
 
oohsinan profile image
Omar Sinan

Oh, i didn’t know this! Would using the img tag be better?

Collapse
 
s_aitchison profile image
Suzanne Aitchison

Yep, the problem is div doesn't have any semantic value, and isn't focusable by keyboard by default either.

Usually for this use case you would have a link with an img inside with meaningful alt text.

There's a nice article on this by W3: w3.org/WAI/tutorials/images/functi...

Thread Thread
 
oohsinan profile image
Omar Sinan

Ah that’s so interesting, I’ll check it out. Thank you for sharing! 🙌