|
Electronic information accessibility tips, tricks and trainings. January 2020, Issue XIII
The Awesomeness that is Alt Text
Images can really enhance a document and make difficult concepts easier to understand. However, if your audience can't see that image, then you need to provide an alternate way for them to get that information. The most common way is by adding alternative text (alt text). Alt text is a text description of the image that assistive technology, like screen readers, can read.
Alt text provides a couple additional benefits as well. Sometimes photos don't load properly online or in emails. If you've included alt text, a text description of your image will still show up. (See example below.)
 Although this email image didn't download, readers still know what the picture is due to the alt text.
Alt text also improves search engine optimization and Google can index it. Basically, this means alt text helps people find your content online and understand it.
Make sure you are including alt text on all your pictures, charts, graphs, shapes, SmartArt graphics, screenshots and embedded objects!
The Art of Alt Text
Creating proper alt text can be more of an art form than a science, so here are a few tips to help.
State the image's purpose and function.
Don’t just describe its appearance. What is the reason you chose the image?
Example: Take the cycling image to the right. Is the purpose to advertise the location? That alt text could be "Two people bicycling next to Lake Superior on the Gitchi-Gami State Trail." Or is the purpose to emphasize safety? That alt text might say "Two bicyclists wearing bike helmets."
|
|
 |
Use clear, concise terms.
Avoid acronyms and use plain language.
Don’t use extra words like "A picture of…" A screen reader already identifies an image by stating "image" before reading your alt text. Exceptions are if it would be helpful to include the image type, such as "screenshot".
Example: The alt text for our agency logo should be "Minnesota Department of Natural Resources logo."
|
|
 |
Keep it short: No more than 250 characters.
Listening to long alt text can be taxing. If you need more space to explain the image, add a caption or use surrounding text.
Example: The pie chart to the right might have alt text of "Pie chart of favorite pies with chocolate as the favorite flavor." Then in the body of the document you would give more details like the percentage break down. Or you might link to the survey data.
|
|
 |
How to Add Alt Text
In Word, Excel and PowerPoint
- Select the image.
- Right-click and select "Format Picture" (or press Alt J, P, O).
- Select the "Layout and Properties" tab.
- Add alt text in the Description box. Do not use the Title box.
In Adobe Acrobat 2017
- Select "Set Alternative Text" from the Accessibility tool pane.
- Enter your alt text in the pop-up box.
- If the image is decorative (adds visual interest but isn't communicating anything), check the box that says Decorative figure. This will artifact the image so it is ignored by a screen reader.
- Select "Save & Close".
- The "Set Alternative Text" tool will display the alt text, if any, for all images in the document. Use the arrows to move between images.
 There are a couple of other methods for adding alt text in Adobe Acrobat 2017, including using the Reading Order tool and the tags panel.
 This alt text would pass the accessibility checker, but doesn't provide any meaningful information about the image.
When the Accessibility Checker Comes Up Short
The accessibility checker evaluates if alt text is added to an image, but it cannot check the quality of that alt text. Your document may pass the checker, but contain less than helpful alt text. If you are reviewing a document you didn't create, make sure you peek at the alt text. You can review and edit the alt text using the same method for creating alt text.
Resources
Electronic Information Accessibility Intranet Page
Go-to location for resources, guidance and information.
Designees
Need assistance? Contact your Division Electronic Information Accessibility (EIA) Designee.
|
