Bilder & Alt-Texte
Alt-Text-Entscheidung Muss
| Bildtyp | Alt-Attribut | Beispiel |
|---|---|---|
| Informatives Bild | Beschreibender Text | alt="Yoga-Kurs in der Klubschule Zürich" |
| Dekoratives Bild | Leeres alt | alt="" |
| Funktionales Bild (Link/Button) | Funktion beschreiben | alt="Zur Startseite" |
| Komplexes Bild (Diagramm) | Kurzbeschreibung + ausführliche Alternative | alt="Teilnehmerzahlen 2024" + Tabelle im Text |
| Text im Bild | Gesamter Text im Bild | alt="Anmeldeschluss: 15. März 2025" |
Gute Alt-Texte schreiben
- Kurz und prägnant (in der Regel unter 125 Zeichen)
- Nicht mit «Bild von…» oder «Foto von…» beginnen – der Screenreader sagt bereits «Grafik»
- Die Funktion beschreiben, nicht das Aussehen (bei funktionalen Bildern)
- Kontext berücksichtigen: derselbe Bildinhalt kann je nach Umgebung andere Alt-Texte brauchen
CSS-Hintergrundbilder Muss
Bilder, die über CSS (background-image) eingebunden werden, sind für Screenreader unsichtbar. Informative Bilder müssen daher immer als <img> eingebunden werden.
SVG Muss
<!-- Dekoratives SVG -->
<svg aria-hidden="true" focusable="false">...</svg>
<!-- Informatives SVG -->
<svg role="img" aria-label="Warnung">...</svg>