WebAIM: Alternative Text

WebAIM: Alternative Text
Alternative Text
You are here:
Articles
> Alternative Text
Introduction
Alternative text is a textual substitute for non-text content in web pages. This article is focused on
images
, but its principles also apply to multimedia and other non-text content.
Alternative text serves several functions:
Screen readers announce alternative text in place of images, helping users with visual or certain cognitive disabilities perceive the content and function of the images.
If an image fails to load or the user has blocked images, the browser will present the alternative text visually in place of the image.
Search engines use alternative text and factor it into their assessment of the page purpose and content.
Although technology is getting better at recognizing what an image
depicts
, algorithms alone cannot understand what an image
means
within the context of the overall page. A maple leaf might represent Canada, or it might just illustrate the leaf of a tree. Web page authors must provide alternative text that represents the
content
and
function
of their images.
Alternative text can be presented in two ways:
within the
alt
attribute of the

element
within visible body text near the image, or when the text equivalent cannot be presented succinctly, alternative text can be presented on a separate page, linked from either the image or a text link adjacent to the image
Thus, alternative text is about more than just the
alt
attribute.
Every
image should have an
alt
attribute, even if it's
alt=""
(sometimes called "null" alternative text).
Context is Everything
Consider this image of Ellen Ochoa:
This image may need vastly different alternative text depending on how it is used.
Note
To best present these principles of alternative text, most images within this article have been given
alt="example image"
. However, the content of the images is typically presented within page context.
Example 1
As the first Hispanic woman to go to space, and, later, the first Hispanic director of Johnson Space Center, Ellen Ochoa is widely regarded as a role model.
What would you choose as
alt
text for the image in Example 1?
"Astronaut Ellen Ochoa"
"Image of Ellen Ochoa, Astronaut"
"Ellen Ochoa, the first Hispanic woman to go into space"
Empty
alt
attribute (
alt=""
First, consider its
content
and
function
. An image only has a function if it is linked (or has an

within a