Writing Effective Alt Text for Images

Alternative text (alt text) is a short description added to images via the alt attribute in HTML. It provides a textual equivalent for non-text content, ensuring screen reader users understand the image’s purpose or content.

Images convey meaning that text alone might not — charts, photos, icons, etc. Without alt text:

• Screen reader users miss critical information (e.g., a photo of a doctor with a patient).
• The experience is incomplete for users with low vision or slow connections (images off).

Alt text supports WCAG Success Criterion 1.1.1 Non-text Content: All non-text content must have a text alternative that serves the equivalent purpose (except in specific cases).

Alt Text Is Contextual, Not Just Descriptive

Write alt text based on the image’s purpose in the page context:

• For informative images: Describe content and function.
• For decorative images: Use empty alt text (alt=””) so screen readers skip them.

Avoid:

• Generic phrases like “image of” or “photo of” (screen readers announce “graphic” automatically).
• File names (e.g., “doctor.jpg”).
• Redundant text already in nearby captions.

Best Practices

1. Be concise (under 125 characters ideally; longer is okay if needed).
2. Describe context and relevance E.g., “UAMS physician consulting with patient via telehealth video call” (conveys action and setting).
3. For functional images (e.g., icons in buttons): Describe the action, not the icon (e.g., “Search” for a magnifying glass).
4. For charts/graphs: Summarize key takeaway + data details.

Good vs. Bad Examples

Image: Photo of a doctor and patient. Bad: “doctor photo” or “img001.jpg” Good: “UAMS physician discussing treatment options with patient in clinic”

Resources for Further Reading

• W3C WAI: Images Tutorial — Comprehensive decision tree and examples.
• WebAIM: Alternative Text — In-depth rules and examples.
• The A11Y Project: Alt Text — Quick tips and checklist.
• Harvard University: Writing Effective Alt Text — Practical pre-writing tool.
• What is Alt Text? [How to use it for SEO and Accessibility]
• Write helpful Alt Text to describe images