Alt Text Best Practices: Beyond 'Image of...'

In the realm of digital content, alt text plays a dual role: enhancing web accessibility and contributing to SEO. While many site owners default to the uninspired and nondescriptive 'image of...' format, the potential of well-crafted alt text extends far beyond these generic placeholders.

What is Alt Text?

Alt text, or alternative text, is a tenet of web accessibility designed to describe images to those who cannot see them. These descriptions are read by screen readers, giving visually impaired users a means to understand the content visually. Additionally, alt text is indexed by search engines, making it a factor in the SEO landscape.

Learn more about alt text on MDN Web Docs.

Key Principles of Effective Alt Text

1. Be Descriptive Yet Concise

An effective alt text provides a clear, concise description of the image's content and function. Think of capturing the essence in a sentence or less.

2. Include Keywords Without Stuffing

While alt text contributes to SEO, keyword stuffing is counterproductive. Opt for natural inclusion of relevant terms when they reflect the image's content.

Explore how keywords function and fit in SEO strategy.

3. Context Matters

Describe what is important in relation to the surrounding content. Isolate what the image adds to the page’s message and focus on that aspect.

Example of Poor vs. Effective Alt Text

<!-- Poor Alt Text -->
<img src="cat.jpg" alt="Image of a cat">

<!-- Effective Alt Text -->
<img src="cat.jpg" alt="Tabby cat lounging on a sunlit windowsill">

Common Mistakes and How to Avoid Them

Avoid Redundancy

Including 'image of,' 'photo of,' or 'picture of' is often redundant, as screen readers typically denote elements as images.

Leaving Alt Text Blank

For decorative images, leaving alt text blank is appropriate. Otherwise, this creates accessibility gaps and missed SEO opportunities.

Using Alt Text on Decorative Images

While informative images merit alt text, purely decorative images should use empty alt attributes to inform screen readers that they can be ignored.

<!-- Decorative Image with Empty Alt -->
<img src="curve-design.jpg" alt="">

Technical Considerations

Implementing Alt Text in HTML

Incorporate alt attributes directly within your HTML code for scalability and functionality.

<img src="example.jpg" alt="Description of image">

Responsive Images

Using the <picture> element requires consistent alt text application across image sources.

<picture>
  <source media="(min-width: 650px)" srcset="large.jpg">
  <source media="(min-width: 465px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Responsive image of a busy city street">
</picture>

Alt Text for SEO

Applying alt text aligns with broader SEO strategies like using effective meta tags and optimizing performance indicators such as Core Web Vitals.

Understand Google's perspective on the importance of text alternatives.

Conclusion

By going 'beyond "image of..."', you not only elevate your site's accessibility but also enhance its SEO effectiveness. Consistent application of descriptive, keyword-rich alt text can drive engagement from all visitors, including those relying on assistive technologies. Alt text is more than a token gesture toward compliance; it's a vital part of an inclusive and search-optimized strategy.

Want to see how your website scores? Run a free audit on Webmatik.