Skip to content
English
Contact us
  • There are no suggestions because the search field is empty.

A: Images must have alternative text (WCAG 1.1.1)

image-alt

Ensure that <img> elements have alternative text or an ARIA role with the value none or presentation.

This means

Every meaningful image needs a descriptive alt text. Without alt text, the purpose of the image remains invisible to screen readers. Decorative images receive no spoken name and are hidden from assistive technologies.

Impact

Without an appropriate name, users do not know what an image conveys. Important information is lost, interactions become unclear, and a WCAG violation is at risk.

Recommendation

  • Content images: assign short, purpose-oriented alt text.

  • Icons in links or buttons: prefer visible text; otherwise use aria-label on the control element or meaningful alt text on the image.

  • Purely decorative images: use alt="" and optionally role="presentation" or aria-hidden="true".

  • Complex graphics: short summary in alt, details as visible caption, e.g., with <figure> and <figcaption> or aria-describedby.

  • Logos: alt text with the name of the organization.

  • No file names, no keyword stuffing, no phrases like “image of”.

Example

Problematic

<!-- No alternative text -->
<img src="team.jpg">
 
<!-- Image carries meaning, but alt is empty -->
<img src="umsatz-2024.png" alt="">
 
<!-- Link only with icon, no name -->
<a href="/download"><img src="download.svg"></a>

Better

<!-- Meaningful image -->
<img src="team.jpg" alt="Team of Musterfirma">
 
<!-- Chart with brief info; details in caption -->
<figure>
  <img src="umsatz-2024.png" alt="Sales 2024 rising from January to June">
  <figcaption>Monthly sales in thousand euros</figcaption>
</figure>
 
<!-- Link with visible text -->
<a href="/download">Download PDF</a>
 
<!-- Icon purely decorative -->
<img src="divider.svg" alt="" role="presentation">
 
<!-- Logo -->
<img src="logo.svg" alt="SiteCockpit">

Related WCAG criterion:
WCAG 1.1.1 - Non-text Content