Missing alt on non-text elements

Description

The rule flags any img, area, input type="image", or element with role="img" that is missing an alt attribute (or any other mechanism that provides an accessible name).

In short: if the element conveys information visually, it must also convey that information textually. Otherwise assistive technologies have nothing to announce.

Disabilities impacted

• Visual impairments: blind users (screen-reader), low-vision users (screen-magnification with speech), color-blind users (when color is the only cue).
• Cognitive disabilities: people who turn images off to reduce cognitive load, or who rely on text alternatives to understand icons / metaphors.
• Motor impairments: speech-input users who call images by their accessible names (click Search) and switch users who navigate by cycling through labelled objects.

Why it matters

• Without alt text the element is unreachable, unusable or incomprehensible to who depend on AT.
• It also breaks voice control, search-engine indexing, and users on slow connections who disable images.

Coding problems and solutions

Common coding problems

• <img src="hero.jpg"> – no alt at all.
• alt="" used on informative images (treated as decorative).
• alt="image" or alt="logo" – generic, non-descriptive.
• CMS editors leave the field empty.
• Dynamic avatars injected via JavaScript without updating alt.
• SVGs or CSS background images that convey meaning but are not programmatically labelled.

How to fix it

<img src="chart-revenue.png"
     alt="Bar chart showing 30 % revenue growth in Q3 2024">

<img src="divider-wave.svg" alt="">
<!-- or better: background-image in CSS -->

<a href="search.html">
  <img src="search.svg" alt="Search">
</a>

<img src="flowchart.png"
     alt="Flow chart of customer journey described below">
<details>
  <summary>Long description</summary>
  <div>Full text explanation</div>
</details>

<img src="floorplan.png" usemap="#map" alt="Office floor plan">
<map name="map">
  <area shape="rect" coords="0,0,50,50"
        href="kitchen.html" alt="Kitchen">
</map>

<button type="button">
  <i class="icon-close" aria-hidden="true"></i><span class="visually-hidden">Close dialog</span>
</button>

Known limitations

• The rule skips elements that are hidden from AT (aria-hidden="true", display:none, etc.) or visually hidden when the audit is run with skip hidden enabled.
• SVGs that already have an accessible name via title element, aria-label, or aria-labelledby are not flagged even if they lack alt (which is invalid on svg).

Resources

• MDN Web Docs – The Image Embed element
• W3C Web Content Accessibility Guidelines (WCAG) 2.1 – Non-Text Content

Rule

• Audit: Accessibility.
• Standard: WCAG 2.1
• Level: A.
• Success Criteria: 1.1.1 Non-text Content
• ID: missing-alt-attribute