Alt Text Accessibility Checker

WCAG 1.1.1 (Non-text Content, Level A) requires that all non-text content presented to the user has a text alternative that serves the equivalent purpose. This covers images, icons, charts, graphs, audio, video, CAPTCHAs, and decorative elements. The text alternative must convey the same information or function as the non-text content. For informational images, this means a descriptive alt text. For functional images (like icon buttons), it means describing the action. For decorative images, it means explicitly marking them as decorative with an empty alt attribute (alt=""). The WebAIM Million study finds missing alt text on 54% of home pages, making it the second most common WCAG violation after contrast failures. This is a Level A criterion — the absolute minimum requirement.

Different image types require different alt text approaches:

• Informational images: <img src="chart.png" alt="Q3 revenue increased 23% to $4.2M compared to Q2"> — describe the information, not the appearance
• Functional images (links/buttons): <a href="/cart"><img src="cart.svg" alt="Shopping cart (3 items)"></a> — describe the action or destination
• Decorative images: <img src="divider.png" alt="" role="presentation"> — empty alt prevents screen readers from announcing meaningless content
• Complex images (charts/graphs): <img src="data.png" alt="Sales by region" aria-describedby="chart-desc"> with a detailed <div id="chart-desc"> containing the full data
• Images of text: The alt text should contain the exact text shown in the image. Better yet, use real text instead of images of text (WCAG 1.4.5)

Common mistakes include generic alt text like "image", "photo", or the filename ("IMG_3847.jpg"), and overly long descriptions that should use aria-describedby instead.

Modern web development introduces new alt text challenges:

• SVG icons: <svg role="img" aria-label="Search"><title>Search</title>...</svg> — use role="img" with aria-label or a <title> element. For decorative SVGs: <svg aria-hidden="true">
• CSS background images: Background images have no alt text mechanism. If the image conveys information, use role="img" and aria-label on the container: <div role="img" aria-label="Team photo" style="background-image: url(...)"></div>
• Icon fonts: <i class="fa fa-phone" aria-hidden="true"></i><span class="sr-only">Phone</span> — hide the icon and add a screen-reader-only label
• Lazy-loaded images: Ensure alt attributes are present on the initial <img> element, not only added after loading. The loading="lazy" attribute does not affect alt text requirements
• Responsive images: <picture> and srcset elements only need alt on the <img> fallback — one alt covers all resolutions

CompliScan identifies multiple categories of alt text violations: <img> elements without any alt attribute, images with empty alt that appear to be informational (based on context analysis), images inside links with no accessible name, SVGs without proper labeling, icon fonts without text alternatives, and <input type="image"> without alt. Each finding specifies the element, its context, and an AI-generated alt text suggestion based on the image's filename, surrounding text, and page context. While CompliScan detects missing alt text reliably, evaluating alt text quality (whether the description is meaningful) requires human review — automated tools catch the structural violation but cannot judge if "A dog" is sufficient for a guide dog training photo. Run a free scan to find all missing alt text on your site, then manually review the suggestions. With the ADA Title II deadline of April 24, 2026 approaching, addressing alt text is one of the fastest compliance wins.