Der Barrierefreiheitsbericht weist darauf hin: „Ergänzen Sie Ihre Bilder mit einer Beschreibung, die den Inhalt erklärt.“
Das bedeutet, dass einige Bilder auf Ihrer Website keinen Alternativtext (Alt-Text) enthalten. Dadurch können Nutzer mit Sehbehinderungen den Inhalt dieser Bilder nicht erfassen.
Warum ist das wichtig?
Menschen, die auf Screenreader angewiesen sind, können Bilder nicht sehen. Stattdessen liest ihnen die Software den Alt-Text vor. Fehlt dieser, bleibt der Inhalt des Bildes für sie unverständlich. Auch wenn ein Bild aus technischen Gründen nicht geladen wird, stellt der Alt-Text sicher, dass Nutzer trotzdem die enthaltene Information erhalten.
WCAG 2.1 Richtlinie: 1.1.1 Nicht-Text-Inhalte (Level A)
Diese Regel verlangt, dass alle informativen Bilder einen Alternativtext haben, damit sie von assistiven Technologien erkannt und genutzt werden können.
Welche Bilder benötigen eine Beschreibung?
✔ Inhaltlich relevante Bilder (z. B. Infografiken, Icons mit Bedeutungen, Fotos mit relevanten Informationen)
✔ Schaltflächen mit Bildern (z. B. eine Such- oder Download-Schaltfläche mit Bildsymbol)
✔ Logos, wenn sie eine Bedeutung für den Inhalt haben
❌ Dekorative Bilder benötigen keinen Alt-Text. In diesem Fall sollte der alt-Attributwert leer sein (alt=""), damit Screenreader sie ignorieren.
Wie erstelle ich einen guten Alt-Text?
- Beschreiben Sie das Bild kurz und präzise (z. B. „Mann hält ein Smartphone mit Navigations-App“).
- Erfassen Sie die wichtigste Information, die für das Verständnis der Seite relevant ist.
- Vermeiden Sie Floskeln wie „Bild von“ oder „Grafik zeigt“.
- Halten Sie sich an max. 1–2 Sätze.
Wie kann ich Alt-Texte hinzufügen?
- HTML-Code:
<img src="karte.jpg" alt="Stadtplan mit markiertem Treffpunkt"> - CMS (WordPress, TYPO3, Joomla):
Im Medienmanager jedes Bildes ein Alt-Text-Feld ausfüllen. - Dokumente (PDF, PowerPoint, Word):
In den Bildeigenschaften einen Alternativtext hinterlegen.
Empfehlung: Überprüfen Sie alle Bilder auf Ihrer Website und fügen Sie Alt-Texte hinzu, wenn sie relevante Informationen vermitteln. Nutzen Sie Online-Tools oder Browser-Plugins, um fehlende Alt-Texte zu erkennen.