Definition
Alt text, or alternative text, is a brief textual description added to HTML image tags to explain the content or function of an image on a webpage. It serves as a textual alternative for users who cannot view images—whether due to visual impairments, browser settings, or accessibility tools like screen readers.
Why It Matters
Alt text is more than just an accessibility feature—though that’s a major reason to use it. It also contributes to SEO and user experience:
- Accessibility: Makes websites usable for visually impaired visitors using screen readers.
- SEO Benefits: Helps search engines understand image content, improving your chances of ranking in image search results.
- Site Performance: Provides a fallback when an image fails to load—users still know what should be there.
Key Components of Good Alt Text
- Relevance: Describe what’s important about the image in the context of the content.
- Clarity: Use concise, specific language—avoid vague or generic phrases like “image” or “graphic.”
- Keyword Optimization (without stuffing): Include relevant keywords if they naturally fit.
- No “Image of…” or “Picture of…”: Screen readers already announce it’s an image, so skip redundant phrasing.
Best Practices
- Keep it under 125 characters for compatibility with screen readers.
- Focus on what the image conveys, not just what it is.
- Skip alt text for purely decorative images.
- Make sure every image has an alt attribute, even if it's left empty for non-essential visuals.
- Avoid keyword stuffing—only include relevant terms if they make sense in context.
Real-World Example
Scenario: A florist’s homepage features a hero image of a vibrant bouquet.
- Bad Alt Text: "flowers"
- Good Alt Text: "colorful spring bouquet with tulips and peonies in a glass vase"
The good example not only helps visually impaired users understand the image but also aids search engines in indexing the photo for relevant search terms like “spring bouquet” or “tulips and daffodils arrangement.”