Alternative Description for Images and Images of Text
- Christina Lutz-Hatfield
Table of Contents
Overview
Provide meaningful alternative description/text for images. This helps users who rely on assistive technology such as a screen reader to understand the meaning of the image.
The screen reader will read out the ALT description to the user.
Example:
<img src="womens_history_month_hero_image.png" alt="View the 2019 Women's History Month Opening Ceremony">
In this case the screen reader will announce the image as follows “View the 2019 Women's History Month Opening Ceremony"
General Guidelines
Screen reader users should be provided with meaningful alt text for non-decorative images.
Screen reader users should be able to bypass decorative images that have no meaning.
Text should be used to convey information rather than images of text.
Enable people who require a particular visual presentation of text to be able to adjust the text presentation as needed.
Images that Have Meaning
A non-decorative image is a graphic that has meaning.
It could include important text that needs to be conveyed to a screen reader user who is unable to see the image.
For example a department logo where the department name is part of the image.
Here the department name is part of the image.
The ALT text for this image should be:
<img src="sfhsa-logo.svg" alt="San Francisco Human Services Agency">
Decorative Images
Decorative images that don’t present important content or text should have null/empty alt text. Or in the event that ALT text is redundant.
Screen readers will ignore and bypass these images all together.
Example of Decorative Images:
Code Example: <img src="images/icons.png" alt="">
SVG Images
Provide screen reader users with alternative text for Scalable Vector Graphics (SVGs).
Example - Basic Non-Inline SVG Images:
In this case the role=”img” attribute is used to let screen reader users know that it’s an image.
An alt attribute is also included in the image tag.
<img role="img" src="images/logo.svg" alt="San Francico Arts Commission" />
Example - Inline SVG Images:
When using inline SVG images you also need to include a <title> attribute that serves as the alternative text instead of an alt attribute.
<svg role="img" version="1.1" xmlns="http://www.sfanimalcare.org/images/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
<title>San Francisco Animal Care and Control</title>
<path d="M19,39v-1h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19v-2h10v2h0.5c0.3,0,0.5,0.2,0.5,0.5S29.8,38,29.5,38H29v1h0.5
c0.3,0,0.5,0.2,0.5,0.5S29.8,40,29.5,40H29c0,0-1.4,3-5,3s-5-3-5-3h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19z M20,39h8v-1h-8
V39z M20.2,40c0.2,0.3,0.4,0.5,0.7,0.8c0.8,0.8,1.9,1.2,3.2,1.2s2.3-0.5,3.2-1.2c0.3-0.2,0.5-0.5,0.7-0.8H20.2L20.2,40z M20,37h8v-1
h-8V37z M16.1,7.8c-0.1-0.2,0-0.5,0.2-0.7c0.2-0.1,0.5,0,0.7,0.2l1.6,3.2c0.1,0.2,0,0.5-0.2,0.7c-0.2,0.1-0.5,0-0.7-0.2
C17.7,11,16.1,7.8,16.1,7.8z M30.2,7.4c0.1-0.2,0.4-0.4,0.7-0.2c0.2,0.1,0.4,0.4,0.2,0.7L29.5,11c-0.1,0.2-0.4,0.4-0.7,0.2
c-0.2-0.1-0.4-0.4-0.2-0.7C28.6,10.6,30.2,7.4,30.2,7.4z M23.1,6c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v3.2c0,0.3-0.2,0.5-0.5,0.5
s-0.5-0.2-0.5-0.5V6z M10.8,11.9c-0.2-0.2-0.2-0.5,0-0.7c0.2-0.2,0.5-0.2,0.7,0l2.3,2.4c0.2,0.2,0.2,0.5,0,0.7
c-0.2,0.2-0.5,0.2-0.7,0C13.1,14.3,10.8,11.9,10.8,11.9z M7.9,17.7c-0.3-0.1-0.4-0.3-0.4-0.6c0.1-0.3,0.3-0.4,0.6-0.4c0,0,0,0,0,0
l3.1,0.8c0.3,0.1,0.4,0.3,0.4,0.6c-0.1,0.3-0.3,0.4-0.6,0.4c0,0,0,0,0,0C11,18.5,7.9,17.7,7.9,17.7z M39.7,17.7l-3.1,0.8
c-0.3,0.1-0.5-0.1-0.6-0.4c-0.1-0.3,0.1-0.5,0.3-0.6l3.1-0.8c0.3-0.1,0.5,0.1,0.6,0.4C40.1,17.4,40,17.6,39.7,17.7z M35.7,11.3
c0.2-0.2,0.5-0.2,0.7,0c0.2,0.2,0.2,0.5,0,0.7c0,0,0,0,0,0l-2.3,2.4c-0.2,0.2-0.5,0.2-0.7,0c-0.2-0.2-0.2-0.5,0-0.7c0,0,0,0,0,0
L35.7,11.3z M18.8,34c0-5.5-4.8-5.5-4.8-12.6c0-5,4.5-9.4,10-9.4s10,4.4,10,9.4c0,7.1-4.8,7.1-4.8,12.6H18.8z M28.2,33
c0.2-1.8,0.8-3,2.1-4.7l0.4-0.6c1.6-2.1,2.2-3.5,2.2-6.3c0-4.5-4.1-8.4-9-8.4s-9,3.9-9,8.4c0,2.7,0.6,4.2,2.2,6.3l0.4,0.6
c1.3,1.7,1.9,3,2.1,4.7C19.8,33,28.2,33,28.2,33z M21.4,15.9c0.3-0.1,0.5,0.1,0.6,0.3c0.1,0.2,0,0.5-0.3,0.6c-1.8,0.7-3.2,2.2-3.9,4
c-0.1,0.3-0.4,0.4-0.6,0.3c-0.2-0.1-0.4-0.4-0.3-0.6C17.6,18.4,19.3,16.7,21.4,15.9z"/>
</svg>
Writing Effective an Meaningful ALT Text
Here are some general guidelines to follow when providing Alt text. Alt text should:
Provide meaningful ALT text for images that have meaning and include text.
Do not include the words “image of”. Screen readers will by default announce that it’s an image.
Do not include the file name as the ALT text.
Be succinct. Typically no more than a few words or a short sentence.
NOT be redundant or provide the same information as text within the context of the image.
NOT use the phrases "image of ..." or "graphic of ..." to describe the image. A screen reader already tells the user this information.
For complex diagrams, charts, maps and graphs a text based equivalent needs to be provided either within the context of the page, such as in an adjacent data table. The alternative text can also be provided by linking to a separate web page that provides the longer description of the complex image.
Examples of descriptive and meaningful Alt text
<img src="../images/city_seal.png" alt="City and County of San Francisco">
<img src="../images/dem_hero_image.png" alt="About the Neighborhood Emergency Response Team">
Examples of non-descriptive Alt text:
<img src="../images/city_seal.png" alt="image of city logo">
<img src="../images/dem_hero_image.png" alt="em_hero_image.png">
Additional Information on Writing Effective Alt Text
Please see additional information on writing effective ALT Text.
Use Text to Convey Information Rather Than Images
Present the information as text rather than using an image.
Enable people who require a particular visual presentation of text to be able to adjust the text presentation as needed. This includes people who require the text in a particular font size, foreground and background color, font family, line spacing or alignment.
This does not include text that is part of a picture that contains significant other visual content. Examples of such pictures include graphs, screenshots, and diagrams which visually convey important information through more than just text.
This benefits:
People with low vision (who may have trouble reading the text with the authored font family, size and/or color).
People with visual tracking problems (who may have trouble reading the text with the authored line spacing and/or alignment).
People with cognitive disabilities that affect reading.
Please see more detailed information on how to comply with this guideline.