Alt Text is Easy to Test but Hard to Write: Advice from WCAG for Designers

When it comes to accessibility, alt text is one of the most crucial elements—but it’s also one of the hardest to get right. As the saying goes, “alt text is easy to test, but hard to write.” Getting the right balance between clarity, brevity, and accuracy is key to creating accessible web content. In this post, we’ll break down the essentials of alt text, dive into specific guidance on logos and partner logos, and touch on the importance of click and touch target affordance for UI elements.

What is Alt Text and Why is it Important?

Alt text (alternative text) is a short description of an image or graphic that is read aloud by screen readers. It provides users who cannot see the image with important context, enabling them to understand the content conveyed by visual elements. It's not visible on the screen but embedded within the HTML alt attribute. Here's why it's essential:

• Screen reader users rely on alt text to understand the content of images, logos, and icons.
• It benefits SEO by allowing search engines to index the image content.
• Cognitive disability users may turn off images to reduce distractions, but they still need alt text to understand the content.

WCAG Success Criteria 1.1.1: Non-Text Content

WCAG 2.1 Success Criteria 1.1.1 requires that non-text content (like images, videos, and icons) must have a text alternative unless specific exceptions apply. You can find more about these exceptions in the WCAG 2.2 Understanding Non-Text Content document.

Exceptions include:

• Images that are purely decorative (such as spacer images).
• Images used for layout purposes that don’t add to the meaning of the page.
• Images used as links or buttons when the link or button text already conveys the image’s purpose.

For more detailed guidance on these exceptions, check out the WCAG 2.2 Understanding Non-Text Content document.

When Do You Need Alt Text?

Everyone using a screen reader or text-to-speech technology needs alt text, but there are additional cases where alt text becomes essential:

• Cognitive disabilities: Users may turn off images, but they still need alt text to understand the context.
• Logos and partner logos: Logos often include company names or meaningful brand imagery, which needs alt text to convey the image’s meaning.

Writing Effective Alt Text: Tips & Tricks

Writing great alt text requires precision and thoughtfulness. Here are some quick tips for crafting effective alt text:

• Be accurate and equivalent: Describe the image’s meaning and purpose clearly.
• Avoid redundancy: Skip phrases like “image of” or “graphic of.”
• Be succinct: Keep it short and to the point.
• Understand the context: How would a screen reader user experience this image in the context of the content around it?
• Test your alt text: Read it aloud to see if it makes sense in the flow of the page.

Logos and Partner Logos: Special Considerations

When using logos, especially for companies or partners, alt text becomes even more important. Often, logos contain company names or branding that users need to understand.

• If a logo is a link (like linking to a homepage), alt text should provide both the company name and the link’s purpose. For example: "Company Name – Home."
• If a logo doesn’t have accompanying text, it will need alt text to explain who the logo represents. For example: "Google – Link to the homepage."

Logos used as buttons should also include descriptive alt text to communicate their action. Always ensure the alt text reflects the purpose of the logo in context.

Click and Touch Target Affordance: Ensuring Usability

While not directly related to alt text, it’s important to remember the role of click and touch target affordance for images and logos acting as active UI elements.

• WCAG requires a minimum touch target size of 44x44px for clickable elements (though 24x24px is the minimum for touch targets).
• For best practice, we recommend using 44x44px for all clickable icons or images. This ensures both accessibility and usability across devices.

Useful Resources for Writing Alt Text

Here’s a list of valuable resources to help you get better at writing alt text:

1. A11Y Collective - Alternative Text
   This blog post provides in-depth insights into writing alt text, with great examples and practical tips.
2. Section 508 - Create Alternative Text
   A guide from the U.S. General Services Administration on creating effective alt text for web content.
3. Harvard University - Describe Content in Images
   Learn about the importance of alt text and get examples from a leading institution.
4. WebAIM - Techniques for Alt Text
   WebAIM’s resources on alt text best practices and implementation.
5. Moz - Alt Text for SEO
   Moz’s guide to alt text’s impact on search engine optimization.
6. Microsoft’s Guide to Writing Alt Text
   A comprehensive overview from Microsoft on how to write effective alt text.
7. W3C Decision Tree for Alt Text
   This decision tree from the W3C helps you determine when alt text is needed, providing a visual guide to help differentiate between informative, decorative, and functional images. It’s a valuable tool for ensuring you're following best practices for alt text implementation.

‍Conclusion

Alt text is a small but powerful part of web accessibility. With the right techniques, it ensures that everyone, regardless of ability, can access and understand the content on your site. Whether you’re designing logos, images, or interactive elements, taking the time to write thoughtful, accurate alt text will make a world of difference for your users.

Remember, accessibility is a team sport—work with developers and content creators to make sure your alt text is implemented correctly and provides the best experience for all users.