If you use any automated tools to test your website (Nibbler, SiteRay, W3C validator etc), many of them will pick up errors if you haven’t specified any “ALT text” on your images. “ALT text” is an attribute which should be added to any visual item on your web page. It’s mainly used on images to provide a text alternative to the graphical image, as not everyone can view an image. Providing an alternative allows all users to access the same information, whether they can see an image or not.
Here’s an example of some image HTML including some ALT text:
<img src="logo.jpg" width="300" height="200" alt="Silktide Logo" />
If you’re using a Content Management System then you probably won’t have to write the HTML like above when adding images, but you should still be able to insert ALT text into a field provided.
You might think that now you know how to add ALT text into a page that it’s simple, but it’s not just as simple as typing text into a field. To write the best ALT text, you have to consider you audience, and what is the purpose of that image on the page.
Providing alternative image text to people with disabilities
Some of the people using your website might be blind, colour blind, or partially-sighted. Providing an alternative text version of the image allows you to describe the image to these users so that they’re not missing out any important information. In many countries it’s actually law to provide these users access to the same content, and if you don’t account for this you could be discriminating against them.
Blind users will navigate the internet using a screen reader, this will speak out the text on the page. The screen reader will read out the ALT text of the image on your page, so you should make sure it describes the purpose of the image as best as possible.
For text-only web browsers and search engines
A text-only web browser is exactly what it sounds like, it’s a web browser which only views text. All images and styling will be removed, displaying the web page as a list of words and paragraphs of text. People who view websites using these browsers might be doing it for accessibility reasons, viewing it on an older machine or mobile device, or through personal choice.
Using a text-only browser also allows you to see how a search engine will view your website. Search engines like Google will view your website’s text and care very little about the images you use. Instead of viewing the images they will read the ALT text instead, and use this text to rank the pages in its search engine.
Hover-over
Some browsers will display the ALT text when you move your mouse cursor over the image. Remember this is another place where the ALT text might be shown, so make sure it’s concise and related to the image.
Should you use ALT text for decorative images?
Some images might exist only on your page for decorative purposes. Their function on the page might be purely for decoration, and don’t need to communicate anything. If this is the case, you don’t need to provide any alternative text for that image.
You do still need to provide an ALT tag however, but make sure it’s empty, for example alt=”". Doing this will mean that screen readers will completely ignore this image, and they won’t even announce its presence on the page.
It’s definitely better to include an empty ALT tag than to leave the tag out altogether. If you don’t specify an ALT text (even a blank one) most screen readers will instead read out the filename, which isn’t important information.
Should you use ALT text for bullets?
You might use images on your page to look like bullet points. These should be treated the same as decorative images, and have an empty ALT tag, e.g. alt=”". If you have a list of bullets which each have the ALT text “square red bullet”, people using screen readers or text-only browsers will see the words “square red bullet” preceding every line of text in the list. This is unnecessary, so just leave the ALT text blank.
Ideally if you want to use a graphical bullet, this should be applied in your stylesheet, and shouldn’t be an image in the page.
Images containing text
Sometimes you will want to use an image to display some text. Possible reasons for this might be that you want to include a header in a font which isn’t a web font. In this case make sure your ALT text repeats the text in the image word-for-word.
For example the following is an image that contains text:
<img src="tagline.gif" width="300" height="20" alt="Putting your websites to the test" />
Don’t embellish the ALT text or try to add any additional description, as this is confusing and pointless for end users. For example don’t ever write into your ALT text: “Putting your websites to the test, written in blue in a serif font”.
Make sure the text in your ALT text matches the text in the image exactly. Otherwise this additional unnecessary information will be given to people using screen readers or text-only browsers.
Charts, graphs, and other images which contain text
Where possible, you should have all your text present on the webpage, and not in an image. However there might be times when you need to use a chart or graph which is difficult to convert into paragraphs of text. You need to write all of the text contained in the images into the ALT text.
There might be times when you want to display an image on your website which contains far more text than you can reasonably display in the ALT tag. If so, use the “LONGDESC” tag, which was created for this reason. LONGDESC is a link to another page that contains the text of the image. The page doesn’t need to be styled, as it’s only text-browsers and screen readers that will access it.
Using images for navigation
Sometimes you might want to use an image for navigation, so clicking the image will take your users to another page. Like I mentioned above, if the image has any text on, the ALT text should match that text exactly. But if the image doesn’t contain text, the ALT text should describe where the link will take you. For example:
<a href="/downloads/help.pdf">
<img src="download_icon.gif" width="100" height="80" alt="Download help document" />
</a>
Conclusion – Don’t just write anything into the ALT text
There is a skill to writing the correct alternative to an image. Online automated website testers (Nibbler, SiteRay, W3C validator etc) can only detect if you’ve specified an ALT text or not, but they can’t tell if the wording you’ve used in appropriate. Keep your wording concise, and think about the purpose of that image on the page rather than just a description of the image.
