- Home
- Blog
- Barrierefreie Websites: Tipps zur Umsetzung
Am 28. Juni trat das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft und verpflichtet B2C-Unternehmen dazu, ihre Websites barrierefrei zu gestalten. Grund genug, dass wir dieses Thema betrachten. Warum ist es wichtig, dass Websites für alle zugänglich sind? Und wie können wir als SEOs hier effektiv unterstützen? Und welche Tipps und Empfehlungen haben unsere UX-Designer Jonathan und Cedric zum Thema Webdesign?
Was ist digitale Barrierefreiheit?
Eine barrierefreie Website verbessert nicht nur die Zugänglichkeit für Menschen mit Behinderungen, sondern optimiert die Nutzererfahrung insgesamt. Unternehmen sollten auf das Barrierefreiheitsstärkungsgesetz (BFSG) achten, das ab dem 28. Juni 2025 B2C-Unternehmen verpflichtet, ihre Websites barrierefrei zu gestalten.
Zudem haben ca. 15 % der Weltbevölkerung eine Form von Behinderung – ein großes Potenzial für Unternehmen. In Deutschland betrifft das etwa 10 Millionen Menschen, die von barrierefreien Websites direkt profitieren.
Beispiele für barrierefreie Websites
Vorbildliche barrierefreie Websites sind z. B. die ARD Mediathek, die mit klarer Struktur, hohem Farbkontrast und umfassenden Untertiteln überzeugt. Auch die Website bahn.de bietet eine einfache Navigation und optimierte Nutzung für Screenreader, wodurch alle Inhalte für alle zugänglich werden.
Screenshot der ARD Mediathek (ardmediathek.de)
Die Website bahn.de ist ein echtes Vorbild, wenn es um Barrierefreiheit geht. Sie bietet eine einfache Navigation, die komplett ohne Maus funktioniert – perfekt für alle, die auf Tastatursteuerung angewiesen sind. Dank der Optimierung für Screenreader können auch Menschen mit Sehbehinderungen problemlos alle Inhalte erfassen. Mit klaren Strukturen, hohem Farbkontrast und gut lesbaren Texten ist die Seite so gestaltet, dass sich wirklich jeder zurechtfindet.
Auch das Buchungssystem ist barrierefrei und super einfach zu bedienen. Zusätzlich lässt sich die Schriftgröße anpassen, und die Seite funktioniert auf mobilen Geräten genauso gut wie am PC. So wird sichergestellt, dass wirklich alle Nutzer ihre Reise bequem planen können.
Screenshot von bahn.de
SEO-Vorteile durch Barrierefreiheit
Barrierefreiheit und Suchmaschinenoptimierung haben viele gemeinsame Ziele – und der eine Bereich profitiert vom anderen:- Bilderoptimierung für Suchmaschinen durch Alternativtexte hilft auch Menschen mit Sehbehinderungen.
- Eine semantische Struktur mit logischen Überschriften fördert die Lesbarkeit und das SEO-Ranking.
- Responsive Design optimiert die Website für alle Geräte, was sowohl für die Benutzerfreundlichkeit als auch für die Suchmaschinen wichtig ist.
- Sprechende Linktexte wie „Hier“ oder ‚mehr lesen‘ sind nicht aussagekräftig. Stattdessen sollten präzise Linktexte verwendet werden, um die Nutzerführung und SEO zu verbessern.
- Verständliche Sprache mit klaren und kurzen Sätzen wird von Google bevorzugt und steigert die Lesbarkeit.
- Die korrekte Angabe der Sprache im Quelltext unterstützt Screenreader und hilft, Indexierungsprobleme zu vermeiden.
- Transkripte für Audio- und Videoinhalte machen diese Inhalte für alle zugänglich und verbessern die SEO-Performanc
Tools und Workflows zur Verbesserung der Barrierefreiheit
Kostenlose Tools wie WAVE und Google Lighthouse bieten schnelle Einblicke in die Barrierefreiheit einer Website. Für eine tiefgehende Analyse sind umfangreichere Tests und Nutzerbefragungen erforderlich, ein paar einfache Workflows und Beispiele stellen wir dir hier aber schon einmal vor.Workflow 1: Barrierefreiheitsprüfung mit Google Lighthouse
Google Lighthouse ist ein einfaches, kostenloses Tool, das in den Chrome-Entwicklertools verfügbar ist und eine umfassende Analyse der Barrierefreiheit deiner Website ermöglicht.
Google Lighthouse in den Chrome Entwicklertools.
So führst du einen Test durch:
- Öffne deine Website im Chrome-Browser.
- Öffne die Entwicklertools: Rechtsklick auf die Seite > Untersuchen auswählen (oder Strg + Umschalt + I).
- Gehe zum Lighthouse-Tab: In den Entwicklertools findest du einen Tab namens „Lighthouse“.
- Wähle „Accessibility“ (Barrierefreiheit) aus: Im Lighthouse-Tab kannst du verschiedene Audit-Kategorien auswählen. Achte darauf, dass die Option „Accessibility“ angehakt ist.
- Lighthouse-Analyse starten: Klicke auf „Generate Report“ (Analyze Page Load), um den Test zu starten. Lighthouse wird deine Website analysieren und dir einen umfassenden Bericht mit einem Accessibility-Score (Barrierefreiheits-Score) sowie detaillierten Verbesserungsvorschlägen geben.
- Bericht auswerten: Gehe die vorgeschlagenen Verbesserungen durch und optimiere Bereiche wie Farbanpassungen, Kontraste, Alternativtexte und Tabulator-Navigation.
Tipp: Wiederhole diesen Prozess nach jeder Optimierung, um sicherzustellen, dass die Änderungen die Barrierefreiheit verbessern.
Workflow 2: Bilder und Alternativtexte optimieren
Ein gut optimierter ALT-Text beschreibt das Bild und macht es für Screenreader zugänglich, was sowohl Barrierefreiheit als auch SEO verbessert. Schritt 1: Website durchgehen und Bilder identifizieren Öffne deine Website und notiere dir alle Bilder, die keine ALT-Texte haben oder unzureichende Beschreibungen enthalten. Dazu kannst du das Browser-Plug-in WAVE verwenden, um fehlende oder falsche ALT-Texte zu erkennen. Das haben wir übrigens auch in unserem Beitrag zu den 15+ besten SEO-Extensions mit aufgeführt. Oder du überprüfst alle vorhandenen Bilder mit einem SEO-Crawler wie dem ScreamingFrog. Das spart deutlich Zeit. Schritt 2: Beschreibende und präzise ALT-Texte hinzufügen Füge ALT-Texte hinzu, die den Inhalt und die Bedeutung des Bildes beschreiben. Achte darauf, dass die Beschreibung für den Kontext der Seite relevant ist. Beispiel: Statt „Bild eines Hundes“ könnte der ALT-Text „Golden Retriever spielt mit einem roten Ball im Park“ lauten. Tipp: Vermeide irrelevante Phrasen wie „Bild von …“ oder „Grafik von …“. Halte den Text knapp und klar. Bei wenigen Bildern lässt sich das natürlich händisch erstellen. Noch einfacher ist hier aber die Unterstützung durch ChatGPT. Einfach eine Reihe von Bildern hochladen (Voraussetzung ChatGPT 4o – maximal 5–6 Bilder) und mit folgendem Prompt die passenden ALT-Texte generieren lassen: Prompt:
Ich gebe dir [x] Bilddateien.
Bitte erstelle für jedes Bild einen prägnanten und beschreibenden ALT-Text auf Deutsch.
Dieser soll im Sinne der Barrierefreiheit die wichtigsten Informationen für Personen wiedergeben, die das Bild nicht sehen können.
Stelle sicher, dass wichtige Objekte, Aktionen oder relevante Details klar und informativ formuliert sind.
Der ALT-Text soll für jedes Bild zwischen 70 und 100 Zeichen (ca. 12 - 15 Wörter) umfassen.
Ordne abschließend die erstellten ALT-Texte den jeweiligen Bildern zu.
Wenn du eine kostenpflichtige Version des ScreamingFrog nutzt, kannst du das per API-Key und CustomJS auch für alle Bilder mit einem Crawl durchführen lassen. Je nach Menge der Bilder hier aber bitte immer auch die Kosten der API-Abfragen im Blick behalten.
Schritt 4: Prüfung der ALT-Texte
Überprüfe nach dem Hinzufügen, ob die ALT-Texte korrekt funktionieren, indem du einen Screenreader testest oder erneut das WAVE-Tool nutzt, um die Änderungen zu verifizieren.
Workflow 3: Ankertexte für interne Links barriefrei machen
Klar verständliche, beschreibende und keyword-relevante Ankertexte für interne Links sind im SEO eine wichtige Stellschraube. Auch hier lässt sich das Thema Barrierefreiheit mit etwas Arbeit umsetzen. Schauen wir uns das im Detail an:
Schritt 1: Alle Links auf der Website überprüfen
- Durchsuche deine Website nach unklaren Linktexten wie „Hier“ oder „Mehr erfahren“.
- Verwende Tools wie Screaming Frog SEO Spider oder WAVE, um alle Links und deren Ankertexte zu identifizieren. Alternativ bietet auch die Google Search Console im Report Links → Am häufigsten verlinkte Seiten – intern einen ersten Überblick.
- Die besten Ergebnisse liefert hier aber tatsächlich ein SEO-Crawler wie der ScreamingFrog.
Schritt 2: Keyword-optimierte, beschreibende Linktexte formulieren
- Ersetze generische Linktexte durch präzise und aussagekräftige Formulierungen, die das Hauptkeyword der verlinkten Seite enthalten.
- Voraussetzung ist hier immer eine saubere Keyword-Recherche und Kenntnis darüber, wofür die verlinkte URL ranken soll.
- Beispiel: Statt „Hier“ schreibe „Mehr über Lösungen zur Barrierefreiheit“. So erhöhst du die thematische Relevanz der verlinkten Seite und hilfst der Suchmaschine dabei, zu verstehen, was die wichtigste URL deiner Domain zu einem bestimmten Thema/Keyword ist.
Schritt 3: Kontext und Relevanz sicherstellen
- Der Linktext sollte im Kontext des Inhalts Sinn ergeben und alleinstehend verständlich sein.
- Dies ist besonders wichtig für Screenreader-Nutzer, die den Text isoliert wahrnehmen.
Schritt 4: Linktexte testen und SEO-Wirkung prüfen
- Nachdem du die Linktexte optimiert hast, teste die Änderungen mit einem Screenreader und Tools wie Google Lighthouse oder WAVE. Diese Tools helfen dir, sicherzustellen, dass die Linktexte barrierefrei und informativ sind.
- SEO-Tipp: Überprüfe regelmäßig die Leistung mit der Google Search Console, um zu sehen, ob die Optimierung der internen Verlinkung einen Effekt auf die Performance in der organischen Suche hat.
Accessibility-Overlays: Was sie sind und warum wir sie nicht empfehlen
Accessibility-Overlays sind Widgets oder Tools, die auf Websites eingebunden werden, um angeblich Barrierefreiheitsprobleme zu beheben. Meist handelt es sich dabei um einen Button, den Nutzer:innen aktivieren können, um etwa Kontraste zu erhöhen, Schriftgrößen zu verändern oder andere Oberflächenanpassungen vorzunehmen.
Technisch setzen diese Overlays vor allem auf JavaScript, das Darstellungen ändert, ohne dass Änderungen im Quellcode der Website notwendig sind.
Warum Accessibility-Overlays allerdings problematisch sind:
- Keine einheitliche Nutzererfahrung: Nutzer:innen müssen sich bei jedem Overlay neu zurechtfinden – Standardisierung fehlt.
- Unvollständige Barrierefreiheit: Wichtige Elemente wie Video-Untertitel oder Alt-Texte für Bilder werden nicht bereitgestellt.
- Mangelnde eigene Barrierefreiheit: Teilweise sind die Overlays selbst nicht barrierefrei oder verschlechtern sogar die Bedienbarkeit der Website.
- Rechtliche Grauzone: Overlays entbinden Website-Betreiber nicht von der gesetzlichen Pflicht zur Barrierefreiheit und können bei unsachgemäßer Nutzung rechtliche Risiken bergen.
- Scheinsicherheit: Sie suggerieren eine barrierefreie Website, ohne grundlegende Code- und Designprobleme zu lösen.
Einschätzung vom SMART LEMON Head of Design Jonathan zu Accessibility-Overlays
„Prinzipiell ist die Idee von solchen Overlays nicht schlecht, da das Thema Barrierefreiheit im Webdesign so zumindest angegangen und bearbeitet wird, doch decken solche Tools bei weitem nicht alle Anforderungen des BFSG bzw. der WCAG 2.1 Richtlinie ab. Beispielsweise visuell lesbare Texte: Overlays erlauben, Texte zu vergrößern. Allerdings berücksichtigen sie nicht die Gegebenheiten verschiedener Text-Container: Es wird pauschal einfach jeder Text, jede Überschrift, jeder Paragraph vergrößert, sodass Teile nicht mehr im Viewport auftauchen oder andere Elemente überlappen können. Zudem werden Videos komplett von solchen Tools ausgeklammert und nicht mit Untertiteln versehen. Fotos erhalten keine Alt-Texte, die für Screen-Reader notwendig sind. Meine Empfehlung ist daher, dass man das Thema ganzheitlicher betrachten muss, also nur einen „Overlay“ auf die Website zu setzen.
Accessibility-Overlays sind keine langfristige oder gesetzeskonforme Lösung für Barrierefreiheit. Besser ist es, die Website grundlegend barrierefrei zu gestalten und Verbesserungen mit betroffenen Personengruppen zu testen.“
Fazit
Barrierefreiheit im Webdesign ist nicht nur ein „nice-to-have“, sondern ein absolutes „must-have“. Das Barrierefreiheitsstärkungsgesetz, welches seit dem 28. Juni 2025 in Kraft ist, bindet B2C-Unternehmen an Barrierefeiheitstandards. Gerade als SEO kannst du in Zusammenarbeit mit deinem UX- und Design-Team das Know-how zu einem barrierefreien Zugang deiner Website beisteuern.
Weiterführende Informationen und Quellen zu digitaler Barrierefreiheit
- Website der WAVE Browser Extension (inkl. Online-Test) (englisch)
- Google Lighthouse in den Chrome-Entwicklertools (deutsch)
- Screaming-Frog-Anleitung zum Audit von internen Links (Abschnitt „Non-descriptive anchor text“) (englisch)
- Googles eigene Dokumentation zum „Links“-Bericht in der Google Search Console (deutsch)
Share
