Text Alternatives (WCAG 1.1.1)

What is it?

WCAG Success Criterion 1.1.1 (Non-text Content) requires that all non-text content that is presented to the user has a text alternative that serves an equivalent purpose — with specific exceptions for CAPTCHAs, decorative images, sensory content, and test content. This is the most fundamental accessibility requirement for blind and low-vision screen reader users.

Why it matters

Screen readers — software used by blind and visually impaired users — can only process text. Any image, icon, chart, or graphic without a text alternative is completely invisible to a screen reader. This means blind users encounter gaps or confusing announcements (e.g., file names like "IMG_3847.jpg") where meaningful content should be. WCAG 1.1.1 is Level A — the most basic level of compliance and the first place to start.

Best Practices

• Informative images: write alt text that conveys the purpose or meaning of the image, not just a description of what's visually present. "Graph showing 40% increase in user retention" not just "graph."
• Decorative images: use empty alt text (alt=""). This tells screen readers to skip the image entirely. Never omit the alt attribute — omitting it causes screen readers to announce the file name.
• Functional images (buttons, links with images): alt text should describe the action, not the image. A search button with a magnifying glass icon: alt="Search".
• Complex images (charts, diagrams, infographics): provide a short alt description plus a longer description in a nearby paragraph, a details element, or a linked page.
• Icon-only buttons: use aria-label on the button element with a clear description of the action.
• Background images: these cannot have alt text. Never convey essential information via CSS background-image.
• Logos: alt text should be the organization's name, e.g., alt="Stripe logo" or simply alt="Stripe".
• SVG images: either add role="img" and aria-label to the SVG element, or use a <title> element inside the SVG.

Common Mistakes

• Omitting the alt attribute entirely — causes screen readers to announce the image file path or "image".
• Generic alt text: alt="image", alt="photo", alt="icon" — conveys nothing useful.
• Redundant alt text: describing what is visually obvious from surrounding text — doubles up information unhelpfully.
• Alt text on decorative images that describe the decoration: alt="decorative swoosh" — should be alt="".
• Using images of text for headlines or CTAs — the text is inaccessible and can't be resized by user settings.
• Icon-only buttons with no aria-label — screen readers announce nothing or announce SVG attribute gibberish.
• Writing alt text during development rather than design — by then, the image purpose may be unclear.

Checklist

Research & Theory

Real-World Examples