What is alternative text?
Have you ever experienced an image not loading, and instead, there is text that tells you what the graphic should have been? That is alternative text (alt text). It often displays when a graphic or image fails to load.
What you aren't experiencing is behind the scenes at all times.
Alternative text (alt text) conveys information for accessibility purposes. Screen readers use alt text to relay information to users who are visually impaired by recognizing an image or graphic and reading the alt text associated with it.
Images and graphics are an important part of content. They make text more engaging and easier to understand, especially for visual learners. They also serve as orientation cues for users with visual impairments. When images are placed strategically and paired with alternative text, they add significant value.
Writers of alt text can shape the experience of screen-reader users.
Decorative images
Wait! Not every image requires descriptive alt text. Purely decorative images that don't convey meaningful content or serve a functional purpose should not feature alt text. An empty identifier (depending on your platform) is often used to tell the screen reader to skip the image.
Examples of decorative images include:
- Flourishes and decorative borders
- Background textures and patterns
- Spacer images used for layout
- Repeated icons used for visual styling only
- Images that are already described in adjacent text
When in doubt about whether an image is decorative, consider if a person would miss important information if the image were removed. If nothing meaningful would be lost, use empty alt text.
Creating effective alt text
Screen readers recognize images and announce them automatically. Avoid beginning your alt text with "Image of..." or "Photo of..." as this creates redundancy when the screen reader announces "Image, Image of..."
Good alt text uses correct grammar with a capitalized first letter and appropriate end punctuation (usually a period). Even if it isn't a complete sentence, it should end with a period to create a pause for the screen reader.
The goal is simple: A user should understand the full meaning of an image from the alt text alone. If the image was removed and replaced with a missing image icon and just the alt text, would you still understand what the image conveyed?
General guidelines
Effective alt text describes the image as simply and clearly as possible:
- Aim for brevity: Keep descriptions under 100 characters when possible (a general maximum of 125-140 characters works for most platforms)
- Skip redundant phrases: Don't include "image of" or "photo of" since screen readers already announce the element type
- Be comprehensive: Every image on your website or document that provides essential information or context should have appropriate alt text
- Focus on relevance: Describe what matters in the context of your content
- Include diversity details: When relevant, include race, gender, age, and other characteristics that create visibility and representation
- Consider user needs: Always put yourself in the position of someone who cannot see the image
- Use proper punctuation: Even short descriptions should have a capital letter and end with a period
- Test your work: If possible, listen to your alt text with a screen reader to experience it as users would
Examples of good alt text
For a collection of watches:
"Eight colorful analog watches lined up and displaying different times."
For a person using a laptop:
"Black woman wearing glasses and highlighted by the glow of a laptop covered with colorful stickers."
For an animated GIF:
"Animated GIF of puzzle pieces and three team members representing working together collaboratively."
For a form screenshot:
"Screenshots of the first two pages of the IRS Form 1040 showing where to find key information."
Different types of visuals
Simple images
For photographs and simple illustrations, focus on the main subject and any relevant details.
Infographics
Summarize the key information presented in the infographic, prioritizing the most important data points.
Charts and graphs
Describe the type of chart, the variables being compared, and the overall trend or key findings.
Slideshows
Create separate alt text for each slide, focusing on the unique content of each.
Interactive elements
Describe the purpose of the interactive element and what kind of information users can expect to find.
Tips for specific content types
Text-based graphics
If the text on the graphic is under your max character count: Use the exact text that appears on the graphic.
If the text exceeds your max character count: Create a concise summary of the information in the graphic.
Charts and data visualizations
Include the chart type, key metrics, and main takeaway. For example: "Bar graph showing salary ranges for medical specialists, with median salary of $46,660 and range from $29,430 to $74,200."
Maps
Describe the geographic area and what the map is showing. For example: "Map of the United States showing median salaries by state, with highest salaries in coastal regions."
Writing tips for clarity
- Be specific: Provide the same information that a sighted person would get from the image
- Keep it concise: Only describe elements that serve a purpose or have a function
- Use plain text: Don't add formatting like bold or italics
- Avoid assumptions: Don't interpret emotions unless necessary for context
- Don't use file names: Always provide fully developed alt text
Handling abbreviations
Screen readers interpret abbreviations differently, so:
- Use standard format for abbreviations read as complete words (FAFSA, NASA)
- Consider using periods to separate letters in initialisms (I.R.S., P.H.D.)
- Ensure the abbreviation will be familiar to users
- Avoid abbreviating state names
Quality checklist
Before publishing content with images, review these alt text criteria:
- Does the alt text accurately describe the image's content and purpose?
- Is it under the recommended character limit for your platform?
- Does it avoid redundant phrases like "image of"?
- Does it use proper grammar, capitalization, and punctuation?
- Would it make sense if the image were missing?
- Does it provide equivalent information to what a sighted user would see?
- Have you used empty alt text (alt="") for purely decorative images?
- For complex images (charts, infographics), have you captured the essential data?
- Does your alt text avoid unnecessary interpretation or assumptions?
Legal framework and WCAG standards
Following proper alt text practices isn't just good for users—it's also important for compliance with accessibility laws and standards. The Web Content Accessibility Guidelines (WCAG) provide specific requirements for alt text:
WCAG 2.2 requirements for images
- 1.1.1 Non-text Content (Level A): All non-text content has a text alternative that serves the equivalent purpose, with specific exceptions for decorative images, controls, time-based media, tests, sensory experiences, CAPTCHA, and content that cannot be presented in text.
- 1.4.5 Images of Text (Level AA): If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text, with exceptions for essential images (like logos) and customizable text.
- 1.4.9 Images of Text (No Exception) (Level AAA): Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed.
Key standards to follow
- Functional images (buttons, linked images, charts) must have alt text that describes their purpose or content.
- Decorative images should have empty alt text (alt="") to be properly ignored by screen readers.
- Complex images (charts, diagrams, maps) require thorough descriptions, potentially using extended descriptions in addition to alt text.
- Images of text should be avoided when possible; actual text should be used instead.
- CAPTCHA alternatives must be provided for different types of sensory perception.
Final thoughts
Good alt text is an essential part of creating accessible content. By following these simple practices, you ensure that all users, regardless of visual ability, can fully access and understand your content. Remember that alt text isn't just a technical requirement—it's about creating an inclusive experience for everyone.