Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
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.)
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
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!)!
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
andheight
attribute on an<img>
.The selector is the same principle as that for a missing
alt
attribute,img:not([width])
andimg:not([height])
in case you were wondering!I hope you are all having a great weekend and you found this article useful. ❤🦄❗
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.)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! ❤
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. 😉