- All images must have an ALT tag and alternative text that describes them.
- Describing images: write effective alternative text:
- Decorative images
At ASU, all images must have alternative text that describes them (unless they are decorative, in which case they must have an empty [or NULL] ALT tag).
Supplying concise and equivalent alternate text enriches your content, sites and apps for all users and types of devices, such as:
- Screen readers and other machines (such as search engines) can't read images and rely on text alternatives.
- Users with low vision who need to enlarge the screen depend on alternate text, which often scales better than graphic text.
- Some users with cognitive impairments find text easier to interpret than images.
Alternative text can be added in one of three places on the page:
1. In the ALT tag
|2. In the surrounding content
were having a good time, when
a man in a pink tutu appeared and
3. In a caption
On images described in captions or the surrounding content, the ALT tag is left empty (or NULL), similar to decorative images. (The underlying code would look like:
<img scr="images/bullet.gif" ALT=" "/>)
Regardless of where the image is described, all images must have an ALT tag (also called an ALT attribute). The ALT tag contains the alternative text for an image. The exception is complex images like infographics, maps, graphs, and charts, which use both the ALT tag and a long description and are covered in the Accessible Complex Image Guidelines.
Effective alternative text can be difficult to write. As a rule of thumb, alternative text should describe the content and function of the image, while taking the context into account.
There's no need to identify the element as an image in the ALT tag (e.g., "Image of an apple" or "ASU logo"). Screen readers already announce the element type as a graphic (VoiceOver) or an image (JAWS).
Content images are those that convey meaningful information or content. Knowing how much description to give about an image can be difficult. Ask yourself what key points the image is trying to convey, and explain in as few words as possible, without sacrificing the meaning or intent of the image.
|Inequivalent content||Equivalent content|
Seat belts are comprised of a buckle and a tongue.
ALT tag: "Seat belt"
Seat belts are comprised of a buckle and a tongue.
ALT tag: "Insert the seat belt tongue into the buckle"
ALT tag: ASU football fans.
ALT tag: Football stands filled with ASU students,
ALT tag: A student
ALT tag: Undergraduate student performing an
Try not to use images that contain text. (Graphic text doesn't scale well for users with low-vision who must increase the page size, and search engines, screen readers and other assistive devices cannot read text in images.)
However, sometimes using graphic text is unavoidable. In these cases, your alternative text usually should be the same as the text in the image.
|Image with graphic text||Equivalent alternative text|
|Hayden 50 - Celebrating our past, building our future|
|Best Colleges U.S. News Most Innovative 2019|
When writing alternative text, context is of the utmost importance.
For instance, consider this photo of Daniel Boone's home. If the surrounding content is an article about famous houses around the nation, it may be enough to identify the house: "Daniel Boone House in Defiance, Missouri." If the article is about 19th-century building techniques, it might be more appropriate to say: "The Georgian style Daniel Boone House in Missouri was built in 1800 from hand-hewn limestone blocks." Again, if the content is a club newsletter, the event may be of more importance: "Club members visiting the Daniel Boone House."
Let context dictate what you include in alternative text.
Some images not only supply content but perform a function as well. In these cases, it's usually more important to describe the function of the image than the content or appearance.
An image that's used only for visual effect is called a decorative image. Decorative images convey no meaningful information or are used strictly to enhance the visual appearance of a page.
Decorative images must still have an ALT tag, but it is left empty (or you can input a single space). Screen readers and other technologies will recognize the empty ALT tag, identify the image as decorative and skip over it.
To determine if an image is decorative: Ask yourself what information would be lost without the image. If none, it's decorative. For instance, all of the images below are decorative:
Call us at 480-965-0000.
|The stock photo of a woman smiling conveys no information and has no function. It is strictly eye candy.|
|The horizontal line separates content visually. It conveys no new information and has no function or meaning beyond appearance.|
|Don't forget to watch our calendar of events!||The image is used to visually highlight a block of text and has no real meaning beyond appearance.|
Rich-text toolbars (also called WYSIWYG or formatting toolbars), like this one from Canvas, make uploading images much easier.
Meaningful images: When uploading meaningful images to a page using a rich-text toolbar, always add an equivalent text description in the ALT field.
Decorative images: If a checkbox is available to indicate the image is decorative, check it and leave the ALT field blank. (If there isn't a way to indicate the image is decorative, you can input a single space in the ALT text field.)
"Title" field: If there is a title field, don't use it (the exception is if there is no ALT field). The TITLE tag displays as a tooltip, which obscures content and can confuse users.