Alt text for Accessibility | Examples, Tips & Best Practices

Why Alt Text is Non-Negotiable

Screen reader lifeline for 285M+ visually impaired users

More than 285 million people worldwide live with visual impairments, according to the World Health Organization.
For these users, alt text is not an option; it is necessary. Screen readers will use alt text to narrate images, graphs, and other visual cues so the user can understand the content without sight. 

If you do not want to use accurate ALT text then you are providing a big group

Legal requirement under WCAG/ADA compliance

Alt text is also a compliance requirement. The Web Content Accessibility Guidelines (WCAG) 2.1 success criterion 1.1.1 states that all non-text content must have a text alternative that serves an equivalent purpose (W3C).

In the U.S., the Americans with Disabilities Act (ADA) has been used to enforce accessibility standards for websites, with multiple lawsuits citing missing or inadequate alt text as a violation.
Using automated checks like the Accesstive Access AI Audit can help identify and fix these issues before they become legal risks.

The 5-Second Alt Text Rulebook

Character limits that work (under 125 chars)

Screen readers, for example JAWS and NVDA, typically pause after about 125 characters, which may end up truncating longer alt text.  

A good rule of thumb is to tell the user about the image meaningfully in under 125 characters so that the users can get the meaning in about five second.

Must-include vs. must-avoid phrases

Key elements to include: necessary details for objects, people, activities, and context. For example: "A golden retriever puppy playing with a red ball on a grassy field."

Key elements to avoid: phrases such as "image of" or "picture of", as screen readers will already announce this as an image. Avoid providing unnecessary, redundant detail that does not add meaning.

When to use empty alt tags (decoration vs. content)

If an image is purely decorative, such as background flourishes, borders, or stock icons, use an empty alt tag: alt="".
This tells assistive tech to skip the image, reducing noise for users (W3C).
For content images that add meaning, always write a descriptive alt text that matches the purpose of the image in context.

Alt Text That Converts

SEO benefits without keyword stuffing

Search engines index alt text, which helps your images appear in Google Image Search and improves overall page relevance.
Include primary keywords naturally, focusing on human-readable descriptions rather than stuffing phrases.

E-commerce examples that increase sales

Clear alternative text can help improve conversions in e-commerce. Here is an example:

• Bad: "Product image"
• Best: "Black leather office chair with adjustable height and lumbar support"

Describing products in detail not only helps shoppers using screen readers, it also enhances the visibility of products in search results.

Social media alt text hacks

Platforms such as Instagram, Twitter (X), and LinkedIn provide the option of custom alt text for images.

Write brief, engaging alt descriptions that suit your post's tone while being accurate. This improves accessibility & increases discoverability for niche hashtags and trends.

Complex Images Decoded

Data visualization: Discuss trends, not pixels

When crafting alt text for charts or graphs, identify key take-aways and then avoid describing each individual dataset.

Example: "A line graph depicting consistent sales growth from Q1 to Q4."

Infographics: Layered description approach

Many infographics contain several images and pieces of text. Use brief alt text to summarize the overall topic and provide a longer description somewhere else in the text or on a linked page for further information.

Memes/art: Capturing tone & humor

Alt text for memes or art should indicate the emotion, tone, or joke, not just the visuals.

Example: "meme of a shocked cat with text that reads, 'when you forget alt text exists.'" This ensures accessibility while maintaining impact.

The Alt Text Testing Toolkit

Screen reader simulation

Test alt text by navigating your site like a screen reader user:

• NVDA – Free Windows screen reader.
• VoiceOver – Built-in for macOS and iOS devices.

Automated checkers

Run quick audits to catch missing or incorrect alt attributes:

• WAVE – Highlights alt text errors directly on the page.
• Google Lighthouse – Checks accessibility along with performance and SEO.
• Access Monitor – Provides accessibility scoring and WCAG checks.
• Access Accy – It’s a website-wide conversation agent that helps visitors navigate your site, find answers, and understand accessibility features.

The "eyes closed" user test

Manually verify clarity and relevance:

• Close your eyes and have someone verbally read the alt text.
• If you can visualize the use in under 5 seconds, it is effective.
• If not, you can always rewrite for clarity and context.

Beyond Basics

Dynamic image handling

Modern frameworks like React and Vue often load images dynamically, which can create accessibility gaps if alt attributes are overlooked. To keep alt text effective and consistent:

• Pass alt attributes via props in your custom components so the text remains editable and localized.
• Use lazy-loading libraries (e.g., react-lazyload) that preserve the alt attribute during deferred loading.
• Test with simulated slow connections or throttled network speeds to confirm that alt text is still announced by screen readers even before the image loads. For a full checklist of elements to verify during testing, see our website accessibility checklist.

When to use ARIA over standard alt

Not all visual elements are standard <img> tags, especially in complex interfaces. In those cases:

• Use aria-label or aria-labelledby for elements like SVG icons, background images, or custom components that convey important meaning.
• Avoid replacing a standard <img alt="..."> with ARIA unless there’s no <img> present. The alt attribute is still the most reliable method for images.
• Follow the W3C ARIA Authoring Practices to ensure correct roles, states, and properties for maximum compatibility. If you’re aiming for WCAG 2.2 Level AA compliance, our WCAG 2.2 checklist covers ARIA usage in depth, and for eCommerce-specific accessibility rules, check our ADA compliance for eCommerce websites guide.

Conclusion

Writing effective alt text is more than a compliance task, it’s a way to improve accessibility, SEO, and user experience for everyone. 

By following character limits, avoiding redundant phrases, describing complex visuals with clarity, and testing with the right tools, you ensure your images work for all users.

Start your free trial with Accesstive today to discover how expert alt text strategies can enhance accessibility and boost conversions. Pro-level techniques like dynamic image handling and selective ARIA usage will also make your site future-ready and fully inclusive, keeping you compliant with WCAG 2.2 and ADA standards.