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...
For further actions, you may consider blocking this person and/or reporting abuse
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
widthandheightattribute on an<img>.The selector is the same principle as that for a missing
altattribute,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. 😉
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.
Maybe you could compile all the a11y errors into a bookmarklet?
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! 👍❤️
Nice one. Reminds me of using
border: 1px solid redas 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 😁
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 forbutton.btn-large, a.btn-large!More on that in the next post! 😉❤
It's perfectly valid for an image to have an empty
altattribute, 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 emptyalttext should not be part of the accessibility tree.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.
Gracias
Es el primer post que veo de DEV.
Creo que esta web va a ser un descubrimiento muy interesante.
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!
Nice article, I never thought about checking for tag properties with css to check if images were accessible, thanks for another great accessibility article.
Thanks a lot, glad you enjoyed it and hope you find it useful! ❤️
This is such a helpful post. I'll be making use of what I learned for sure!
Thanks, glad you enjoyed it!
Great read.
Thanks Andrew! ❤️