Image Accessibility Essentials: Alt Text, Contrast, Motion
Updated October 01, 2025
Make visuals understandable and comfortable for all users—small steps with big impact.
Why it matters
Accessible images help screen‑reader users and anyone on slow connections or small screens. It’s also the simplest way to widen your audience.Alt text fundamentals
- Describe function, not just appearance
- Keep it concise; avoid ‘image of’
- If decorative, use empty alt (alt='')
Contrast and legibility
- Text over images needs sufficient contrast
- Prefer large, readable fonts in overlays
Reduce motion & flashing
- Avoid rapid flashing; respect ‘prefers‑reduced‑motion’
- Offer static alternatives where possible
Checklists you can reuse
- Alt present and meaningful
- Contrast pass
- No unnecessary motion, or motion reduced
Action steps
- Export one sample in two formats and compare at 100% zoom
- Rename with dimensions for clarity
- Archive originals for future re‑exports
Alt Text Patterns
- Functional images: describe the action (e.g., “Open menu”).
- Informational images: summarize the key point (e.g., chart trend).
- Decorative: empty alt (alt='') so screen readers skip it.
Designing for Everyone
- Avoid color‑only cues; pair color with icons or labels.
- Prefer large, readable fonts in overlays and test on small screens.
- Respect prefers‑reduced‑motion for users sensitive to motion.
Quick Audit You Can Reuse
- Is alt text present and meaningful or intentionally empty?
- Does overlay text meet contrast guidelines?
- Are animations subtle or disabled for reduced-motion?
Updated Oct 01, 2025
Accessibility that improves SEO and user trust
Accessible images are easier for screen readers and also help search engines understand your pages. Good alt text describes the function or meaning of an image, not every pixel detail.
- If an image is decorative, consider empty alt text so it isn’t read aloud.
- If an image is informative, describe the key message (what a user needs to know).
- If text appears inside an image, include the text content in the alt description where appropriate.
Alt text examples that help real users
Good alt text explains what the image contributes to the page. It should be short, specific, and focused on meaning, not decoration.
- Product photo: “Black running shoes with white sole, side view.”
- Chart: “Line chart showing monthly signups rising from January to June.”
- Button icon: “Download image” (if the icon triggers an action).
Accessibility improvements often raise trust: when images fail to load or users rely on assistive tech, your page still communicates clearly.
Alt text that sounds natural
Alt text works best when it reads like a short description a helpful person would say. Avoid stuffing keywords; instead, describe what matters: the subject, the action, and any critical text or data.
For images that function as buttons or links, describe the action (“Download the resized image”) rather than the icon’s shape.
Accessible images reduce support issues
When images fail to load or users browse with assistive tools, accessibility prevents “blank” experiences. Clear alt text also helps when images are shared or referenced out of context.
For data-heavy images, consider adding a short text summary near the image so the information is still available without relying on the pixels alone.
Accessibility that supports conversions
Accessible content isn’t just about compliance—it helps users complete tasks. When images fail to load or when users skim quickly, clear text alternatives keep the page understandable and reduce drop-off.
If an image contains instructions (like “Step 1, Step 2”), include the steps in text nearby so the guide still works without the image.
Photographer angle: captions and alt text preserve context
If your photo relies on context (location, event, subject), a short alt description helps people understand the image when it fails to load or is shared out of context. This is especially helpful for editorial and documentary work.
Accessible content survives broken images
When images are blocked or fail to load, good text alternatives keep pages usable. This is especially important for instructional pages where the image carries steps or labels.
Accessibility that improves UX
Alt text is most useful when it describes the purpose of the image, not its pixels. If the image is decorative, keep alt empty; if it carries meaning, describe that meaning plainly.
For charts or instructions, add a short text summary near the image so the information survives even if the image doesn’t load.
Alt text patterns that read naturally
Alt text works best when it’s short, specific, and focused on meaning. A good pattern is: subject + action + key detail.
- Good: “Blue mug on a wooden desk beside a laptop.”
- Bad: “Image of a mug, desk, laptop, coffee, wood, office…”
If the image is decorative, leave alt empty. If it’s a button, describe the action (“Download compressed image”).
| Image type | Alt text approach | Example |
|---|---|---|
| Informative photo | Describe content and context | Person using a laptop at a cafe |
| Functional (button/link) | Describe the action | Download PDF report |
| Decorative | Empty alt="" | alt="" |
| Complex (chart/graph) | Short alt + longer description nearby | Bar chart: Q3 revenue. See table below. |
| Text within image | Reproduce the text | Sale: 50% off all items |
| Logo | Company name + "logo" | Acme Corporation logo |
Frequently Asked Questions
How do I write good alt text for images?
Good alt text describes the image's content and purpose in the context it appears. For informative images: describe what is shown and why it matters — "Bar chart showing Q3 revenue up 23% vs Q2." For functional images (buttons, links): describe the action — "Search" not "Magnifying glass icon." For decorative images that add no information: use empty alt text (alt="") so screen readers skip them. Avoid "image of" or "photo of" — screen readers already announce it's an image. Be concise — 100 characters is usually enough.
What WCAG contrast ratio do images need to meet?
WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text within images (text smaller than 18pt or 14pt bold) and 3:1 for large text (18pt+ or 14pt+ bold). Decorative images with no text don't have a contrast requirement. Non-text visual elements that convey information (icons, charts, UI controls) need a 3:1 minimum contrast ratio against adjacent colors under WCAG 2.1 Level AA. Use tools like WebAIM's Contrast Checker or browser DevTools to verify ratios.
When should I use an empty alt attribute?
Use empty alt (alt="") for purely decorative images that add no information value — background patterns, decorative dividers, stock photos used only for visual atmosphere. This signals to screen readers to skip the image entirely, which reduces noise for visually impaired users. If you're unsure whether an image is decorative, ask: if the image were removed, would any information be lost? If no, it's decorative. Never omit the alt attribute entirely — that causes screen readers to announce the filename, which is confusing.
How should I handle animated images for accessibility?
WCAG 2.2 requires that any content that blinks or animates for more than 5 seconds must be pausable, stoppable, or hideable by the user (Success Criterion 2.2.2). For GIFs and CSS animations: provide a pause control or limit animation to less than 5 seconds. Content that flashes more than 3 times per second can trigger seizures in people with photosensitive epilepsy (WCAG 2.3.1). Test with the Photosensitive Epilepsy Analysis Tool (PEAT) if you have flashing content. When in doubt, avoid autoplay animation.
Do images in CSS backgrounds need alt text?
CSS background images cannot have alt text — they are not part of the HTML document structure and are invisible to screen readers. This is actually appropriate for purely decorative background images. However, if a CSS background image conveys meaningful content (e.g., a hero banner with a key message as part of the image), that information must be provided elsewhere in the HTML — as visible text, a visually-hidden span, or an aria-label on the containing element. Never use CSS backgrounds for informative images that don't have a text equivalent.