Adding Context to Visuals
- What: Alternative text (Alt Text) is a brief, written description of an image. It is read aloud by screen readers and displayed if an image fails to load.
- Why: For users with visual impairments, Alt Text is the only way to understand the content and function of images. Without it, a screen reader may simply say “Image” or read out a cryptic file name like IMG_9823.jpg.
- When: Every nice to have and essential image, chart, and icon needs Alt Text
- Check: This is often the most common error on web pages. Use an automated tool to help you find and fix images without alt text. Review Evaluating Third Party Web Content for tips.
Accessible Writing Tip: How to Write Great Alt Text
How to Write Great Alt Text
Alt text should be accurate, concise, and context-aware.
The Phone Test: Imagine you are describing the document to someone over the phone. What would you say about the image to make sure they don’t miss the point?
- Be Concise: Aim for 125 characters or fewer. Most screen readers stop reading after that.
- Context Matters: A photo of a “Student in a blue shirt” is fine, but if the article is about graduation, “Senior student celebrating at Spring Commencement” is better.
- Avoid Redundancy: Don’t start with “Image of…” or “Photo of…” The screen reader already identifies it as a graphic.
- Decorative Images: If an image adds no information (e.g., a divider line or a generic stock photo of a cloud), mark it as “Decorative” so the screen reader skips it.
- Link Images: If the image is a link (e.g., a button that says “Register”), the Alt Text should describe where the link goes (e.g., “Register for the Accessibility Workshop”) rather than what the button looks like.
- Complex Images (Charts and Graphs): If an image is too complex for 125 characters (like a data chart), write a short alt text like “Line graph showing the 10% increase in student enrollment from 2020 to 2026” and a full description directly on the page either as the raw data in a table or a text paragraph immediately after the image.
- Avoid Special Characters: Do not use symbols like double quotes (“), ampersands (&), or brackets (<>). These are used in web coding and can “break” your description or cause the text to cut off abruptly.
Handling Complex Images
Web content often includes data that cannot be described in 125 characters. In these cases, provide a short Alt Text summary and a Long Description directly on the page (like a data table or a text paragraph).
Looking for some examples?
Review our Boise State Webguide deep-dives for common complex visuals:
- Describing Data and Graphs: Tips for turning trends and statistics into accessible text.
- Creating Accessible Flowcharts: How to guide users through complex processes without relying on visuals alone.
- Accessible Infographics: Best practices for making information-heavy graphics inclusive.
- Organizing Your Org Charts: How to structure hierarchical data for screen readers.
- Dashboards and Visualizations: Ensuring interactive data tools remain accessible.
- Bonus! Alt Text Decision Tree: For more examples and guidance, see the alt text decision tree available from the W3C Web Accessibility Initiative site.
How to Add Alt Text on the Web
Most web platforms (Google Sites, WordPress, Canvas) prompt you for Alt Text when you upload an image.
- In your Web Editor: Click on the image and look for “Image Options,” “Settings,” or an “Edit” icon.
- The “Title” vs. “Alt” Trap: Always put your description in the Alt Text field. The “Title” field is often used for “hover text” and is not reliably read by screen readers.
- Write Description: In the alt text field, add the appropriate alt text description for your image’s purpose and context.
Need to add alt text to your documents? Check out Documents: Alt Text for additional tips and guidance.
Mastering Web Accessibility: Image Descriptions
The following video has some tips on how to write alt text depending on the type of image: decorative, nice to have, or essential.
The "Big Five"
On the web, the following areas are often the biggest challenges for accessibility. As a bonus, if your web content has forms, be sure to pay extra attention to them. Learn more about these five areas and how you can build in accessibility from the beginning.
Where can I find Help?
Web Support
- Website:Â Boise State Webguide
- Email: HelpDesk@BoiseState.edu
Instructor and Course Support
- Website:Â Teaching and Learning Knowledge Base
- Email: Belonging@BoiseState.edu
Compliance and General Accessibility Support
- Website:Â Boise State Accessibility
- Email: Accessibility@BoiseState.edu