A young woman in a mustard yellow sweater and purple skirt gestures with her right hand in front of stylized computer interface panels. The text "Alternative Text" is displayed in bold, dark letters below her.

Breadcrumb

Designing for All: Why "Alternate Text" Matters

Alt text (alternative text) is a description that provides visual information to individuals who cannot see images. It is an essential accessibility feature that allows screen readers to communicate image content to users with visual impairments.

A hand holding a heart with people inside, next to a speech bubble that says Impact.

Importance of Alt Text

Alt text makes digital content accessible to individuals with visual impairments by providing descriptions for images. It ensures inclusivity, supports users with cognitive disabilities, and aligns with web accessibility standards to create a better online experience for everyone.

A hand pointing at an exclamation mark icon beside a speech bubble that says Importance.

Impact of Alt Text

By using alt text, we enable screen readers to convey image content, helping users navigate websites more effectively. It ensures that important visuals like charts, graphs, and infographic are accessible, making digital spaces more inclusive and user-friendly.

Best Practices for the Alternative Text:  

Writing alt text requires careful consideration to ensure the image’s message is communicated clearly. Here are some best practices for writing effective alt text: 

  • Avoid Starting with “Image of…”: Screen readers already inform the user that the content is an image, so starting with “image of…” is redundant. Instead, directly describe what the image is showing. 
  • Examine the Image Closely: Consider what the image communicates in the context of the surrounding content. What would a user miss if they couldn’t see the image? Only mark the image as decorative if it doesn’t convey any meaningful information. 
  • Describe the Image’s Function if Linked: If the image serves as a link, include alt text that describes the link’s function, such as "Click here for more information" or "View product details." 
  • Include Text in the Image: If the image contains text (such as a chart or infographic), include the text in the alt text to ensure that users with visual impairments don’t miss out on essential information. 
  • Address Complex Images with Brief and Long Descriptions: For complex images, like infographics or detailed charts, start with a brief description in the alt text and then provide a long description that includes any essential text or data. This ensures that the user gets both a quick overview and the full content. 

See below for additional information on:

Additional Tips 

For more information, check out the WCAG 2.2 (Text Alternatives) for detailed guidance on ensuring your web and document content is fully accessible. 

How to use Alternative Text: