Why Alt Text is Important
Alternative text, or alt text, is a textual substitute for images in web pages and digital documents. Alt text serves several purposes:
- It conveys the function and purpose of the image to users who depend on screen readers. An image without alternative text doesn’t exist for a visually-impaired user.
- It improves the experience for a user with a slow internet connection. If an image fails to load, the browser will present the alternative text visually in place of the image.
- Search engines factor alt text into their assessment of a page’s content.
Alt text is therefore an important part of all digital content.
When is Alt Text Needed?
If an image conveys information useful for interacting with or understanding the page content, then it needs alternative text.
Examples:
- a graph or chart
- an icon image that functions as a link
- a photo pertaining to what is covered in the text content
If an image is purely decorative, then it does not need alternative text (called null alt, or alt="" in the code).
Examples:
- a decorative scroll divider
- a pretty photo added only to break up long text
Writing Useful Alt Text
Let’s assume your image is not decorative, and therefore needs alternative text. Here are some tips for writing helpful alt text:
Context and Focus
What important information does the image convey to a sighted user in the context of your page or article? That should be the focus of your alt text. Always begin your text with the most important aspect of the image, and then add in any relevant details to fill out the description.
Brevity and Style
It is best to limit your alt text to 1-3 sentences. Write clear, succinct sentences with precise language and proper punctuation. Don’t try to put complex formatting like bulleted lists into your alt text; screen readers will not recognize them.
But my image is too complicated to describe in three sentences.
Sometimes charts, graphs, or other complex images need more description. In such cases, include a brief summary of the image either in a caption, or in the body of your page or article, near where the image is located. You can also include a simple HTML table of the data used in the chart or graph. Both of these options will provide additional ways for all users to understand the complex image, not just those who use assistive technology.
If you cannot fit a longer description or data table into your page or article, instead provide a link out to a separate page where this information can be found. Ensure the link text makes the purpose of the link clear.
Quick Tips and Notes
- Don’t start with “An image of…” or “A picture of…” This is redundant information because screen readers announce the presence of an image already. Exceptions might be specifying that an image is a painting or a sketch, perhaps in the context of an art lesson or another situation where that info is important.
- For icons that function as user interface components, the alt text should convey what the icon does, not what it looks like. For example, a typical search icon’s alt text would be “Search,” not “Magnifying glass.”
- Images of text should be avoided whenever possible. But for images that have important text in them, always put that text in the alt text. An exception might be a logo with text.
Examples
Here are some alt text examples and variations using images related to accessibility.
Informative Image 1: Braille Device
Alt Text:
A person’s hands operate a computer using a refreshable braille device and a standard keyboard.
Notes:
If this were in an article about the different braille devices available, you might specify that this is an electronic notetaker with braille display. You might even name the brand. But in the context of a general article about accessibility, that information is extraneous.
Photo by rivage on Unsplash.
Informative Image 2: Service Dog
Alt Text:
A man and a black service dog on a leash walk through a sunny airport. The dog is wearing a yellow harness that says “Canine Companions.”
Notes:
What the dog is wearing is described, but not what the man is wearing. The focus of this image is clearly on the dog.
This photo was part of a series taken in an airport setting. Although that information might not be obvious or important in all contexts, it is included here because doing so doesn’t add too many words to the alt text.
Photo by Jeswin Thomas on Unsplash.
Complex Image: Line Graph
Alt Text:
A line graph depicting screen reader use by percentage on the y-axis, over the time period of January 2009 to January 2024, on the x-axis. The data in the graph is described in more detail in the main text of the article.
Notes:
The important information not covered in the alt text should be summarized or described within the text of the article. For example:
The 2024 screen reader usage survey results show that JAWS, long the most popular screen reader, has fallen to 60% use in January 2024, which is below NVDA’s 65%. This is only the second time over the last 15 years that JAWS has not been the most popular. VoiceOver, which started out at below 10% use back in 2009, has risen to just above 40% in 2024. Narrator was only included in the survey starting in 2017, when it had 20% use. As of 2024 it is up to 38%.
Additionally, the raw data can be provided in a table that is fully accessible to screen readers, without the interpretation typical of a summary.
Complex Image: Cartwheel Galaxy as captured by the Webb Space Telescope
Occasionally, an image’s purpose is to just be beautiful and awe-inspiring, and visually-impaired people shouldn’t be left out. When the Webb Space Telescope started sending back images in 2022, NASA understood that short, dry alt text couldn’t possibly convey their beauty. NASA provided rich, detailed, scientifically-accurate alternative text so visually-impaired people could appreciate the complexity and wonder of the universe too!
Image and text description courtesy of NASA; CC by 2.0
Image Description by NASA:
A large galaxy on the right, with two smaller companion galaxies to the left 10 o’clock & 9 o’clock. The large galaxy dominates the frame. It resembles a ghostly wheel with diffuse blue-white spokes revolving around a glowing core. The outer edges of the wheel are faint dots of yellow, pink and blue, with some gaps in between. The bottom right edge is marked by a large 8-pointed star. The smaller galaxies on the left look very different from each other. The top galaxy appears to be constructed of the same yellow, pink, & blue speckles as the larger galaxy’s outer ring, with a similar light blue core. Its shape is less recognizable as a spiral; it looks like a chaotic oval smattering of dots. The galaxy below it glows blueish, but its nucleus and spiral structure are apparent, and we are looking at it face-on. Sprinkled in the black background are specks of pink, blue, yellow & orange, which are distant galaxies.
Need additional guidance?
How to Add Alternative Text
Microsoft Word and PowerPoint
Right click on the image and select “Edit Alt Text” from the pop-up menu. This will open the Alt Text pane, where you can enter your alt text. Or…
Select the image. On the top menu, go to ”Picture Format.” On the ribbon, choose “Alt Text.” This will open the Alt Text pane.
Google Docs
Right click on the image and select “Alt Text” from the pop-up. This will open the Image options sidebar. Alt Text is the last option in the sidebar. Enter your alt text in the Description box. Or…
Select the image. Press Ctrl + Alt + Y (or Cmd + Alt + Y) on your keyboard to open the Image options sidebar. Or…
Select the image. On the options bar, select the Image Options kebab menu and choose “All image options.” This will open the Image options sidebar.
Google Slides
Right click on the image and select “Format options” from the pop-up. This will open the Format options sidebar. Alt Text is the last option in the sidebar. Enter your alt text in the Description box. Or…
Select the image. In the ribbon, choose “Format options” to open the Format options sidebar.
Brightspace Page Editor
Select the image. On the options bar, choose the image icon to open the Insert/Edit Image dialog box.
On the Insert/Edit Image dialog box, you can check the box to indicate the image is decorative and needs no alternative text. Or, enter your alt text in the “Alternative description” field.
Adobe Acrobat Pro
It is always best to add alternative text in the source file before exporting as a PDF. However, if you don’t have access to the original file, alt text can be added in Adobe Acrobat Pro. (This is NOT possible in the free Acrobat Reader.)
Under the All Tools list, choose “Prepare for Accessibility.” This option will most likely only be visible when you expand the tools list by choosing “View more.”
On the Prepare for Accessibility submenu, select “Add alternate text.” This will bring up the option to scan the document for images. After the scan, use the arrow buttons to navigate from one image to the next and either add alt text to each one, or mark them as decorative.
Note:
If your initial image scan says there are no images, it means they are not tagged. You can fix this by choosing “Automatically tag PDF,” the first option on the Prepare for Accessibility submenu. Once the document has been tagged, then alt text can be added to the images as detailed above.
Adobe InDesign
Select the image. Open the “Object” item in the menu bar and choose “Object Export Options…” to open a new dialog box. Alt Text is the first tab. The “Alt Text Source” dropdown offers several ways to add alternative text. If your image’s metadata already includes alt text, you can set that as the source. But in most cases you will want to choose “Custom,” to enter the text manually in the field, or set the image to decorative.
For more information on how to make the PDFs you export from InDesign accessible, please see Adobe’s help article on
Creating Accessible PDFs.