Agencies
Services
Image Accessibility
People who are blind can’t see the images on web pages or in documents. Instead, assistive technologies read “alternate text” in place of images. The good news is that adding alt text to your images is easy – but writing good alt text takes some thought. The key is not to describe the image, but to communicate what it means.
Quick Tips
- Ask yourself, “what does this image communicate to someone who sees it?”
- If the image shows words, those words should probably be in the alt text.
- Don’t include unnecessary words like “image”, “logo”, "button", etc.
- If the image is a button or link, indicate what it does or where it goes.
- If the image doesn’t communicate anything, mark it as decorative.
- Remember that context matters.
- Be concise!
Examples
- Images of Text – Use real text if you can, but if you can’t, include the text shown in the image in the alt text.
- Logos – Use name of the organization and/or the text shown in the image, e.g., “Seal of the State of Illinois”, “DoIT: Illinois Department of Innovation & Technology”, etc. Don’t include the word “logo”.
- Photos – If the photo communicates something important, give it a brief description, e.g., “Governor Pritzker at the State of the State Address”. Don’t describe unimportant details. If the image is explained in the text before or after it, mark the image as “decorative”.
- Charts/Graphs – If you have the data, put the name of the chart/graph as the alt text AND include a table with the data after the image or link to it on another page. If you don’t have the data, use the name of the chart/graph AND an explanation of the important trends in data as the alt text.
- Maps/Diagrams/Screenshots - Include the name of the map/diagram/screenshot AND an explanation of the important points it is meant to communicate.
- Links/Buttons/Icons - Use alt text that indicates where the link goes or what the button/icon does, e.g., “Save”, “Next”, etc. Don’t include the words “button”, “link”, “icon”, etc.
- Decorations - For images that don't communicate anything important, like background, borders, etc., mark them as "decorative" (in Word), "artifact" (in PDF), or alt="" (in HTML).