Using Alt text
Alt text (alternative text) is a brief description of an image that helps people using screen readers, those with images turned off, or when images fail to load. Writing good alt text is both an art and a responsibility; it ensures everyone can access your content, regardless of how they experience your website.
Alt text serves multiple purposes:
- Accessibility: Screen reader users depend on alt text to understand images
- Fallback: When images don't load due to slow connections or technical issues, alt text provides context
- Context: Helps everyone understand what an image shows when the purpose isn't immediately clear.
How to Write Effective Alt Text
Keep It Short and Descriptive
- One to two sentences, under 150 characters.
- Get straight to the point.
For example:
Be Concise
- Describe what's actually in the image, not your opinion about it.
For example:
Don't Start with "Image of..." or "Photo of..."
- Screen readers already announce that it's an image.
- Jump straight to the description.
For example:
Include Relevant Context
- Think about what matters in the context where the image appears.
For example on in an About us page:
For example on in an venue features page:
Decorative or Informative?
Not every image needs alt text. Before writing alt text, you need to determine whether your image is decorative or informative:
Decorative Images
No Alt Text Needed - The image is just for visual appeal, or the information is already in nearby text.
An image is decorative when:
- It serves only aesthetic purposes
- It's a background image with text overlay
- Removing it wouldn't cause a loss of information
Examples:
- A production hero image with the production title "Hamlet" displayed on top
- A banner background with "Book Now" text overlay
- Generic stock photos used for visual appeal
- Icons next to text labels (when the label says everything)
Informative Images
Alt Text Required - The image provides information that isn't already in the surrounding text.
An image is informative when:
- It provides visual context that enhances understanding
- A screen reader user would miss something without it
- It contains text that's not available elsewhere
Examples:
- Behind-the-scenes photos showing set design details
- Photos of specific people (when names alone don't convey their appearance or action)
- Images demonstrating a feature or space
- Gallery photos showing different aspects of a production or venue
Where to add Alt Text?
In the Dashboard, it depends on where you are adding the image.
- Use the Title field within each image for alt text.
- Use the "Alternative description" field in rich text editors.
- When you insert an image through the text editor, there's a dedicated field specifically for alt text.
Does your image need alt text?
You can also find out if your image needs alt text with our short quiz!
Accessibility Resources for Further Reading
Quick Guides:
- A11Y Project: Using Alt Text Properly - Clear, practical tips
- W3C Alt Decision Tree - Visual decision-making tool
Official Standards:
- WCAG 2.1 Guidelines on Images - The official accessibility standard
Related articles
