In this article I will introduce you to a couple of extensions for Chrome, one of which will be a massive help when testing sites / web apps you have built! Then I will use those extensions to show you what a big problem alt attributes are! (the biggest problem being the lack of them!)
Quick Intro
(click here to skip this bit if you know what alt text is)
Look there are 200,000 articles on alt text. I don't need to repeat them do I?
OK - here is a quick summary:
Alt text allows you to describe an image within your HTML.
This means that people who use assistive technology get to know what the image contains and so get the same (or a similar) experience.
Additionally if someone disables images or the image fails to load they also get to know what the image contained.
Adding alt text in HTML
Here is how you add alt text to an image
<img src="image-source.jpg" alt="A description of the image in the context of the document">
That bit in the alt attribute, that is alt text.
To write good alt text all you need to do is imagine you were reading the article to a friend over the phone, when you reach an image just describe it with enough detail that they would get what the image is about and any information within that image that is relevant to the article.
There are a few other tips on good alt text which I will write about in a future post, but that is the main one!
On to the point of this article, the why!
What are we doing here?
There are estimated to be over 4.4 million Americans who use a screen reader...extrapolate that across the world and you have about 100 million people who use a screen reader!
Without alt text a screen reader cannot tell people what an image is about!
That is 100 million people who you are not only excluding, but you aren't reaching with your message!
I am going to show you what your lack of alt text feels like for someone who relies on it, hopefully it will drive home the need for alt text!
This article is not going to tell you how to write perfect alt text, but I will address that in a future article. This is just to show you why you should care and the impact your actions have!
Tools required: You need a computer and Google Chrome (or browser that works with Chrome extensions) so if you are on mobile, you might want to bookmark this article and wait until you get home to try it.
How long is this going to take and why should I bother?
Honestly, just give me 2-3 minutes of your time, you will soon realise that your lack of alt text is not a minor problem, it has a huge impact on a lot of people!
As an added bonus the first extension we are going to be using has so many useful tools for you as a developer it is worth reading this article just for that!
It is great for checking code quality using the links under the "tools" section, for example!
The second extension is more for this demonstration, but still useful to have for social media to remind you about alt attributes!
Tool 1 - Web Developer
Web Developer for Google Chrome provides you with loads of utilities for testing web pages.
It is awesome! Add it to your tool kit today.
Tool 2 - Social Visual Alt Text
Social Visual Alt Text takes the alt description for images and displays it visually on the page.
It does this for Twitter, Instagram, Facebook and Tweet Deck.
Add it to Chrome also.
Although the first plugin allows you to display alt text, it doesn't work properly with Twitter (which is why we need this second plugin). Twitter is where we are going to demonstrate the problem as it is far more obvious there!
The Twitter test!
Ok so have you installed those two extensions?
Great, now before leaving this page you have one tiny task.
Look for the cog icon in your extensions toolbar (light grey colour, circled).
Click on it and select the "images" tab at the top.
Now select the first item in the list "Disable all images".
You should now see a green tick next to "disable all images" (circled).
You should also see a green notification appear at the bottom to let you know images are disabled (shown by the arrow).
You are all set! All I want you to do is try and use Twitter for two minutes and make sense of it!
Go on, head over to Twitter, just for a minute or two!
So what was it like?
(20 minutes later I presume?)
Important Reminder: Don't forget to go back to the Web Developer plugin (the cog) and allow images again!
So, now that you have wasted some time on Twitter, what was it like?
Did you see loads of code examples shared as images that were non existent to you? Did people share pictures with no context and you have no idea what they are on about?
Did it look something like this?:
It is an awful experience isn't it?
Yup, that is the problem you are causing for a lot of people by not adding alt text.
Hopefully you also came across a few good alt descriptions!
I hope you got to see how detailed descriptions of images in context can let you enjoy the same information and experience!
That is all I wanted you to see, I hope it has shown you why it is important!
This is a barrier to equality we can do something about really easily with a big impact!
Leave the Social Visual Alt Text plugin on
I would encourage you to leave the social media plugin on as a reminder as it doesn't get in the way and you soon get used to it. (We all forget, yes even me with years working in accessibility!)
In fact, I find it useful as sometimes (not often!) someone adds some alt text that explains where a building is, what piece of art something is etc. that otherwise I would not know!
And who knows, the Social Visual Alt Text plugin might encourage you to (gently) nudge a few of your favourite peeps on Twitter to add alt descriptions to their images when you keep seeing the red bars on their content!
That's a wrap!
That is all!
Let me know whether you had a good or bad experience using Twitter without images (I think I know the answer 😋) in the comments!
I have two follow up posts queued around this subject.
One on how to add good alt descriptions.
The second is on how sites such as DEV, Twitter etc. can make adding alt descriptions more natural, loosely based on my post on a What You See Is What You Get editor (WYSIWYG) that I built for DEV.
The WYSIWYG has a little alt description process included as a concept (I linked straight to the relevant part)!
You could use that for your DEV.to articles if you write them!
p.s. does anyone know if you can add alt text to cover images on DEV using front matter or something? It annoys me I can't do that! I seem to remember seeing a Github issue on the Forem repository about it, but I can't find it now.
Top comments (11)
p.s. although I am writing an article on it, it is worth noting that to add alt text to an image on twitter you:
That is it. 15 seconds work and millions more people can enjoy your cat pictures!
I can read "I MADE CSS ART". I suppose I need to stop my reading there?
Yup, that was the whole article, nothing to see here! 😜
nice one, I love the rounded and the smooth corners you added to your one-color rectangle. Also the fact that you didn't add such corners to the bottom make it a bit unexpected.
It is modern art. It is called “Chaotic cut off”
The following piece of art sold for $1.1 million so I am hoping to get at least $2 million due to the rounded corners!
“Blood red slots” by Gerhard Richter
If you can make the radius equal to 3.14159em I will get it for $2.5 million !!
Thanks for valuable information.
Hope it was useful!
Just found you on Twitter and seen your post on Macaw Tabs, added to my weekend reading list as that looks interesting!
Thanks for your appreciation.
TIL how to add alt in Twitter. Thanks.
Yes, it isn't as obvious as you would hope! Glad you found it useful ❤