Accessible Images
Images on a webpage should support the content, not distract from it. Alternative text (alt text) makes images understandable to people who are blind, visually impaired, or using assistive technology. Good alt text communicates the meaning or purpose of an image, not just what it looks like.
Best practices for accessible images
Use images with intention
- Add images only when they support or enhance the content.
- Images should never replace important text. For example, don’t post a flyer as an image without also including the key information as real text on the page.
Place images in logical locations
- Add images before or after a complete sentence, not in the middle of one.
- Avoid placing images inside headings, because it disrupts the heading structure and can confuse assistive technology.
Write meaningful alt text
- Keep alt text concise but specific.
- Describe the purpose of the image, not every detail you see.
- Never use file names or generic labels like image28356, graphic, or picture as alt text.
- Good example: Students meeting to plan Dillo Day (on a Student Engagement site).
- If the image is decorative and adds no information, leave alt text empty (alt="") so screen readers skip it.
Communicate information clearly
- If the image includes instructional text or conveys a clear message, include that same information in the alt text.
- For complex graphics like charts or infographics, provide a full text alternative (such as a linked Word doc or an accessible page section) and write short alt text that points to it.
- Example: Infographic showing student housing statistics. Full text description follows.
Buttons and functional images
- If an image acts as a button or link, the alt text should describe the action.
- Examples: Submit form, Download brochure, Search.