Why Alt Text Matters
Screen readers can't interpret images — they rely on alternative text (alt text) to convey the meaning of visual content to blind and low-vision users. Without alt text, images are invisible to these users. Alt text also benefits people with slow internet connections or those who have disabled image loading.
⚡ Quick Rules
- Every meaningful image gets alt text
- Decorative images get empty alt text (alt="")
- Don't use images of text when real text works
- Keep it under ~125 characters
- Describe the meaning, not the appearance
Which Images Need Alt Text
Images that convey information or context that is important in order to understand the purpose of the content must have alt text. This includes:
- Photographs that convey information
- Illustrations and diagrams
- Charts and graphs
- Icons that convey meaning (e.g., a print icon, a warning icon)
- Images used as links or buttons
Which Images Don't Need Alt Text
Decorative images — images that add visual appeal but convey no meaningful information — should have empty alt text (alt=""). This tells screen readers to skip the image entirely. Examples include:
- Background patterns or textures
- Decorative dividers or borders
- Stock photos that don't illustrate any specific point
How to Write Good Alt Text
Good alt text is concise and descriptive. It conveys the meaning or purpose of the image in context — not a literal description of every pixel.
Guidelines
- Be concise: usually 125 characters or fewer
- Convey the meaning, not the appearance
- Context matters — the same image may need different alt text in different situations
- Don't start with "Image of…" or "Picture of…" — the screen reader already announces it's an image
- Don't repeat text that's already in the surrounding content
- For functional images (buttons, logos as links), describe the function or destination, not the appearance
Examples
| Image Context | Bad Alt Text | Good Alt Text |
|---|---|---|
| Students studying in the library | "Image of students" | "Three students collaborating at a table in the Doyle Library" |
| A chart showing enrollment data | "Chart" | "Bar chart showing SRJC enrollment increasing 8% from 2023 to 2025" |
| The SRJC logo linking to the homepage | "SRJC logo image" | "SRJC homepage" |
| A decorative wave graphic | (any text) | (leave alt text empty: alt="") |
| A magnifying glass search icon | "Magnifying glass" | "Search" |
Complex Images
For charts, graphs, infographics, or complex diagrams, provide:
- A brief alt text summarizing the image
- A longer description in the surrounding text or in a linked description page
Example: alt text = "Bar chart of SRJC enrollment by department, Fall 2025" — followed by a text summary or data table with the same information.
Alt Text in Different Tools
Every tool has a different way to add alt text. See the Guides section for step-by-step instructions:
- Word Documents — Right-click image → Edit Alt Text
- PowerPoint — Right-click image → Edit Alt Text
- PDF (Acrobat Pro) — All Tools → Prepare for Accessibility → Add Alternate Text
- Websites / Drupal — Fill in the Alt Text field when inserting an image
- Social Media — Use the platform's "Add description" or alt text feature