DEV Community

Cover image for CSS can help improve your HTML⁉ - Ep 1: alt attributes

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

GrahamTheDev on December 11, 2021

CSS, when used properly, can make your HTML better! In this mini series I will be using CSS to enforce using the correct HTML elements, required a...
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. 😉

Collapse
 
siddharthshyniben profile image
Siddharth • Edited

This isn't a pretty new idea, there are a few CSS stylesheets out there which highlight these errors. The first one which comes to mind is the a11y.css bookmarklet.

a11y.css in action

Maybe you could compile all the a11y errors into a bookmarklet?

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

You are right, but the new parts in this are the enforced use of role=“presentation none” for decorative images and catching default output, neither of which I have seen before (and won’t see as they are not things a generic library could do).

The idea is to show how you can enforce company wide policies etc.

However I will be introducing that project later in this series as they have some great tricks etc! 👍❤️

Collapse
 
doekenorg profile image
Doeke Norg • Edited

Nice one. Reminds me of using border: 1px solid red as a debug tool.

This could be nice in a separate stylesheet for development environment only. Don't want to broadcast I'm an idiot on my site 😁

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

Oh very much a development only stylesheet!

I personally have it linked to my environment settings so I can't accidentally include it in production!

However the second part of this system is for production and development as it just stops developers doing things wrong!

For a simple example: <div class="btn-large" just won't work as the selector is for button.btn-large, a.btn-large!

More on that in the next post! 😉❤

Collapse
 
ashleyjsheridan profile image
Ashley Sheridan

It's perfectly valid for an image to have an empty alt attribute, but some less experienced devs might not understand and be tempted to push unnecessary content into the attribute, making accessibility worse in some cases. The image shouldn't require the role, and the spec is clear on this that an image with empty alt text should not be part of the accessibility tree.

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

I said that it isn’t required within the article, it is a way of signalling that the alt attribute should indeed be empty to developers (and to protect against developers adding content unnecessarily). Certainly not required but something I like to do to help avoid a mess in the future.

Collapse
 
boraqo profile image
Boro Fornes

Gracias
Es el primer post que veo de DEV.
Creo que esta web va a ser un descubrimiento muy interesante.

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

Glad you enjoyed it and as this is your first post you have read, may I say "welcome to DEV" on behalf of the community!

I hope you enjoy it here!

Collapse
 
oniichan profile image
yoquiale

Nice article, I never thought about checking for tag properties with css to check if images were accessible, thanks for another great accessibility article.

Collapse
 
grahamthedev profile image
GrahamTheDev

Thanks a lot, glad you enjoyed it and hope you find it useful! ❤️

Collapse
 
galaxylittlepaws profile image
Galaxy Littlepaws

This is such a helpful post. I'll be making use of what I learned for sure!

Collapse
 
grahamthedev profile image
GrahamTheDev

Thanks, glad you enjoyed it!

Collapse
 
andrewbaisden profile image
Andrew Baisden

Great read.

Collapse
 
grahamthedev profile image
GrahamTheDev

Thanks Andrew! ❤️