DEV Community

Cover image for πŸ‘€ Using 2 plugins to show you the importance of alt text in just 2 minutes πŸ’‘

Posted on

πŸ‘€ Using 2 plugins to show you the importance of alt text in just 2 minutes πŸ’‘

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">
Enter fullscreen mode Exit fullscreen mode

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).

Cog icon for "Web Developer" plugin (cog has light grey gradient)

Click on it and select the "images" tab at the top.

Images tab located at top of popup window at the 5th position

Now select the first item in the list "Disable all images".

You should now see a green tick next to "disable all images" (circled).

Disable Images with green tick next to it highlighted with red circle around. Arrow pointing to notification at bottom that images are disabled.

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?:

Twitter feed example with 3 images all with no alt text showing and just a red bar instead and various colour backgrounds where the images should be. None of the tweets makes sense without the image as the image is the context and main subject of the tweet

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 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.

Discussion (11)

afif profile image
Temani Afif

I can read "I MADE CSS ART". I suppose I need to stop my reading there?

grahamthedev profile image
GrahamTheDev Author

Yup, that was the whole article, nothing to see here! 😜

afif profile image
Temani Afif

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.

Thread Thread
grahamthedev profile image
GrahamTheDev Author • Edited on

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!

dark red single colour painting, blood red slots by Gerhard richter

β€œBlood red slots” by Gerhard Richter

Thread Thread
afif profile image
Temani Afif

If you can make the radius equal to 3.14159em I will get it for $2.5 million !!

grahamthedev profile image
GrahamTheDev Author • Edited on

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:

  1. add an image to your Tweet as normal.
  2. On the Web app look for "description" under the image, that is where you enter alt text. On the App, look for "Alt" button located to the lower right of the image (iPhone), I have checked a recent version, but on Android I believe it is "Description" and located lower left.
  3. Once you have described the image make sure you press save, it is easy to lose your alt text due to a poorly defined interface.

That is it. 15 seconds work and millions more people can enjoy your cat pictures!

imiahazel profile image
Imia Hazel

Thanks for valuable information.

grahamthedev profile image
GrahamTheDev Author

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!

imiahazel profile image
Imia Hazel

Thanks for your appreciation.

mellen profile image
Matt Ellen

TIL how to add alt in Twitter. Thanks.

grahamthedev profile image
GrahamTheDev Author

Yes, it isn't as obvious as you would hope! Glad you found it useful ❀