Images

Overview

The basic premise of alternative text is to make it so all users can read the same information and have the same interactions with a Web page, regardless of whether or not they can see the images. Alternative text is often used by visually disabled users with screen reading software, where the description of an image is read to the user in place of the image. Alternative text can take a couple of different forms.

Alternative Text Stored in the Alt Attribute

Text can be stored in the alt attribute of the image tag. These are brief descriptions that tell the function this image plays in the page or the information this image is trying to convey.

An Empty String Stored in the Alt Attribute

If an image is used simply for decoration and provides no substantive meaning to the page, the alt attribute can be set to the empty string. alt="" This tells screen readers to skip this image. Leaving off the alt attribute altogether is not correct.

A Contextual Description

Sometimes the function or the information an image is conveying is already present within the text of the page surrounding the image. For example, an image of the Mona Lisa with an accompanying paragraph describing the Mona Lisa would not require a lengthy alt attribute since the information is already present within the context on the page. In this case, the alt attribute could be something simple like "Mona Lisa." That way the screen reader user knows the image is present and knows what it is, and they will be able to discern the information it is conveying from the context.

Tutorials