Published May 2026 · Updated May 31, 2026
Approximately 2.2 billion people worldwide have some form of vision impairment, and millions use screen readers — software that converts on-screen content to audio or braille. When a screen reader encounters an image, it reads the alt text aloud. If there is no alt text, it typically announces the file name — "IMG_4821.jpg" — which tells the user nothing. Well-implemented image accessibility means every visitor, regardless of ability, gets the same information from your content.
Beyond the direct user impact, there are legal requirements in many jurisdictions. The Americans with Disabilities Act (ADA) has been consistently interpreted to apply to websites. The European Accessibility Act comes into effect in 2025, requiring digital accessibility for many products and services. The Web Content Accessibility Guidelines (WCAG) 2.1, published by the W3C, are the international technical standard for web accessibility and are incorporated into most legal frameworks by reference. WCAG Success Criterion 1.1.1 requires a text alternative for all non-text content.
From an SEO standpoint, accessible images also rank better. Search engines cannot see images directly — they index the alt text, file name, title attribute, and surrounding text to understand what an image depicts. Images with descriptive alt text appear in Google Image Search, bringing additional organic traffic. Proper alt text also correlates with better overall page relevance signals.
The HTML alt attribute on an <img> element provides a text alternative for the image. It has three possible states, each with a specific meaning:
The missing alt case is the one to avoid entirely. Without the attribute, screen readers fall back to reading the file name or URL, which is rarely helpful. An empty alt (alt="") explicitly signals that an image is decorative and should be skipped. A descriptive alt provides the content and context that a sighted user would get from viewing the image.
alt="" for decorative images. Missing alt is an accessibility failure. Empty alt is correct for decorative content.
An informative image conveys content that is not present in the surrounding text. A photograph on a news article, a product photo in a shop, a portrait on an "About" page — all of these need descriptive alt text that conveys the same information a sighted user would get from looking at the image.
Good alt text for informative images:
A decorative image is one that adds visual appeal but carries no information that affects the user's understanding of the content. Divider lines, background textures, purely aesthetic illustrations, and icons that are duplicated by adjacent text are all decorative. These should use alt="" — an empty alt attribute — so screen readers skip them without wasting the user's time.
The judgment call here is whether removing the image would cause a sighted user to lose meaningful information. If the answer is no, the image is decorative. If yes, it is informative and needs descriptive alt text.
A functional image is one that acts as a link or button. When an image is wrapped in an <a> tag or used as a form submit button, its alt text should describe the destination or action, not the visual content of the image. A logo that links to the homepage should have alt text of "Home" or the site name, not a description of the logo's visual design.
Charts, infographics, maps, and diagrams convey substantial information that a short alt text cannot fully capture. WCAG recommends providing both a brief alt attribute (summarizing the image's purpose) and a longer text description accessible on the page or via a link.
For a bar chart, the alt might be "Bar chart: quarterly revenue 2025–2026" while the long description (in a nearby paragraph or a <details> element) provides the actual data in text form. The goal is that a user relying on assistive technology can access the same data a sighted user extracts from the chart.
<details> element adjacent to the chart. Screen readers can navigate tables natively, giving assistive technology users full access to the data without cluttering the visual layout.
Most screen readers truncate alt text at 125–150 characters. Aim to fit essential information within this limit. If the image conveys complex information that requires more than 150 characters to describe adequately, it is a complex image that needs a long description in addition to the alt text.
The same image may need different alt text on different pages. A photograph of a mixing bowl in a recipe might need alt text describing the technique being demonstrated ("Whisking flour and butter together in a large bowl until sandy"). On a product page selling the bowl, the alt might focus on the product ("5-quart stainless steel mixing bowl with silicone grip base").
If an image contains text — a banner, a chart label, a quote graphic — that text must appear in the alt text. Search engines and screen readers cannot read text that is rendered as pixels inside an image. Text in images is also inaccessible to users who need to resize text or switch fonts for readability. Where possible, render text as actual HTML instead of including it in an image.
Adding irrelevant keywords to alt text — "buy cheap image converter best free tool fast online" — is a violation of Google's Webmaster Guidelines and a WCAG failure. It creates a poor experience for screen reader users and can result in search ranking penalties. Descriptive, natural alt text that accurately describes the image is both more accessible and more beneficial for SEO.
Google uses alt text as one of the primary signals for understanding image content and indexing images in Google Image Search. Pages with well-described images tend to rank higher in image search results for relevant queries. This matters especially for e-commerce sites, recipe sites, and any content-heavy site where images are a significant part of the value.
Beyond alt text, search engines also consider the image file name, the surrounding text, page title, structured data (Schema.org ImageObject), and whether the image is relevant to the page's overall topic. The combination of a descriptive file name (hiking-trail-sunrise.jpg instead of IMG_4821.jpg), a descriptive alt attribute, and a relevant surrounding paragraph gives images the best chance of appearing in image search results.
Google's image guidelines also recommend adding structured data using ImageObject schema for key images, providing width, height, content URL, and a description. For recipe and product pages, structured data can enable rich results in Google Image Search that display additional metadata alongside the image.
Alt text addresses the needs of users with no vision or low vision who rely on screen readers. But other accessibility considerations apply to images for users with color vision deficiencies or cognitive disabilities.
Do not use color alone to convey information. A chart that uses red and green to distinguish data series will be uninterpretable to a significant portion of users (approximately 8% of men have red-green color blindness). Always pair color coding with a secondary indicator — different line patterns, shapes, or labels — so the information remains accessible when color is removed.
Maintain sufficient contrast for text in images. Text that appears on top of an image background must meet WCAG contrast requirements — a minimum ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Semi-transparent overlays or gradients are commonly used to create sufficient contrast between text and photographic backgrounds.
Several free tools can help identify accessibility issues with images on your site:
| Tool | What it checks | How to use |
|---|---|---|
| Google Lighthouse | Missing alt text, decorative images with alt, image contrast | Chrome DevTools → Lighthouse → Accessibility |
| axe DevTools | Full WCAG 2.1 image checks, color contrast, ARIA usage | Browser extension (Chrome/Firefox) |
| WAVE | Missing alt, suspicious alt text, empty alt, contrast errors | Browser extension or wave.webaim.org |
| Screen reader | The actual user experience — how alt text sounds when read aloud | VoiceOver (macOS/iOS), NVDA (Windows), TalkBack (Android) |
Automated tools catch missing alt attributes reliably, but they cannot judge whether alt text is good. A tool can flag alt="image" as technically present but cannot tell you it is meaningless. Manual review — particularly with a screen reader — is the most reliable way to evaluate alt text quality.
| Success Criterion | Level | Requirement |
|---|---|---|
| 1.1.1 Non-text Content | A (minimum) | All informative images have a text alternative. Decorative images have empty alt. |
| 1.4.1 Use of Color | A (minimum) | Color is not the only means of conveying information in images. |
| 1.4.3 Contrast (Minimum) | AA (recommended) | Text in images has at least 4.5:1 contrast ratio (3:1 for large text). |
| 1.4.5 Images of Text | AA (recommended) | Text is used instead of images of text, except for logos and decorative use. |
| 1.4.9 Images of Text (No Exception) | AAA (enhanced) | Images of text are only used for pure decoration. |
Most legal frameworks require WCAG 2.1 Level AA compliance. Levels A and AA together represent the practical baseline for public-facing websites.
Writing alt text for large image libraries — thousands of product photos, an archive of article images — is time-consuming when done manually. AI image captioning models can generate first-draft alt text at scale, reducing the per-image effort to reviewing and editing rather than writing from scratch.
AI-generated alt text is accurate for common subjects: people, objects, animals, food, vehicles, and natural scenes. It is less reliable for images that require domain context — a specific product model name, a named person, a technical diagram, or an image whose meaning depends on surrounding text. The workflow that works best is: generate alt text automatically for all images, then manually review and edit any that require context the model cannot infer from the image alone.
The Free Image Tools AI Alt Text Generator uses Cloudflare's vision AI to generate alt text directly in your browser. It handles one image at a time, giving you an editable draft to review before copying the result into your CMS or code.
Every <img> element needs an alt attribute, but that attribute can be empty (alt="") for decorative images. What you must never do is omit the attribute entirely from a non-decorative image. The distinction is: informative images need descriptive text, decorative images need empty alt, and no image should be missing the attribute.
Alt text should describe the image accurately. If the image is of a product you sell and the product name is a keyword, the product name belongs in the alt text — but because it describes the image, not as keyword stuffing. Write alt text as if you are describing the image to someone who cannot see it, then check whether it naturally contains relevant keywords. It usually will, without any manipulation.
WCAG does not specify a maximum length, but most screen readers announce alt text at the same speaking rate as regular content, so very long alt text makes navigation tedious. Aim to stay under 125 characters for most images. If the image conveys information that genuinely requires more — a complex chart, an infographic — provide the detail in a long description adjacent to the image rather than in the alt attribute.
No. CSS background images (background-image) are invisible to screen readers and cannot have an alt attribute. This is actually the recommended approach for purely decorative images — use CSS backgrounds instead of <img> tags, so you do not need to add or manage an empty alt attribute. For informative images, always use an <img> tag with proper alt text, never a CSS background.
Google uses alt text as one of several signals for image indexing. Descriptive, accurate alt text helps Google understand the image content and rank it for relevant searches. Google's documentation explicitly states that "high quality alt text" helps images appear in search results. File names, page topic, and surrounding text also contribute, but alt text has a direct and significant influence on image search visibility.