In diesem Artikel dreht sich alles um ALT-Texte, also um Bildbeschreibungen von Websites, die über einen Screenreader auch Menschen mit Sehbehinderung zugänglich werden. Mit diesen Infos wissen Sie, wie Sie gezielt die Barrierefreiheit Ihrer Website bei Bildern und nebenbei auch Ihr SEO verbessern können.
DISCLAIMER: Dieser Blogpost dient ausschließlich Informationszwecken. Ich bin kein Rechtsanwalt und die hier präsentierten Inhalte stellen keine rechtliche Beratung dar. Für spezifische rechtliche Fragen oder im Falle von Unsicherheiten empfehle ich dringend, sich an einen qualifizierten Anwalt zu wenden.
Einleitung
ALT-Texte sind wichtig für die Barrierefreiheit einer Website. Sie sorgen dafür, dass Screenreader Bildinformationen erfassen können und machen damit Bilder auch für Menschen mit Sehbehinderungen zugänglich. Aber auch Ihr SEO (Suchmaschinenmarketing) profitiert von guten ALT-Texten.
Was sind ALT-Texte?
ALT-Texte sind im HTML-Code hinterlegt. Sie beschreiben Bilder, damit Screenreader-Nutzer den Bildinhalt wahrnehmen können. Um den Zusammenhang zwischen Bild und ALT-Text zu erkennen, können Sie in Chrome oder Firefox die Entwicklerkonsole (F12) öffnen und das Bild-Element untersuchen.
Abbildung: WordPress-Mediathek - Eintragung ALT-Texte
In WordPress können ALT-Texte in der Mediathek unter den Anhang-Details eingetragen werden.
Abbildung: Entwickler-Console Chrome - hier ALT-Texte
Dekorative vs. informative Bilder
Nicht jedes Bild benötigt einen ALT-Text. Dekorative Bilder, die keine essentiellen Informationen transportieren, sollten keinen ALT-Text haben, um Screenreader-Nutzer nicht abzulenken. Lassen Sie das ALT-Text-Feld leer, damit der Screenreader das Bild ignoriert. Informative Bilder hingegen transportieren wichtige Informationen, die für das Verständnis des Inhalts essenziell sind. Beispiele sind Produktbilder, Diagramme oder Fotos, die die Botschaft des Textes unterstützen. Wiederholte Inhalte sollten im ALT-Text jedoch vermieden werden, wenn sie bereits durch den Text beschrieben sind.
Abbildung: Dekorative versus informative Bilder - Vergleich
Komplexe Grafiken
Bei komplexen Grafiken und Diagrammen reicht ein ALT-Text oft nicht aus. Eine Kombination aus ALT-Text und Beschreibung im Fließtext bietet hier die beste Lösung. Der Fließtext kann auf der gleichen Seite oder auf einer verlinkten Seite stehen. Bei sehr komplexen Inhalten können zusätzliche Links zu ausführlichen Beschreibungen sinnvoll sein.
Abbildung: Beispiel Komplexe Grafik - Umgang mit ALT-Texten
Gute ALT-Texte schreiben
Gute ALT-Texte sind präzise und beschreiben den Bildinhalt ohne unnötige Details. Vermeiden Sie vage Formulierungen wie „Bild von Hund“. Ein besserer ALT-Text wäre „Hund im Sand mit rotem Ball“. Unnötige Einleitungen wie „Bild von“ oder „Foto von“ sollten Sie vermeiden, da Screenreader bereits erkennen, dass es sich um ein Bild handelt. Auch zu viele Details können unnötig sein – beschreiben Sie nur die relevanten Informationen.Demobeispiele
Bilder vs. Hintergrundbilder
In WordPress und Webbaukästen wie Elementor können dekorative Bilder als Hintergrundbilder im CSS definiert werden. Dadurch werden sie von Screenreadern ignoriert und benötigen kein ALT-Attribut. Relevante Bilder sollten jedoch als eigenständige Bilder eingefügt und mit ALT-Texten versehen werden.ALT-Texte und SEO
ALT-Texte sind nicht nur für die Barrierefreiheit wichtig, sondern auch für SEO. Präzise Bildbeschreibungen mit relevanten Keywords verbessern die Auffindbarkeit Ihrer Seite in Suchmaschinen. Auch Bildtitel und Beschreibungen können sinnvoll eingesetzt werden, um weiteren Kontext zu liefern.
Abbildung: WordPress-Mediathek - Metadaten
Zusammenfassung
ALT-Texte sind entscheidend für Barrierefreiheit und SEO. Sie beschreiben den Inhalt von Bildern, damit auch Sehbehinderte darauf zugreifen können. Achten Sie darauf, zwischen dekorativen und informativen Bildern zu unterscheiden und den Text präzise und relevant auszuarbeiten, ohne sich zu wiederholen. Mit diesen Tipps stellen Sie sicher, dass Ihre Bilder sowohl barrierefrei als auch gut auffindbar sind.Mehr zum Thema ...
