Bilder und Grafiken

Bedeutung von Alternativtexten für Bilder und Grafiken

Bilder und Grafiken erfüllen vielfältige Funktionen auf Webseiten, wobei Alternativtexte (auch bekannt als Alt-Texte) insbesondere für Nutzer von Screenreadern von entscheidender Bedeutung sind. Der Alternativtext dient als Ersatz für das eigentliche Bild und vermittelt dessen Inhalt. Hier sind einige wichtige Aspekte zu beachten:

Kurze und Prägnante Beschreibung

Der Alternativtext sollte eine knappe und präzise Beschreibung des Bildes bieten. Vermeiden Sie übermäßige Details und konzentrieren Sie sich auf die wesentliche Information, die das Bild vermittelt. Ein kurzer Text verbessert die Benutzerfreundlichkeit und vermeidet Informationsüberflutung. Es wird empfohlen, sich auf maximal 255 Zeichen zu beschränken, was ungefähr drei Zeilen entspricht.

Vermeidung von Redundanz

Wiederholen Sie keine Informationen, die bereits im Kontext des Bildes vorhanden sind. Der Screenreader gibt automatisch an, dass es sich um eine Grafik handelt, sodass diese Information nicht im Alternativtext stehen muss. Beispiel: Anstatt „Bild von einem Zug“ zu schreiben, genügt „Ein Zug fährt in den Bahnhof ein“.

Einfache und Verständliche Sprache

Verwenden Sie einfache und verständliche Sprache. Komplizierte oder technische Begriffe sollten vermieden werden, um die Benutzerfreundlichkeit für alle Nutzer zu gewährleisten. Beispiel: „Ein Mann hält eine Tasse“ anstatt „Ein männlicher Mensch hält ein Trinkgefäß“.

Relevanz und Kontext

Die Ausführlichkeit einer Bildbeschreibung hängt von der Relevanz der Grafik ab. Wie relevant eine Grafik ist, hängt immer vom Kontext ab. Informationen, die bereits im Fließtext enthalten sind, brauchen nicht in der Bildbeschreibung wiederholt zu werden. Beispiel: Ein dekoratives Bild eines Segelbootes in einem Urlaubskatalog erfordert eine kürzere Beschreibung als dasselbe Bild in einem Fachmagazin über Segelboote.

Techniken zur Bereitstellung von Bildbeschreibungen

Neben dem gängigsten Alternativtext gibt es verschiedene Alternativen zur Bereitstellung von Bildbeschreibungen:

1. ARIA-Label: Kann verwendet werden, um zusätzliche Informationen bereitzustellen.

   • Beispiel: <img src="zug.jpg" aria-label="Ein Zug fährt in den Bahnhof ein">

2. ARIA-DescribedBy: Verweist auf ein Element, das eine detailliertere Beschreibung enthält.

   • Beispiel: <img src="zug.jpg" aria-describedby="bildDesc"><div id="bildDesc">Ein Zug fährt in den Bahnhof ein, es ist ein sonniger Tag.</div>

3. Title-Attribut: Kann als ergänzende Beschreibung verwendet werden, sollte jedoch nicht als Ersatz für ARIA-Label dienen.

   • Beispiel: <img src="zug.jpg" title="Ein Zug fährt in den Bahnhof ein">

4. Detail-Tag in HTML: Ermöglicht die Bereitstellung einer ausklappbaren Beschreibung.

   • Beispiel: <details><summary>Bildbeschreibung</summary>Ein Zug fährt in den Bahnhof ein, es ist ein sonniger Tag.</details>

5. Tooltips und Akkordeons: Für längere Beschreibungen können Tooltips, Links zu neuen Seiten oder aufklappbare Akkordeons verwendet werden, die per Tastatur erreichbar sind.

Kein Alternativtext für bestimmte Bilder

Für einige Bilder und Grafiken sollte kein Alternativtext hinterlegt werden:

• Hintergrundbilder: Diese dienen rein dekorativen Zwecken und sollten im CSS definiert und für Screenreader ausgeblendet werden.
• Dekorative Grafiken: Diese haben keinen informativen Wert und sollten mit einem leeren Alt-Attribut versehen werden (z.B. <img src="deko.jpg" alt="">).
• Icons in Zusammenhang mit Text: Zum Beispiel ein Druckersymbol neben dem Text „Drucken“. Hier sollte der Alternativtext leer gelassen werden, da der Text die Funktion bereits beschreibt.

Funktion anstatt Bildbeschreibung

Für verlinkte Grafiken oder Buttons wird in der Regel die Funktion beschrieben anstatt der eigentlichen Bildbeschreibung. Beispiel: Anstatt „Pfeil nach rechts“ sollte der Alternativtext „Weiterblättern“ lauten. Wenn eine Grafik sowohl eine Funktion auslöst als auch Informationen vermittelt, sollte beides im Alt-Text aufgenommen werden. Beispiel: „Logo mtc.berlin - Zur Startseite“.

Fazit

Gut gestaltete Alternativtexte für Bilder und Grafiken sind entscheidend für die Barrierefreiheit von Webseiten. Sie sollten kurz, prägnant und funktional beschreiben, was auf dem Bild zu sehen ist oder welche Funktion es ausführt. Vermeiden Sie Redundanzen und komplexe Sprache, um die Benutzerfreundlichkeit zu maximieren. Nutzen Sie ergänzende Techniken wie ARIA-Label und ARIA-DescribedBy, um zusätzliche Informationen bereitzustellen, wenn nötig.

---

Checkliste für Bilder und Grafiken

1. Alternativtexte:

   • Ist der Alternativtext kurz und prägnant?
   • Vermeidet der Alternativtext Redundanzen?
   • Wird einfache und verständliche Sprache verwendet?
   • Ist der Alternativtext auf maximal 255 Zeichen begrenzt?

2. Bildbeschreibung:

   • Ist die Bildbeschreibung relevant und kontextabhängig?
   • Wiederholt die Bildbeschreibung keine Informationen aus dem Fließtext?
   • Werden zusätzliche Techniken wie ARIA-Label oder ARIA-DescribedBy verwendet?

3. Kein Alternativtext:

   • Werden Hintergrundbilder und dekorative Grafiken ohne Alternativtext versehen?
   • Haben Icons, die in Zusammenhang mit Text stehen, keinen Alternativtext?

4. Funktion anstatt Bildbeschreibung:

   • Wird bei verlinkten Grafiken oder Buttons die Funktion beschrieben anstatt des Bildinhalts?
   • Ist bei Grafiken, die sowohl eine Funktion auslösen als auch Informationen vermitteln, beides im Alternativtext enthalten?

5. Technische Umsetzung:

   • Werden Alternativtexte korrekt im HTML-Code implementiert?
   • Sind alternative Methoden wie Tooltips, Detail-Tags oder Akkordeons verwendet, wenn längere Beschreibungen nötig sind?