Zu Content springen
Deutsch
Kontakt
  • Es gibt keine Vorschläge, da das Suchfeld leer ist.

A: Abbildungen müssen einen Alternativtext besitzen (WCAG 1.1.1)

image-alt

Stellt sicher, dass <img> Elemente einen Alternativtext oder eine ARIA Rolle mit dem Wert none oder presentation besitzen.

Das bedeutet

Jedes sinntragende Bild braucht einen aussagekräftigen Alt Text. Ohne Alt Text bleibt der Zweck der Abbildung für Screenreader unsichtbar. Dekorative Bilder bekommen keinen gesprochenen Namen und werden für Assistive Technologien ausgeblendet.

Auswirkung

Ohne passenden Namen wissen Nutzerinnen und Nutzer nicht, was ein Bild vermittelt. Wichtige Informationen gehen verloren, Interaktionen werden unklar und es droht ein WCAG Verstoß.

Empfehlung

  • Inhaltliche Bilder: kurzen, zweckorientierten Alt Text vergeben.

  • Icons in Links oder Schaltflächen: sichtbaren Text bevorzugen; sonst aria-label am Steuerlement oder sinnvollen Alt Text am Bild.

  • Rein dekorative Bilder: alt="" und optional role="presentation" oder aria-hidden="true".

  • Komplexe Grafiken: Kurzfassung in alt, Details als sichtbare Beschriftung, z. B. mit <figure> und <figcaption> oder aria-describedby.

  • Logos: Alt Text mit dem Namen der Organisation.

  • Keine Dateinamen, kein Keyword Füllen, keine Phrasen wie „Bild von“.

Beispiel

Problematisch

<!-- Kein Alternativtext -->
<img src="team.jpg">
 
<!-- Bild trägt die Bedeutung, alt aber leer -->
<img src="umsatz-2024.png" alt="">
 
<!-- Link nur mit Icon, ohne Name -->
<a href="/download"><img src="download.svg"></a>

Besser

<!-- Sinntragendes Bild -->
<img src="team.jpg" alt="Team der Musterfirma">
 
<!-- Diagramm mit Kurzinfo; Details in der Bildunterschrift -->
<figure>
  <img src="umsatz-2024.png" alt="Umsatz 2024 steigt von Januar bis Juni">
  <figcaption>Monatliche Umsätze in Tsd. Euro</figcaption>
</figure>
 
<!-- Link mit sichtbarem Text -->
<a href="/download">PDF herunterladen</a>
 
<!-- Icon rein dekorativ -->
<img src="divider.svg" alt="" role="presentation">
 
<!-- Logo -->
<img src="logo.svg" alt="SiteCockpit">

Verknüpfte WCAG-Kriterien:
WCAG 1.1.1 - Nicht-Text-Inhalt