DEV Community

Discussion on: CSS can help improve your HTML⁉ - Ep 1: alt attributes

Collapse
 
grahamthedev profile image
GrahamTheDev

Any other tricks you can think of to do with images and accessibility?

One thing i didn't cover was that to avoid Layout Shifts that contribute to CLS you should have a width and height attribute on an <img>.

The selector is the same principle as that for a missing alt attribute, img:not([width]) and img:not([height]) in case you were wondering!

I hope you are all having a great weekend and you found this article useful. ❤🦄❗

Collapse
 
alvaromontoro profile image
Alvaro Montoro

I might have mentioned Checka11y.css in the past. It has different tricks for this.

One more that you could add is longdesc. The attribute is deprecated and poses some accessibility concerns/challenges (warning). And if it points to an image or contains text, it is incorrect as it should have a link to a page (error.)

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

Great suggestion on longdesc, I will add that in tomorrow as part of the article as I had forgotten about that (just about to go out otherwise would do it now!)!

In fact I literally just saw this github.com/jackdomleo7/Checka11y.c... now that you mentioned it on the checka11y github!

I will be introducing checka11y later in the series after you pointed me to it a few weeks ago! ❤

Thread Thread
 
alvaromontoro profile image
Alvaro Montoro

I'm adding a bunch of tickets to do in that repo (pending acceptance). It is a fun project in case you want to collaborate. 😉