Logobild mit blauem schriftzug "adiheutschi.ch - webdesign" auf blauem hintergrund.
Logobild mit blauer schrift "adiheutschi.ch - webdesign" auf blau, weissem Hintergrund
Webdesign Webseiten Webdesigner

Barrierefreie Bilder: Alt-Texte richtig einsetzen (WCAG Tipps)

Viele Websites haben Bilder ohne Alt-Texte.
Ohne Alt-Texte sind Inhalte für Screenreader unsichtbar.
Das betrifft auch Firmenwebsites, Shops und Vereinsseiten.

Die Folge:

  • Inhalte gehen verloren
  • Seiten wirken unvollständig
  • Potenzielle Kunden springen ab

Was Alt-Texte leisten

Alt-Texte beschreiben Bilder für:

  • Screenreader
  • Suchmaschinen
  • Fälle, in denen Bilder nicht angezeigt werden
Illustration zur Barrierefreiheit mit Laptop, Lupe auf „ALT“ und symbolischer Person zur Nutzung von Alt-Texten

Ein grosser Teil der Barrierefreiheit entsteht nicht im Code, sondern im Inhalt!

Was ist ein Alt-Text?

Ein Alt-Text ist eine kurze Beschreibung eines Bildes. Er wird im HTML hinterlegt und von Screenreadern vorgelesen.

So können auch Menschen mit Sehbehinderungen verstehen, welche Informationen ein Bild enthält.

Der Alt-Text wird nicht immer sichtbar angezeigt. Er ist Teil der technischen Struktur der Website und ergänzt den Inhalt.

Wichtig:
Ein Alt-Text beschreibt nicht einfach das Bild. Er beschreibt die Information, die das Bild im aktuellen Kontext vermittelt.

Warum Alt-Texte wichtig sind

Barrierefreie Inhalte sorgen dafür, dass Ihre Website von allen Menschen genutzt werden kann. Auch von Personen mit Einschränkungen beim Sehen, Hören oder Verstehen.

Ein grosser Teil der Barrierefreiheit entsteht nicht im Code, sondern im Inhalt. Genau dort haben Redakteure den grössten Einfluss.

Was bringt dir das konkret

  • Inhalte werden verständlich
  • Nutzer bleiben länger
  • bessere Auffindbarkeit bei Google
    weniger Absprünge

Beispiel: visuell vs. Screenreader

Perspektive sehender Nutzer

Alpenlandschaft mit Berggipfel im Sonnenlicht

Perspektive blinder Nutzer

Beispiel schlecht

alt="IMG-07975615818414.jpg

  • Kein Inhalt erkennbar
  • Dateiname ohne Bedeutung
  • Screenreader-Nutzer erhalten keine Information
  • Bild ist faktisch „unsichtbar“

Perspektive blinder Nutzer

Beispiel gut

alt="Alpenlandschaft mit Berggipfel im Sonnenlicht"

  • Beschreibt den Bildinhalt klar
  • Kurz und verständlich
  • Screenreader gibt sinnvolle Information aus
  • Nutzer versteht, was gezeigt wird
Regel: Alt-Text beschreibt das, was für den Inhalt der Seite wichtig ist. Nicht mehr, nicht weniger.

Typische Fehler bei Alt-Texte

Häufige Fehler und Probleme:

Alt-Texte bei Bilder:

  • Alt-Text fehlt komplett
  • Dateiname wird automatisch übernommen
  • Beschreibung ist zu allgemein
  • wichtige Inhalte im Bild werden nicht erklärt

Alt-Texte bei Teaserbildern

  • Alt-Text fehlt komplett
  • Dateinamen als Alt-Text
  • zu allgemeine Alt-Texte
  • identische Alt-Texte bei verschiedenen Bildern
  • falscher Einsatz von alt=""

Beispiel schlecht: „bild123.jpg“. Der Screenreader liest: "Bild123 punkt jpg" vor.

Beispiel gut: „Berge mit Sonne“

Illustration mit Beispielen mit fehlerhaften Alt-Text Bezeichnungen

Beispiel: Alt Texte einfügen im Joomla! Beiträgen

Reiter: Bilder und Links (Einleitungsbild und Komplettes Beitragsbild)

Alt-Text Code Beispiel 

<img src="berge.jpg" alt="Berglandschaft bei Sonnenschein">

So schreibst du gute Alt-Texte

Bilder transportieren Informationen. Für Menschen mit Sehbehinderungen sind sie ohne Beschreibung jedoch nicht zugänglich.

Deshalb braucht jedes relevante Bild eine kurze, klare Beschreibung. Diese wird im sogenannten Alt-Text hinterlegt.

Halte dich an diese Regeln:

  • Beschreibe, was relevant ist (Beschreiben Sie, was auf dem Bild zu sehen ist)
  • Bleib kurz und konkret (Konzentrieren Sie sich auf die wesentliche Aussage)
  • Verzichte auf „Bild von“ (Vermeiden Sie unnötige Details)
  • Nutze klare Begriffe

Alt-Texte im Kontext richtig einsetzen

Dasselbe Bild kann je nach Inhalt unterschiedlich beschrieben werden.

Berg mit Sonne, als Beispiel für verschiedene Alt-Text Beschreibungen

Beispiele Alt-Text nach Kontext:

Hier sind passende Beispiele für das Bild „Berge mit Sonne“, je nach Kontext:

Allgemein
Alt-Text:

Berge mit Sonne

Etwas präziser
Alt-Text:

Berglandschaft bei Sonnenschein

Für Tourismus
Alt-Text:

Bergpanorama bei sonnigem Wetter

Für Ferienregion
Alt-Text:

Sonnige Berglandschaft als Reiseziel

Für dekorativen Einsatz
Alt-Text:

alt=""

Häufige Fehler vermeiden

Keine Einleitungen wie „Bild von“ oder „Foto zeigt“ verwenden.

Screenreader erkennen bereits, dass es sich um ein Bild handelt.
Beschreiben Sie den Inhalt direkt und ohne unnötige Einleitung.

Bildtypen und passende Beschreibungen

Weitere Tipps für Alt-Texte

Alt-Texte kurz halten

Alt-Texte sollten knapp und verständlich formuliert sein. In den meisten Fällen reicht ein kurzer Satz mit ungefähr 100 Zeichen.

Alt-Texte helfen auch bei der Auffindbarkeit

Alt-Texte verbessern nicht nur die Barrierefreiheit. Sie liefern auch zusätzliche Informationen für Suchmaschinen. 
Gut beschriebene Bilder können die Auffindbarkeit Ihrer Inhalte unterstützen.

Alt-Text und Bildunterschrift unterscheiden

Der Alt-Text ist technisch und wird von Screenreadern genutzt. Die Bildunterschrift ist sichtbar und ergänzt den Inhalt für alle Nutzer. 
Beide haben unterschiedliche Aufgaben und sollten gezielt eingesetzt werden.

Checkliste für Alt-Texte:

  • beschreibt das Wesentliche
  • passt zum Kontext
  • keine unnötigen Wörter
  • nicht zu lang (ca. 100 Zeichen)
  • kein „Bild von“
  • Dekorative Bilder erhalten ein leeres Alt-Attribut: alt=""

Alt-Texte: Tools sehen nur die Hälfte

Tools prüfen nur das Vorhandensein.
Ob der Alt-Text sinnvoll ist, erkennt nur ein Mensch.

Mehr erfahren

Wenn Sie wissen möchten, wo Ihre Website aktuell steht:

Kostenlose Ersteinschätzung Ihrer Website

Ich prüfe Ihre Website und gebe Ihnen eine klare erste Einschätzung.

Sie erfahren:

  • ob Handlungsbedarf besteht
  • wo erste Schwachstellen liegen
Webseiten-Check

Webseiten-Check

Kostenlose Ersteinschätzung Ihrer Website

Ich werfe einen kurzen Blick auf Ihre Website und gebe Ihnen eine erste Einschätzung.

Sie erfahren:

  • ob Handlungsbedarf besteht
  • wo erste Schwachstellen liegen

Unverbindlich und kostenlos.

Wenn Sie eine erste Einschätzung möchten, starten Sie kostenlos.
Wenn Sie konkrete Empfehlungen brauchen, lohnt sich der detaillierte Website-Check.

Detaillierter Website-Check ab CHF 120.-  (exkl. 8.1% Mwst.)

Wenn Sie es genauer wissen möchten:
Ich analysiere Ihre Website und zeige Ihnen konkrete Schwachstellen und Verbesserungsmöglichkeiten.

Sie erhalten:

  • klare Einschätzung Ihrer Website
  • konkrete Schwachstellen
  • direkt umsetzbare Empfehlungen

Sie erhalten eine ehrliche Einschätzung, ob sich Optimierungen für Ihre Website lohnen.

So läuft es ab:

  • Analyse Ihrer Website im Hintergrund
  • Ergebnis als kompakte Zusammenfassung per E-Mail
  • auf Wunsch kurze Besprechung per Telefon oder Video

Webseiten-Check Bestellen

Ich möchte *

Weitere Beiträge zum Thema: Barrierefrei

Webagentur

adiheutschi.ch - webdesign 
Wolfisbergstrasse 1
CH-4704 Niederbipp

Kontakt

Angebot

Kundenbereich

Support
Kunden-Webmail
Newsletter
Joomla Verband Schweiz Platin Mitglied
Joomla! CMS