Barrierefreie Websites mit optimalen Alt-Texten
Ein Leitfaden zum BFSG nach WCAG 2.1
Alt-Texte sind ein unverzichtbares Element barrierefreier Websites – und mit Inkrafttreten des Barrierefreiheitsstärkungsgesetzes (BFSG) für viele Unternehmen auch gesetzlich verpflichtend.
Doch was genau sind diese Alt-Texte, wie erstellt man sie korrekt und wie prüft man ihre Umsetzung? In diesem umfassenden Leitfaden erfahren Sie alles, was Sie zur praktischen Umsetzung der BFSG-Anforderungen für Alt-Texte wissen müssen.
Mit konkreten Beispielen, praktischen Tools und Expertentipps rüsten wir Sie für die barrierefreie Gestaltung Ihrer Webpräsenz – und helfen Ihnen, rechtliche Risiken zu vermeiden und gleichzeitig Ihre Webseite für alle Nutzergruppen zugänglich zu machen.
Zuletzt aktualisiert: März 2025
Barrierefrei mit Alt-Texten – Auf einem Blick
- Alt-Texte sind textliche Beschreibungen von Bildern und Grafiken, die von Screenreadern vorgelesen werden und erscheinen, wenn Bilder nicht geladen werden können.
- Mit dem Barrierefreiheitsstärkungsgesetz (BFSG) werden Alt-Texte ab Juni 2025 für viele Unternehmenswebsites verpflichtend (WCAG 2.1, Punkt 1.1.1).
- Gute Alt-Texte sind prägnant (unter 125 Zeichen), beschreiben den Bildinhalt im Kontext und verzichten auf Wendungen wie „Bild von…“ oder „Foto zeigt…“.
- Bei Buttons und Links sollte der Alt-Text die Aktion beschreiben, die beim Klicken ausgeführt wird, nicht das gezeigte Symbol.
- Die Implementierung korrekter Alt-Texte verbessert nicht nur die Barrierefreiheit, sondern auch das SEO-Ranking und die allgemeine Nutzererfahrung.
Der Autor:
Olav Schürmann
Founder, CTO
Web-Experte seit 1997
Technik, SEO und KI
„Logisch denken – Probleme lösen!“
Alt-Texte für barrierefreie Websites im Überblick
Das Internet sollte für alle Menschen gleichermaßen zugänglich sein – unabhängig von körperlichen oder kognitiven Einschränkungen.
Dieser Grundsatz ist nicht nur ein ethisches Anliegen, sondern in Deutschland mittlerweile auch gesetzlich verankert. Mit dem Inkrafttreten des Barrierefreiheitsstärkungsgesetzes (BFSG) im Jahr 2021 und den daraus resultierenden Fristen ab Juni 2025 müssen Unternehmen sicherstellen, dass ihre digitalen Angebote barrierefrei gestaltet sind.
Ein zentraler Baustein dieser digitalen Barrierefreiheit sind sogenannte Alt-Texte (alternative Texte). Sie mögen auf den ersten Blick unscheinbar wirken, sind jedoch entscheidend für die Zugänglichkeit von Webinhalten für Menschen mit Sehbehinderungen oder andere Nutzergruppen, die auf Hilfstechnologien angewiesen sind.
Die Web Content Accessibility Guidelines (WCAG) 2.1, auf die sich auch das BFSG stützt, formulieren in Punkt 1.1.1 (Nicht-Text-Inhalt) klare Anforderungen: Für jeden Nicht-Text-Inhalt – also Bilder, Grafiken, Buttons und andere visuelle Elemente – muss eine Textalternative bereitgestellt werden, die denselben Zweck erfüllt und dieselben Informationen vermittelt. Auch der BIK BITV-Test greift diese Anforderung in Punkt 9.1.1.1a auf.
Doch wie setzt man diese Anforderungen in der Praxis um? Welche Informationen gehören in einen guten Alt-Text und wie kann man bestehende Webseiten effizient prüfen und optimieren? In diesem Artikel geben wir Ihnen einen umfassenden Einblick in das Thema Alt-Texte.
Was sind Alt-Texte? Eine Definition
Alt-Texte (alternative Texte) sind textbasierte Beschreibungen, die als Attribut in den HTML-Code von Bildern und anderen visuellen Elementen einer Webseite eingebettet werden. Sie sind nicht sichtbar für Nutzer, die die Webseite visuell betrachten können, werden aber von Screenreadern und anderen Hilfstechnologien vorgelesen, wenn ein Bild nicht angezeigt oder erkannt werden kann.
Technisch betrachtet werden Alt-Texte im HTML-Code durch das Attribut alt im <img>-Tag implementiert:
<img src="beispielbild.jpg" alt="Beschreibung des Bildinhalts" />
Alt-Texte kommen in verschiedenen Kontexten zum Einsatz:
- Bilder und Fotos: Hier beschreiben Alt-Texte den Bildinhalt und seine Bedeutung im Kontext der Webseite.
- Icons und Symbole: Bei funktionalen Icons beschreiben Alt-Texte die Funktion (z.B. „Suchen“ für ein Lupen-Symbol).
- Buttons mit Grafiken: Hier sollte der Alt-Text die Aktion beschreiben, die durch Klicken ausgelöst wird.
- Infografiken und Diagramme: Bei komplexen visuellen Informationen fasst der Alt-Text die wichtigsten Erkenntnisse zusammen.
- Dekorative Elemente: Bei rein dekorativen Bildern sollte ein leerer Alt-Text (alt=““) verwendet werden, damit Screenreader diese überspringen.
Wichtig ist die Abgrenzung des Alt-Attributs von anderen textuellen Attributen:
- Title-Attribut: Wird als Tooltip angezeigt, wenn man mit der Maus über ein Element fährt. Es ist kein Ersatz für das Alt-Attribut, da es von vielen Hilfstechnologien nicht zuverlässig erfasst wird.
- Figcaption: Bildunterschriften sind für alle Nutzer sichtbar und ergänzen das Bild um Kontext, ersetzen aber nicht den Alt-Text.
- Aria-Label: Kann für interaktive Elemente verwendet werden, wenn diese keinen sichtbaren Text haben, ist aber ebenfalls kein Ersatz für den Alt-Text bei Bildern.
Der Alt-Text ist also ein spezielles Attribut mit einem klaren Zweck: Er soll sehbehinderten oder blinden Nutzern dieselben Informationen vermitteln, die sehende Nutzer aus dem Bild gewinnen können.
Warum sind Alt-Texte unverzichtbar?
Alt-Texte sind aus mehreren Gründen unerlässlich für moderne Websites:
Barrierefreiheit für blinde und sehbehinderte Nutzer
Für Menschen, die blind sind oder eine Sehbehinderung haben, sind Bilder ohne Alt-Texte nicht zugänglich. Screenreader können visuelle Inhalte nicht interpretieren und sind auf Alt-Texte angewiesen, um den Nutzerinnen und Nutzern die Informationen zu vermitteln, die in Bildern enthalten sind. Ohne Alt-Texte erfahren diese Nutzer lediglich, dass ein Bild vorhanden ist – nicht aber, was es zeigt oder welchen Zweck es erfüllt.
Stellen Sie sich vor, Sie lesen einen Artikel über Vögel, in dem verschiedene Vogelarten visuell dargestellt werden, aber die Bilder haben keine Alt-Texte. Als blinder Nutzer würden Sie wahrscheinlich nur hören „Bild, Bild, Bild“ – ohne jegliche Information über die dargestellten Vogelarten. Dies führt zu einem erheblichen Informationsverlust und einer deutlichen Benachteiligung.
Verbesserung der Nutzererfahrung für alle Menschen
Alt-Texte kommen nicht nur Menschen mit Behinderungen zugute:
- Langsame Internetverbindungen: Wenn Bilder aufgrund langsamer Verbindungen nicht geladen werden können, werden Alt-Texte angezeigt und vermitteln dennoch die wesentlichen Informationen.
- Technische Probleme: Bei Fehlern beim Laden von Bildern ermöglichen Alt-Texte den Nutzern, den Inhalt trotzdem zu verstehen.
Mobile Nutzer: Personen, die Bilddaten zum Sparen von Datenvolumen deaktiviert haben, sehen stattdessen die Alt-Texte.
SEO-Vorteile durch Alt-Texte
Alt-Texte spielen eine wichtige Rolle bei der Suchmaschinenoptimierung (SEO):
- Verbesserte Bildindexierung: Suchmaschinen können Bilder nicht „sehen“. Alt-Texte helfen Suchmaschinen zu verstehen, was auf Bildern dargestellt ist.
- Relevanz und Ranking: Informative Alt-Texte mit relevanten Keywords können dazu beitragen, das Ranking der Webseite zu verbessern.
- Bildersuche: Gute Alt-Texte erhöhen die Chance, dass Bilder in der Google-Bildersuche gefunden werden.
Rechtliche Notwendigkeit gemäß BFSG und WCAG 2.1
Die rechtliche Dimension von Alt-Texten hat seit dem Inkrafttreten des Barrierefreiheitsstärkungsgesetzes (BFSG) deutlich an Bedeutung gewonnen:
- Gesetzliche Verpflichtung: Das BFSG verpflichtet Unternehmen, ihre digitalen Produkte und Dienstleistungen barrierefrei zu gestalten. Diese Verpflichtung wird nach Ablauf der Übergangsfristen (ab Juni 2025) verbindlich.
- WCAG 2.1 als Standard: Die Web Content Accessibility Guidelines (WCAG) 2.1, insbesondere Erfolgskriterium 1.1.1 (Nicht-Text-Inhalt), fordern ausdrücklich Textalternativen für alle nicht-textlichen Inhalte.
- Rechtliche Konsequenzen: Bei Nichteinhaltung drohen nicht nur Abmahnungen und rechtliche Schritte, sondern auch Imageschäden und der Ausschluss bestimmter Nutzergruppen.
Die Implementierung korrekter Alt-Texte ist somit nicht nur eine Frage guter Praxis, sondern zunehmend auch eine rechtliche Notwendigkeit für Unternehmen aller Größen.
Best Practices für wirkungsvolle Alt-Texte
Die Erstellung guter Alt-Texte ist eine Kunst, die sich an bestimmten Grundprinzipien orientiert. Hier finden Sie die wichtigsten Best Practices für verschiedene Arten von Bildern und Elementen.
Grundregeln für gute Alt-Texte
Prägnant und informativ sein
Alt-Texte sollten kurz und präzise sein, idealerweise nicht länger als 125 Zeichen, da einige Screenreader längere Texte abschneiden können.
Kontext berücksichtigen
Der Alt-Text sollte die Funktion und Bedeutung des Bildes im Zusammenhang der Webseite widerspiegeln. Ein Foto kann je nach Kontext unterschiedliche Alt-Texte erfordern.
Keine Redundanz
Beginnen Sie nicht mit „Bild von…“ oder „Foto zeigt…“. Screenreader kündigen bereits an, dass es sich um ein Bild handelt.
Wichtige Details einbeziehen
Fokussieren Sie sich auf die relevanten Details, die für das Verständnis des Bildes im Kontext wichtig sind.
Natürliche Sprache verwenden
Formulieren Sie in ganzen, verständlichen Sätzen oder Phrasen, nicht in Stichworten oder mit übermäßiger Verwendung von Keywords.
Spezifische Richtlinien für verschiedene Bildtypen
Informative Bilder
Bei Bildern, die wichtige Informationen vermitteln, sollte der Alt-Text diese Informationen vollständig wiedergeben:
- Produktbilder: „Roter Ledergürtel mit silberner Schnalle, 3cm breit“
- Personen: „CEO Maria Schmidt lächelnd vor dem Firmengebäude“
- Orte: „Panoramablick auf den Kölner Dom bei Sonnenuntergang“
Dekorative Bilder
Rein dekorative Bilder, die keine inhaltliche Bedeutung tragen, sollten einen leeren Alt-Text haben:
<img src="dekoratives-element.jpg" alt="">
Dies signalisiert Screenreadern, dass das Bild übersprungen werden kann, da es keine wichtigen Informationen enthält.
Funktionale Bilder und Buttons
Bei Bildern, die als Links oder Buttons fungieren, sollte der Alt-Text die Aktion beschreiben, die beim Klicken ausgeführt wird:
- Such-Icon: „Suchen“ (nicht „Lupe“)
- PDF-Icon neben Link: „PDF herunterladen“ (nicht „PDF-Symbol“)
- Logo als Link: „Zur Startseite“ (nicht nur „Firmenlogo“)
Komplexe Bilder (Infografiken, Diagramme)
Bei komplexen Informationsgrafiken reicht ein kurzer Alt-Text oft nicht aus. Hier sind zwei Ansätze möglich.
1. Zusammenfassender Alt-Text mit ausführlicher Beschreibung im Kontext
<img src="umsatzentwicklung.jpg" alt="Diagramm zeigt stetigen Anstieg des Umsatzes von 2020 bis 2023"> <p> Das Diagramm zeigt unsere Umsatzentwicklung: 2020: 1,2 Mio. €, 2021: 1,5 Mio. €, 2022: 1,8 Mio. €, 2023: 2,2 Mio. €. </p>
2. Verwendung von longdesc oder aria-describedby für erweiterte Beschreibungen:
<img src="prozessablauf.jpg" alt="Schematische Darstellung unseres Produktionsprozesses" aria-describedby="prozess-beschreibung"> <div id="prozess-beschreibung"> <h3>Unser Produktionsprozess in 5 Schritten</h3> <ol> <li>Materialanlieferung</li> <li>Qualitätskontrolle</li> <li>...</li> </ol> </div>
Häufige Fehler und wie man sie vermeidet
Überflüssige Informationen
- Falsch: „Bild von einem roten Auto“
- Richtig: „Roter Sportwagen der Marke XY“
Unvollständige Beschreibungen
- Falsch: „Produktfoto“
- Richtig: „Smartphone XY in Mattschwarz mit 6,5 Zoll Display“
Dateiname als Alt-Text
- Falsch: „DSC1234.jpg“
- Richtig: Aussagekräftige Beschreibung des Bildinhalts
SEO-Überoptimierung
- Falsch: „Günstige Schuhe kaufen Berlin Sneaker Turnschuhe Sale“
- Richtig: „Weiße Sneaker der Marke XY, Modell Z“
Vernachlässigung des Kontexts
- Falsch: Ein Pfeil-Icon mit dem Alt-Text „Pfeil“
- Richtig: „Weiter zur nächsten Seite“ oder „Zurück zum Anfang“
Die Anwendung dieser Best Practices erfordert etwas Übung, führt aber zu einer deutlich verbesserten Barrierefreiheit und Nutzererfahrung auf Ihrer Website.
Konkrete Beispiele für Alt-Texte
Um die theoretischen Grundsätze greifbarer zu machen, sehen wir uns einige Beispiele an, wie Alt-Texte in verschiedenen Szenarien konkret aussehen sollten.
Vorher-Nachher-Beispiele
Beispiel 1: Produktbild in einem Online-Shop
Vorher (unzureichend):
<img src="schuh123.jpg" alt="Schuh">
Nachher (gut):
<img src="schuh123.jpg" alt="Nike Air Max 90 Sneaker in schwarz-weiß mit rotem
Swoosh-Logo, Seitenansicht">
Beispiel 2: Teammitglied auf einer „Über uns“-Seite
Vorher (unzureichend):
<img src="mitarbeiter.jpg" alt="Foto von Herrn Müller">
Nachher (gut):
<img src="mitarbeiter.jpg" alt="Alfons Müller, Projektleiter, lächelnd vor
neutralem Hintergrund">
Beispiel 3: Infografik zur Unternehmensentwicklung
Vorher (unzureichend):
<img src="wachstum.jpg" alt="Unsere Wachstumszahlen">
Nachher (gut):
<img src="wachstum.jpg" alt="Infografik zeigt 30% Umsatzwachstum und
25% Personalzuwachs im Jahr 2024">
Alt-Texte für Buttons und interaktive Elemente
Buttons und interaktive Elemente benötigen besondere Aufmerksamkeit, da sie nicht nur beschreiben sollten, was sie darstellen, sondern auch, welche Funktion sie erfüllen oder wohin sie führen.
Beispiel 1: Social-Media-Icons
Vorher (unzureichend):
<a href="https://facebook.com/unternehmen"><img src="fb-icon.png" alt="Facebook"></a>
Nachher (gut):
<a href="https://facebook.com/unternehmen"><img src="fb-icon.png"
alt="Besuchen Sie uns auf Facebook"></a>
Beispiel 2: Shopping-Cart-Button
Vorher (unzureichend):
<button><img src="cart-icon.png" alt="Warenkorb"></button>
Nachher (gut):
<button><img src="cart-icon.png" alt="Produkt in den Warenkorb legen"></button>
Beispiel 3: Download-Button für Dokument
Vorher (unzureichend):
<a href="broschuere.pdf"><img src="pdf-icon.png" alt="PDF"></a>
Nachher (gut):
<a href="broschuere.pdf"><img src="pdf-icon.png" alt="Produktbroschüre als PDF
herunterladen (2,3 MB)"></a>
Anpassung an verschiedene Branchen und Kontexte
Je nach Branche und Kontext können sich die Anforderungen an Alt-Texte unterscheiden.
E-Commerce
Bei Online-Shops sind detaillierte Produktbeschreibungen wichtig:
<img src="kleid.jpg" alt="Sommerkleid aus Bio-Baumwolle, knielang, hellblau mit weißem
Blumenmuster, V-Ausschnitt">
Bildungsbereich
Bei Lernmaterialien sollten Alt-Texte didaktisch relevante Informationen enthalten:
<img src="photosynthese.jpg" alt="Schematische Darstellung der Photosynthese:
Umwandlung von CO2 und Wasser zu Glucose und Sauerstoff unter Einwirkung von Sonnenlicht">
Gastronomie
Bei Speisekarten sind appetitanregende Beschreibungen sinnvoll:
<img src="pasta.jpg" alt="Spaghetti Carbonara mit cremiger Eiersauce, Pancetta und
frisch geriebenem Parmesan">
Alt-Texte prüfen und verbessern
Die Implementierung guter Alt-Texte ist nur der erste Schritt. Ebenso wichtig ist die regelmäßige Überprüfung, ob alle Bilder auf Ihrer Website mit angemessenen Alt-Texten versehen sind.
Manuelle Prüfmethoden
Browser-Extensions
Es gibt verschiedene Browser-Erweiterungen, die dabei helfen, Alt-Texte zu überprüfen:
- WAVE (Web Accessibility Evaluation Tool): Zeigt fehlende oder leere Alt-Texte an und gibt Hinweise zur Verbesserung.
- Accessibility Insights for Web: Bietet umfassende Prüfungen, einschließlich der Kontrolle von Alt-Texten.
- Alt Text Tester für Chrome: Spezialisiert auf die Überprüfung von Alt-Texten.
Developer Tools in Browsern
Moderne Browser bieten integrierte Entwicklertools, mit denen Sie Alt-Texte überprüfen können:
- Rechtsklick auf ein Bild und „Element untersuchen“ wählen
- Im HTML-Code prüfen, ob ein alt-Attribut vorhanden ist und welchen Inhalt es hat
- Mit der Tab-Taste durch die Seite navigieren, um zu prüfen, ob alle interaktiven Elemente zugänglich sind
Manuelle Bildschirmleser-Tests
Eine besonders effektive Methode ist das Testen mit einem Screenreader:
- NVDA (kostenlos für Windows)
- VoiceOver (integriert in macOS)
- TalkBack (für Android-Geräte)
Navigieren Sie mit deaktiviertem Bildschirm oder geschlossenen Augen durch Ihre Website und überprüfen Sie, ob Sie alle Informationen erhalten, die zum Verständnis notwendig sind.
Automatisierte Tools
Screaming Frog SEO Spider
Dieser Website-Crawler kann alle Bilder auf Ihrer Website identifizieren und anzeigen, welche Alt-Texte fehlen oder unzureichend sind.
Wir empfehlen, alle Seiten einzeln durchzugehen und jeweils alle Bilder auf ihre Alt-Texte zu überprüfen. Dabei wie folgt vorgehen:
- Crawl der Website starten
- Im Tab „Intern“ die gewünschte Seite auswählen (im Beispiel unten ist das die Startseite)
- Auf „Bilddetails“ klicken. Dort findet man alle Bilder der Seite und jeweils den Alt-Text in der gleichnamigen Spalte.
WAVE API und andere automatisierte Prüftools
Für größere Websites oder regelmäßige Überprüfungen eignen sich automatisierte Lösungen:
- WAVE API: Ermöglicht die Integration von Accessibility-Checks in CI/CD-Pipelines
- Axe by Deque: Automatisierte Prüfung auf Barrierefreiheitsprobleme
- SiteImprove: Umfassendes Tool für Barrierefreiheits-Audits
Checklisten für die Qualitätssicherung
Eine systematische Überprüfung kann mit Hilfe einfacher Checklisten erfolgen:
- Haben alle informativen Bilder einen Alt-Text?
- Sind alle Alt-Texte aussagekräftig und kontextbezogen?
- Haben dekorative Bilder einen leeren Alt-Text (alt=““)?
- Beschreiben die Alt-Texte bei Buttons und Links, wohin diese führen oder welche Aktion sie auslösen?
- Sind komplexe Bilder wie Diagramme oder Infografiken ausreichend beschrieben?
- Sind die Alt-Texte prägnant und vermeiden sie Redundanzen?
- Werden keine Dateinamen als Alt-Texte verwendet?
Implementierung in gängigen CMS-Systemen
Die praktische Umsetzung von Alt-Texten unterscheidet sich je nach verwendetem Content-Management-System. Hier erfahren Sie, wie Sie in gängigen Systemen vorgehen können.
WordPress und Alt-Text-Management
WordPress bietet integrierte Funktionen zur Verwaltung von Alt-Texten:
Beim Hochladen von Bildern
- Im Medienupload-Dialog gibt es ein spezielles Feld für den Alt-Text
- Füllen Sie dieses immer aus, bevor Sie das Bild in Ihren Inhalt einfügen
Bei bereits hochgeladenen Bildern
- Gehen Sie zur Mediathek
- Klicken Sie auf das gewünschte Bild
- Rechts erscheint ein Formular mit dem Feld „Alternativtext“
Im Gutenberg-Editor
- Klicken Sie auf ein eingefügtes Bild
- In der rechten Seitenleiste finden Sie unter „Einstellungen für das Bild“ das Feld „Alt-Text“
Hilfreich: WordPress-Plugins für bessere Alt-Text-Verwaltung
- „Bulk Auto Image Alt Text“: Generiert automatisch Alt-Texte basierend auf Dateinamen oder Kategorien
- „Accessibility Checker“: Prüft Ihre Inhalte auf Barrierefreiheit, einschließlich fehlender Alt-Texte
Andere gängige CMS-Systeme
TYPO3
In TYPO3 können Alt-Texte wie folgt hinzugefügt werden:
- Öffnen Sie die Dateiliste und wählen Sie ein Bild
- Im Tab „Metadata“ finden Sie das Feld „Alternative Text“
- Für eingebundene Bilder kann der Alt-Text auch im Content-Element „Text mit Bild“ gesetzt werden
Joomla
Bei Joomla wird der Alt-Text so implementiert:
- Öffnen Sie den Medienmanager und wählen Sie ein Bild
- Klicken Sie auf „Bearbeiten“
- Im erscheinenden Dialog gibt es ein Feld für den „Alternativen Text“
Drupal
Drupal bietet folgende Möglichkeiten:
- Bei der Bildauswahl über den Media-Browser gibt es ein Feld „Alt Text“
- Bei bereits hochgeladenen Bildern können Sie den Alt-Text über die Medienübersicht bearbeiten
Technische Umsetzungshilfen
Automatisierte Alt-Text-Generierung
Verschiedene Dienste bieten KI-basierte Lösungen zur Generierung von Alt-Texten:
- Azure Cognitive Services: Kann Bilder analysieren und Beschreibungen generieren
- Google Cloud Vision API: Bietet automatische Bilderkennung und -beschreibung
- WordPress-Plugins wie „Auto Alt Text“ nutzen diese APIs zur Generierung
Wichtig: Automatisch generierte Alt-Texte sollten immer überprüft und bei Bedarf angepasst werden, da sie die kontextuelle Bedeutung eines Bildes möglicherweise nicht vollständig erfassen.
Implementierung durch Entwickler
Für Entwickler, die an Custom-Websites arbeiten:
// Beispiel: Automatische Warnung bei fehlenden Alt-Texten (nur in Entwicklungsumgebung)
document.addEventListener('DOMContentLoaded', function() {
if (process.env.NODE_ENV === 'development') {
const images = document.querySelectorAll('img');
images.forEach(img => {
if (!img.hasAttribute('alt')) {
console.warn('Bild ohne Alt-Text gefunden:', img.src);
img.style.border = '3px solid red';
}
});
}
});
WordPress Divi: Alt-Text für das Logo anpassen
Wie beschrieben sollte ein korrekter, barrierefreier Alt-Text für ein Bild mit Link auch das Ziel des Links beschreiben („Link zu xyz“).
Divi für WordPress verwendet jedoch für das Logo nur den Namen (Titel) der Website. Das sieht so aus (siehe alt=““):
Es gibt in Divi keine Option, um diesen Alt-Text zu ändern. Der verwendete Alt-Tag für das Bild in der Mediathek wird nicht übernommen. Und das ist natürlich Mist.
Wir haben auch kein aktuelles Plugin gefunden, was hier Abhilfe schafft.
Letztendlich haben wir den PHP-Code in header.php (oder auch theme-header.php) angepasst. Nach folgendem Code suchen (ca. ab Zeile 220):
<div class="logo_container">
<span class="logo_helper"></span>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php echo esc_attr( $logo ); ?>" width="<?php echo esc_attr( $logo_width ); ?>" height="<?php echo esc_attr( $logo_height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>
</div>
Entscheidend ist hier der Bereich alt=“<?php echo esc_attr( get_bloginfo( ’name‘ ) ); ?>“. Diesen ersetzen wir einfach durch unseren Wunsch-Alt-Text:
<div class="logo_container">
<span class="logo_helper"></span>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php echo esc_attr( $logo ); ?>" width="<?php echo esc_attr( $logo_width ); ?>" height="<?php echo esc_attr( $logo_height ); ?>" alt="netzpluslogik Logo und Link zur Startseite" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>
</div>
Das war’s. Das Ergebnis sieht so aus:
Fazit und Ausblick
Zusammenfassung der wichtigsten Erkenntnisse
Alt-Texte sind weit mehr als ein technisches Detail – sie sind ein essentielles Element für barrierefreie Websites und erfüllen mehrere wichtige Funktionen:
- Sie machen visuelle Inhalte für Menschen mit Sehbehinderungen zugänglich
- Sie verbessern die SEO und das Ranking in Suchmaschinen
- Sie erfüllen rechtliche Anforderungen gemäß BFSG und WCAG 2.1
- Sie bieten allen Nutzern eine bessere Erfahrung, auch bei technischen Problemen
Die Erstellung guter Alt-Texte folgt klaren Prinzipien:
- Prägnant und informativ sein
- Den Kontext berücksichtigen
- Auf Redundanzen verzichten
- Je nach Bildtyp (informativ, dekorativ, funktional) unterschiedlich vorgehen
Mit den vorgestellten Tools und Methoden können Sie Ihre Website systematisch auf fehlende oder unzureichende Alt-Texte prüfen und diese verbessern.
Ausblick auf zukünftige Entwicklungen im Bereich Barrierefreiheit
Die digitale Barrierefreiheit wird in den kommenden Jahren weiter an Bedeutung gewinnen:
- Verschärfte rechtliche Anforderungen: Mit dem Auslaufen der Übergangsfristen des BFSG im Juni 2025 werden mehr Unternehmen zur Umsetzung von Barrierefreiheitsstandards verpflichtet sein.
- Automatisierung und KI: Die Technologie zur automatischen Erkennung und Beschreibung von Bildinhalten wird sich weiterentwickeln, was die Erstellung von Alt-Texten erleichtern wird.
- Erweiterter Fokus auf multimediale Inhalte: Neben Bildern werden auch Videos, Podcasts und interaktive Anwendungen verstärkt im Fokus stehen, wenn es um Barrierefreiheit geht.
- Integration in Entwicklungsprozesse: Barrierefreiheit wird zunehmend von Anfang an in den Entwicklungsprozess von Websites integriert werden, statt nachträglich implementiert zu werden.
Die frühzeitige Anpassung an diese Trends und die konsequente Implementierung von Alt-Texten auf Ihrer Website ist daher nicht nur eine rechtliche Notwendigkeit, sondern auch eine strategische Investition in die Zukunft Ihrer digitalen Präsenz.
Weiterführende Ressourcen
Um Ihr Wissen zu vertiefen und stets auf dem aktuellen Stand bei Alt-Texten zu bleiben, empfehlen wir folgende Ressourcen:
- BIK für Alle: Alternativtexte für Grafiken
- W3C: Rescources on Alternative Text for Images
- BITV-Test – Prüfschritt 1.1.1b (Alternativtexte für Grafiken und Objekte)
Offizielle Richtlinien (WCAG, BITV)
- Web Content Accessibility Guidelines (WCAG) 2.1 – Der internationale Standard für Webzugänglichkeit
- WCAG 2.1 Schnellreferenz – Übersicht aller Erfolgskriterien mit Umsetzungsbeispielen
- Barrierefreie-Informationstechnik-Verordnung (BITV) – Die deutsche Verordnung zur barrierefreien Informationstechnik
- Barrierefreiheitsstärkungsgesetz (BFSG) – Der aktuelle Gesetzestext
Hilfreiche Tools und Websites
- WAVE Web Accessibility Evaluation Tool – Online-Tool zur Überprüfung der Barrierefreiheit
- Accessibility Insights – Umfassendes Tool von Microsoft zur Überprüfung der Barrierefreiheit
- Screenreader NVDA – Kostenloser Screenreader für Windows
- axe DevTools – Browser-Erweiterung für Barrierefreiheitstests
- Lighthouse – Integriertes Audit-Tool in Chrome DevTools
Fachliteratur und Online-Kurse
- „Barrierefreiheit verstehen und umsetzen“ von Jan Eric Hellbusch und Kerstin Probiesch – Standardwerk zum Thema Webzugänglichkeit, mittlerweile aber leider uralt (von 2011)
- Udacity: Web Accessibility – Kostenloser Online-Kurs zu Grundlagen der Webzugänglichkeit
- edX: Introduction to Web Accessibility – Umfassender Kurs der W3C
Beratung und Unterstützung
Als spezialisierte Agentur für barrierefreie Websites bieten wir Ihnen umfassende Unterstützung bei der Umsetzung des Barrierefreiheitsstärkungsgesetzes:
- Barrierefreiheits-Audit Ihrer bestehenden Website
- Konzeption und Entwicklung neuer, barrierefreier Webauftritte
- Schulungen für Ihre Content-Manager und Entwickler
- Kontinuierliche Begleitung bei der Sicherstellung der Barrierefreiheit
Umfassende Informationen zu unseren Leistungen finden Sie unter Agentur für barrierefreie Websites (nach BFSG und WCAG).
Fazit: Alt-Texte sind nicht nur ein wichtiger Baustein für Barrierefreiheit im Web, sondern auch ein rechtliches Erfordernis im Rahmen des BFSG.
Mit den richtigen Kenntnissen und Werkzeugen können Sie Ihre Website zugänglicher für alle Nutzer machen und gleichzeitig rechtliche Risiken minimieren. Nutzen Sie die vorgestellten Best Practices und Tools, um Ihre Alt-Texte zu optimieren und einen wichtigen Schritt in Richtung einer vollständig barrierefreien Website zu gehen.
Noch mehr nützliche Informationen
Modernstes Webdesign und Barrierefreie Websites gehen Hand in Hand. Hier ein kleiner Überblick von Themen und Lösungen, die für Sie auch interessant sein könnten.
Barrierefreie Websites nach BFSG
Dieser Leitfaden erklärt Ihnen praxisnah und ohne technischen Fachjargon, was barrierefreie Websites ausmacht, welche konkreten Vorteile sie Ihrem Unternehmen bringen und wie Sie Schritt für Schritt umsetzen können.
Accessibility Overlays für Websites
Accessibility Overlays versprechen barrierefreie Websites auf Knopfdruck – doch halten sie, was sie versprechen? Dieser Artikel erklärt, was Overlays tatsächlich leisten können, wo ihre Grenzen liegen und ob damit das BFSG erfüllt ist.
Breadcrumb-Navigation in WordPress
Die Breadcrumb-Navigation in WordPress barrierefrei umsetzen (BFSG-konform). Ein Praxis-Leitfaden für Unternehmen 2025 – so haben wir es gemacht.
Barrierefreie Websites mit dem WAVE-Test
Das BFSG ist da – doch wie prüfen Sie, ob Ihre Website die Anforderungen erfüllt? Mit dem WAVE-Test finden Sie die größten Barrieren auf Ihrer Website. In diesem Praxisartikel erfahren Sie, wie Sie das WAVE-Tool nutzen.
Agentur für barrierefreie Websites
Als spezialisierte Agentur für digitale Barrierefreiheit verbinden wir technisches Know-how mit fundiertem Verständnis der WCAG 2.1-Richtlinien und rechtlichen Anforderungen.
Konzeption und Erstellung von Websites
Als Ihr Partner für erfolgreiches Webdesign liefern wir attraktive Websites, die Ihr Neukundengeschäft ankurbeln. Maßgeschneiderte Webdesign-Lösungen mit WordPress.