Skip to main content

WCAG 1.1.1 — Non-text Content

A

Every image, icon, and non-text element must carry a text alternative that conveys the same meaning. The cost of getting this wrong is invisibility for screen-reader users.

What this requires

Every non-text element that conveys meaning must have a text alternative that serves the equivalent purpose. Decorative images must be marked as such so assistive technology can skip them. The standard applies to images, icons, charts, captchas, and any embedded content that conveys information through anything other than text.

How AI coding tools fail this

When asked to "add an icon button" or "show a chart", AI assistants frequently generate icon-only buttons with no accessible name. The visual affordance is correct; the assistive-tech affordance is missing. The same pattern shows up with inline SVGs (generated without role="img", aria-label, or <title>) and with decorative images auto-captioned with filenames like hero-2.png.

The failure mode is consistent: AI tools optimise for "the thing renders", not for "the thing has a name a screen reader can announce".

Edge cases

  • Decorative images must use alt="" (empty), not be omitted entirely.
  • Inline SVG icons need role="img" and aria-label, or aria-hidden="true" if purely decorative.
  • CSS background images carrying meaning need a DOM-level text alternative. The criterion applies to information, not delivery method.
  • CAPTCHAs need an alternative form that doesn't depend on a single sense.

How Jeikin handles this

Jeikin's CLI scanner flags <img> without alt and icon-only buttons without an accessible name, then maps each finding to WCAG 1.1.1. The MCP server tells the connected AI tool why the pattern fails before the fix lands, so the next generation gets it right by default.

The dashboard tracks each finding through resolution with a timestamped audit trail: evidence a regulator or client can inspect.

References