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. Here's the key:
Don't describe what the image looks like, communicate what it means.
Quick Tips
- Ask yourself, “what does this image mean to someone who sees it?”
- Remember that context matters.
- If the image shows words, probably include those words.
- Don’t include unnecessary words like “image”, "header", “logo”, etc.
- If the image doesn’t mean anything, mark it as decorative.
- Be concise!
Examples
- Images of Text – Try to avoid putting text in images. If you have to, include the text shown in the image in the alt text.
- Logos – In most cases, logos just indicate who a page or document belongs to. To communicate the same meaning, just use the name as shown in the image, e.g., “Seal of the State of Illinois”, “DoIT: Illinois Department of Innovation & Technology”, etc. Don’t describe what the image looks like or include the word “logo”.
- Photos – If a photo communicates something important, give it a brief description, e.g., “Governor at the State Capitol”. Don’t describe unimportant details. If the image is explained in the text before or after it, or is just a decoration, mark it as “decorative”.
- Charts/Graphs – If you have the data, include a table with the data after the image or link to it on another page -- remember, lots of people may appreciate seeing the numbers. If the chart/graph is so complex you can't include the data, describe the important trends, e.g., "First quarter sales chart: Sales started slow but improved through the quarter, rising from 100 in January to 1000 by March."
- Maps/Diagrams/Screenshots - Include the name of the map/diagram/screenshot and an explanation of the important points it is meant to show.
- Links/Buttons/Icons - Use alt text that indicates where the link goes or what the button/icon does, e.g., “Save”, “Next Slide”, etc. Don’t include the words “button”, “link”, “icon”, etc.
- Decorations - For images that don't mean anything important, like backgrounds, borders, etc., mark them as "decorative" (in Word), "artifact" (in PDF), or alt="" (in HTML).