Bilder sind ein unterschätzter Bereich in der Barrierefreiheit. Für sehbeeinträchtigte Personen sind sie nämlich eine echte Herausforderung, vor allem wenn sie nicht barrierefrei eingebunden wurden. Hilfreiche Tipps erhältst du hier:
Verwende immer einen Alternativtext (Alt-Text)
Der Alternativtext wird vorgelesen, wenn jemand einen Screenreader nutzt – oder angezeigt, wenn das Bild nicht geladen wird.
- Beschreibe kurz und präzise, was auf dem Bild zu sehen ist
Beispiel: “Frau sitzt im Rollstuhl vor einem Laptop” statt “bild123.jpg”
💡Tipp: Wenn das Bild rein dekorativ ist (z. B. ein Trennstrich oder Muster), dann lass den Alt-Text leer (alt=""). So wird es von Screenreadern übersprungen.
Auf deiner Plattform kannst du Fotos einfach über die Mediathek im Backend bearbeiten.
- Alternativer Text: Wesentlich für SEO und Barrierefreiheit, beschreibt den Bildinhalt kurz und prägnant.
- Titel: Benennt das Bild. Oft ist dieses Feld vorausgefüllt mit dem Bildnamen (z.B. D345.jpg)
- Beschriftung: Ergänzt den Alt-Text, dient als Bildunterschrift und kann zusätzliche Informationen enthalten.
- Beschreibung: Bietet ausführlichere Informationen zum Bild, die in der Anhangseite angezeigt werden.
Verzichte auf Text in Bildern
Text in einem Bild kann von Screenreadern nicht erkannt werden.
Wenn du also Text verwendest, gib ihn auch als echten Text daneben an. So bleibt der Inhalt auch beim Vorlesen oder automatischer Übersetzung erhalten
Achte auf guten Farbkontrast
Kontrast ist wichtig – vor allem, wenn die Bilder Texte oder wichtige Informationen enthalten.
- Stelle sicher, dass sich Vorder- und Hintergrund deutlich unterscheiden
- Teste dein Bild auch mal in Graustufen: Ist noch alles erkennbar?
Denke bei Bildern an Sehbeeinträchtigungen
- Verwende keine wichtigen Infos nur in Bildern
- Beschreibe Infografiken, Schaubilder oder Karten zusätzlich im Text
- Verlinke gegebenenfalls zu einer barrierefreien Version (z. B. als Text oder Tabelle)
Vermeide flackernde oder animierte Bilder
- Blinkende oder schnell wechselnde Bilder können stressen oder gesundheitlich belasten
- Nutze Animationen nur dezent und mache es möglich, dass diese auch gestoppt werden können
💡 Extra-Tipp:Pflege konsequent die Alt-Text-Felder, die unser System bereitstellt – sie sind ein einfacher Weg zu mehr Barrierefreiheit.
Spreadmind
Antworten