Alternate text for images is the first standard or practice that comes into mind when we talk about accessibility. People think adding an alternate text for images is as simple as providing an alt attribute. I don’t want to argue if it is simple or complex at this point. I want to leave it up to the readers but come to a conclusion after reading this article. 1.1.1 Non-text content of WCAG 2.0 mandates that every image should have an alternate text.
Before we dive into the alternate text, let’s understand how many types of images we often see on WebPages.
- Contextual or informative images
- Functional Images
- Image maps
- Decorative or spacer images
- Background images
Contextual images
Provide accurate and appropriate alternate text for all contextual images. Ensure that the same content in alternate text is not adjacent to the image. This makes the content redundant. If such content is provided adjacent to the image, provide empty alt attribute. In certain cases a heading of Products is provided in the page and an image representing the products will be placed adjacent to it, providing the alternate text such as “Products” make the screen reader repeat the same word twice.
For representing the image of a person provide only the name of the person as alternate text. Do not add “image of†or “Photo of” to the alternate text as screen readers will take care of the role of the element.
For describing any product or a peripheral of a product take care to provide accurate alternate text. Decide if the context of the image represents the product or only a peripheral of it and provide the alternate text accordingly. For grouped images provide alternate text for the first image or the prominent image and leave the remaining images with alternate text as null.
Ensure that the alternate text is decided upon the context not the image. The same image can have different alternate text depending on the context in which it is provided.
Functional Images
Functional images are those which are associated with some action. An image used as a button is an example of functional image.
For the images that are used as buttons provide the alternate text which represents the action associated with it. Eg, submit, cancel, continue.
For the images that are associated with the links such as those in the navigation ensure that either the link description or alternate text are available. Providing both of them makes the content redundant. The alternate text or link description should be similar to the image. If the image shows “services” the alternate text should be services only, it should not be “services we offer”, “Our services” etc. Also avoid the words such as “link to” along with the alternate text as announcing the role will be taken care by the screen reader.
For the images with arrows that represent previous or next, alternate text such as “Next”, “Previous” should be sufficient. Adding the content that appears at the target of the link will be better. Eg: “Next link description” will be more appropriate than “Next”. Avoid using the alternate text such as “Next lesson 2” while in lesson 1, it is implied that next will be lesson 2 while the user is in lesson 1.
For the icons with links do not use the word “icon” along with the alternate text. Icons representing PDFs, external websites can have the alternate text such as “PDF”, “External website” to inform the users. If these images are coded as background images provide empty alternate text and provide the information to the screen reader user with off screen text methods.
Image maps
Provide appropriate alternate text for image map. Also provide appropriate alternate text for each hotspot of the client-side image map. If the main image is just a container for the image map and does not provide any information use empty alternate text. Avoid using server-side image maps as providing alternate text for server-side image maps is very complex.
Decorative Images
Images that are used for pure decoration, that does not provide any information to the users or used for separations, spacers should have empty alternate text. Use alt=””. Do not miss alt attribute completely. If alt attribute is missed completely some screen readers read the source of the image which does not be of any use to the screen reader user.
Images that are used as bullets for format should have empty alternate text.
Background Images
Avoid using background images. Instead use CSS for providing the same appearance. If background images are used provide empty alternate text for them.
Benefits of having accurate and appropriate alternate text
- Screen readers will be able to read the context of the image for blind and visually challenged users.
- If the images fail to load or the users disable the images to load on the browser the text alternates are displayed on the web page.
- Search engines will be able to perceive the context of the image and helps in page ranking.
Content to be avoided for alternate text
The following ways of representing the alternate text should be avoided.
- Avoid using “Image of”, “Picture of” or “Graphic of” along with the alternate text unless it is a real photo and the user need to know that. Screen readers will prefix the word “Graphic” for every img tag.
- For Logo images that are linked to the home page should be provided with the website name. Adding “Logo” is not necessary.
- Avoid using the alternate text such as “Spacer” or “Separator” for decorative/background images.