Are you using alt text properly?
Inconsistent use of alt text is one of the most common problems found in our web audits. These golden rules make your alt tags more useful to your site visitors and mean your site is more likely to be legally compliant. These rules are aimed at content editors but may also be useful for anyone producing content on the web.
Rule 3: Active images require descriptive alt text.
Rule 4: Images that contain information require descriptive alt text.
Rule 5: Decorative images should have empty alt text.
You might never actually see the code of the page when you are editing your web site or when you are adding new content, instead you will probably use a CMS (Content Management System) of some kind. Whatever you are using to add content to your web site, when you add an image you should get asked for "alt text" or a text alternative (it may be called slightly differently, but you should be asked for some kind of name for the image, chances are this is the alt text).
What is the reason for alt text?
Not all users can see the images. Disabled visitors to your site may be using assistive technology like screen readers or other text to speech software which reads the page out loud, and this software will read the alt text instead of the image. There are other situations when the alt text is used too, e.g. if a user has images turned off (e.g. because they use a very slow internet connection – still happens occasionally!) then they will see the alt text instead of the image.
There are other ways how images can be implemented, e.g. it is possible to use CSS styles to add background images, but this is usually done by the front-end developers and not by content editors, and will therefore not be covered as part of this article. We will concentrate on alt text of traditional <img> images here.
There is no exception to this. The <img> element must always contain the alt= attribute. It doesn't matter what the image is used for, or what it shows, or even how small it is.
What text you should use for the alt attribute depends on the type of image and is explained below, but you always include either alt="" (empty alt text) or alt="descriptive text" (descriptive alt text).
In other words, you almost never describe what the picture looks like, instead you explain the information the picture contains.
The alt text for this image should be alt="Twitter" or similar (depending on the context and how the image is used), but it should not be "blue bird" or anything similar. Sounds obvious? I have seen several sites that did include descriptions of what the image shows in the alt text of an image, usually on sites that had made an effort to improve accessibility but misunderstood the requirement.
When deciding how to make an image accessible, first you need to choose which type of image it is from the above list.
What is an Active image?
It is quite easy to check if an image is active or not: An "active" image is an image that performs an action or has some functionality. The most common example is a link image, i.e. where an image is the only content of a link.
Note: When a single link contains an image as well as text then this doesn't count as an active image here.
If the image is not an active image (type 1 above), then you need to check if it contains information or not.
Sometimes this is easy, e.g. a chart or graph will contain some information, or an image of text contains information. Unfortunately this is not always straight forward, in some cases you will need to use your judgment to decide if an image contains information or not. The essential question is, would the user miss something if you remove the image? If the user would miss out on some information without the image, then it is a "type 2" image. If the image is just for decoration, or if the same information is already in the text somewhere, then it is a decorative image (type 3).
If an image contains information, then you need to offer this information to the user in an alternative format. If the user can't see the image, they need to get the information in another way. The alt text should be a brief description of the information.
If you do need to use images of text, then in almost all cases the alt text will be the text shown in the image. After all, that's usually the information the image contains!
Graphs and charts usually contain a lot of information, too much to include as part of the alt text, as the alt text should be kept very brief. There will be a separate article here that looks at complex images.
If the image is not an active image (type 1), and if it doesn’t contain information (type 2), then it is a decorative image. Images that are only for decoration should not have any (descriptive) alt text, instead you should use the empty string as alt text.
Even if the image is for decoration, it still must have the alt attribute (remember rule 1!), but it doesn't contain any text. If you read somewhere that certain images should have no alt text, what is meant is that the alt text should be empty. To repeat: Never define any <img> without the alt= attribute!
If the alt attribute contains no text (alt="") this tells screen readers to ignore the image. Screen reader users don't need to know about decorative images, it would just add to "audio clutter" on the page, so by assigning an empty alt text to an image the screen reader is told to ignore it.
Stefan Sollinger is an Accessibility and Usability consultant in the web team at AbilityNet.