Website auf Barrierefreiheit prüfen - mit WAVE und Google Lighthouse

Das Digitale-Barrierefreiheitsstärkungsgesetz, das für 2025 geplant ist, markiert einen bedeutenden Fortschritt in der Entwicklung einer inklusiven digitalen Gesellschaft. Es zielt darauf ab, die Zugänglichkeit digitaler Produkte und Dienstleistungen für Menschen mit Behinderungen zu verbessern. Dieses Gesetz baut auf den bestehenden rechtlichen Rahmenbedingungen zur Barrierefreiheit auf und erweitert diese, um den Anforderungen des digitalen Zeitalters gerecht zu werden.

Grund genug zu überprüfen, ob Deine Website den Anforderungen entspricht. In diesem Artikel erfährst Du, wie du mit den Tools WAVE und Lighthouse kontrollierst, wo die Baustellen sind, welche Maßnahmen benötigt werden und bekommst einen guten Eindruck davon, was es bedeutet, seine Website nach den WCAG - AA Kriterien zu optimieren.

Darum gehören die WCAGs dazu

Ein zentraler Aspekt dieses Gesetzes ist die Einhaltung der Web Content Accessibility Guidelines (WCAG), die von der World Wide Web Consortium (W3C) entwickelt wurden. Die WCAGs dienen als international anerkannter Standard für die Barrierefreiheit von Webinhalten und sind in drei Konformitätsstufen unterteilt: A, AA und AAA. Diese Richtlinien bieten detaillierte Empfehlungen, wie digitale Inhalte gestaltet werden sollten, um sie für Personen mit einer Vielzahl von Behinderungen zugänglich zu machen, darunter Sehbehinderungen, Hörbehinderungen, motorische Einschränkungen und kognitive Beeinträchtigungen.

Das Gesetz wird voraussichtlich Anforderungen enthalten, die sicherstellen, dass Websites, mobile Anwendungen und andere digitale Technologien den WCAG-Standards entsprechen. Dies bedeutet, dass Entwickler und Anbieter von digitalen Produkten und Dienstleistungen ihre Angebote so gestalten müssen, dass sie für alle Nutzer zugänglich sind, unabhängig von ihren körperlichen oder sensorischen Fähigkeiten. Zu den Schlüsselelementen der WCAG gehören die Gewährleistung der Bedienbarkeit durch Tastatur, die Bereitstellung von Alternativtexten für visuelle Inhalte, die Verbesserung der Nutzbarkeit und Verständlichkeit von Inhalten und die Kompatibilität mit assistierenden Technologien.

Das Digitale-Barrierefreiheitsstärkungsgesetz wird weitreichende Auswirkungen auf den öffentlichen Sektor sowie auf Unternehmen haben, die digitale Produkte und Dienstleistungen für den deutschen Markt bereitstellen. Die Umsetzung der WCAG-Konformität wird nicht nur die digitale Inklusion fördern, sondern auch die Qualität und Zugänglichkeit von Online-Angeboten insgesamt verbessern.

Barrierefreiheit mit Google Lighthouse messen

Lighthouse ist ein Open-Source-Tool, das von Google entwickelt wurde, um die Qualität von Websites zu verbessern. Es ist sowohl für Entwickler*innen als auch für Webseitenbetreiber*innen eine wertvolle Ressource, um die Leistung, Zugänglichkeit, Best Practices für Webanwendungen und Suchmaschinenoptimierung (SEO) deiner Webseiten zu analysieren und zu optimieren.
Barrierefreiheit und SEO haben Synergieeffekte, die nicht unterschätzt werden sollten, wenn eine Optimierung neben der Barrierefreiheit auch die Erhöhung der organischen Sichtbarkeit im Fokus haben sollte. Ein Whitepaper mit hilfreichen Checklisten sind bei uns zu finden.
Im Folgenden werden die Installation, die Funktionsweise und die Messung der Barrierefreiheit mit Lighthouse erläutert.

Lighthouse kann auf mehrere Arten installiert und genutzt werden:

• Lighthouse kann als Erweiterung im Google Chrome Browser installiert werden. Du kannst einfach den Chrome Web Store besuchen, nach Lighthouse suchen und es hinzufügen.

• Lighthouse ist auch direkt in den Chrome DevTools integriert. Um es zu nutzen, öffnest du einfach die DevTools in Chrome, navigierst zum Tab "Lighthouse" und startest die Analyse in Lighthouse.

• Die Website PageSpeed Insights wertet auch die Barrierefreiheit aus.

Lighthouse führt eine Reihe von Tests durch, um verschiedene Aspekte einer Website zu bewerten. Die Ergebnisse dieser Tests werden in einem Bericht zusammengefasst, der nicht nur die Leistung der Seite anzeigt, sondern auch spezifische Empfehlungen zur Verbesserung bietet. Der Bericht ist in verschiedene Kategorien unterteilt:

Kategorien, die in Lighthouse gemessen werden

Messung der Barrierefreiheit mit dem Lighthouse Tool

Die Barrierefreiheit wird von Lighthouse durch eine Reihe von automatisierten Tests sowie manuelle Prüfungsempfehlungen bewertet. Diese Tests umfassen:

• Kontrastverhältnisse: Überprüfung des Textkontrasts im Vergleich zum Hintergrund.

• Tastaturbedienbarkeit: Sicherstellung, dass alle interaktiven Elemente der Webseite mit der Tastatur erreichbar und nutzbar sind.

• Aria-Attribute: Einsatz von ARIA (Accessible Rich Internet Applications) Attributen zur Verbesserung der Zugänglichkeit für Screenreader und andere assistive Technologien.

• HTML-Strukturelemente: Verwendung korrekter HTML-Elemente zur Strukturierung von Inhalten und Navigationselementen.

• Klassische SEO Basics, wie Überschriftenstruktur, ALT-Attribute oder [lang] Angaben.

Es ist wichtig zu beachten, dass trotz der umfassenden Tests durch Lighthouse eine vollständig barrierefreie Webseite nicht allein durch automatisierte Prüfungen sichergestellt werden kann. Die manuellen Prüfungsempfehlungen, die Lighthouse bieten, sind ein entscheidender Schritt, um Barrierefreiheit umfassend zu gewährleisten.

In den Developer Tools von Google ist eine Bewertungshierarchie veröffentlicht, bei der einzelne Faktoren eine Gewichtung von 1 bis 10 mitbringen.
Es ist von Vorteil, sich erst einmal auf die Maßnahmen zu konzentrieren, welche eine höhere Gewichtung haben - interessanterweise sind diese Faktoren auch eng mit SEO Maßnahmen verknüpft.

Auszug der einzelnen Metriken und Gewichtungen

Das Google Tool Lighthouse zeigt in Themen unterteilt die einzelnen Fehler zur Barrierefreiheit auf der Website an. Die Darstellung erfolgt in einem Akkordeon, somit ist eine Übersicht gewährleistet - siehe 1.

Lighthouse bietet für die User*innen auch gleich die Möglichkeit, mehr Informationen zu den Fehlern anzeigen zu lassen. In diesem Beispiel wird nicht nur angezeigt, wie ein ALT-Attribut bei Bildern aussehen soll, sondern auch, wie er bestmöglich im Quellcode implementiert werden muss, damit er von den Suchmaschinen, aber auch von assistiven Technologien wie Screenreadern gelesen werden kann - siehe 2.

Im letzten Teil werden konkret die Elemente angezeigt, bei denen der oben genannte Fehler auftritt. In Form eines Screenshots und einem Ausschnitt des Code-Snippets. Leider sind die Screenshots, die von dem Lighthouse Tool angezeigt werden, sehr undeutlich und auf den ersten Blick fällt es schwer, das Element auf der kompletten Website einzuordnen - siehe 3.

Anzeige Fehler in Google Lighthouse

Zusammenfassend ist Lighthouse ein mächtiges Tool, das Webentwickler*innen und Webseitenbetreiber*innen dabei hilft, ihre Websites zu analysieren und zu optimieren. Durch seine vielseitigen Installations- und Nutzungsmöglichkeiten sowie die detaillierten Berichte und Empfehlungen spielt Lighthouse eine wichtige Rolle in der modernen Webentwicklung, insbesondere im Bereich der Suchmaschinenoptimierung sind diese Werte ein wichtiger Indikator. Bisher gibt es von Google keine konkrete Aussage, dass die Barrierefreiheit einer Website ein Rankingfaktor ist. Jedoch werden viele Metriken bereits jetzt indirekt bewertet. Barrierefreie Websites werden immer wichtiger, daher ist es nur eine Frage der Zeit, bis mögliche Indikatoren und Messungen auch in der Google Search Console zu finden sein werden.

WAVE - Tool mit visueller Markierung von Barrierefreiheit

Auch mit dem WAVE Tool kannst du deine Website ganz einfach und kostenlos auf Barrierefreiheit prüfen. Der Nachteil ist, dass es anders als das Lighthouse Tool nicht von Google selbst entwickelt wurde. Lighthouse bietet den Vorteil, dass die Ergebnisse direkt von Google stammen und eventuell ein größerer Indikator für das Ranking sind. WAVE wurde von der anerkannten Organisation WebAIM entwickelt und berücksichtigt ebenso die WCAG-Richtlinien. Die Ergebnisse der jeweiligen Tools sollten sich demnach nicht stark voneinander unterscheiden, wenn man eine Website auf Barrierefreiheit prüfen möchte. Aus diesem Grund steht für uns die übersichtliche Darstellung der Ergebnisse und die Handhabung des Tools im Vordergrund. Es gibt ebenso eine kostenpflichtige Variante. Die WAVE-API wird lokal installiert und kann deine gesamte Website analysieren. Wir stellen in diesem Artikel die kostenlose Version vor und gehen nicht weiter auf WAVE-API ein.

WAVE bietet sowohl als Online-Version als auch als praktische Browser-Erweiterung für Chrome und Firefox die Möglichkeit, Webinhalte einfach und effizient zugänglich zu machen. Bei der Nutzung bleibt man visuell auf der Website (siehe Abbildung 4). Hinweise und Fehler der Zugänglichkeit zeigt das Tool anhand von kleinen Icons. Diese sofortige Rückmeldung ermöglicht es, Probleme schnell zu identifizieren und anzugehen. WAVE achtet besonders auf kritische Aspekte der Barrierefreiheit - von Alt-Attributen über die Beschriftung von Formularen bis hin zu Kontrastproblemen. Auch zeigt es auf, ob deine Webseite eine klare Struktur hat. Außerdem berücksichtigt das Tool WAVE mehrdeutige oder nicht beschreibende Links und die Verwendung von ARIA-Labels, die verwendet werden können, um Menschen mit Screenreadern ein optimales Erlebnis im Web zu bieten.

Nutzung des WAVE Tools auf dem Google Store

Fehleridentifikation

Auf der linken Bildschirmseite gibt es ein Dashboard. Es dient zur Navigation und Darstellung der Elemente der Barrierefreiheit. Das Menü besteht aus sechs verschiedenen Abschnitten und ist intuitiv bedienbar. Neben der Zusammenfassung, wie viele Fehler und Kontrastfehler, Warnungen, Merkmale, Strukturelemente und ARIA-Verwendungen es gibt, werden diese im Reiter “Details” aufgelistet. Hier kannst du mit einem Klick direkt zur Ursache auf der Website springen. Unter “Reference” findest du eine detaillierte Beschreibung des Problems und wie du es beheben kannst (siehe Abbildung 5).

Dashboard des WAVE Tools (Abschnitt 1 - 3)

Darüber hinaus gibt es die Möglichkeit, die Styles auszuschalten oder den HTML-Code direkt an der passenden Stelle zu öffnen. So stellt das WAVE Tool sicher, dass jeder Fehler gefunden und identifiziert werden kann.

Das Tool zur Prüfung von Websites auf Barrierefreiheit zeigt auch die Tab-Reihenfolge (Navigation mit der Tabulatortaste zu allen interaktiven Elementen - Links & Formularfelder). Es gibt eine Übersicht über den strukturellen Aufbau mit den Überschriften und bietet die Möglichkeit, Kontraste manuell zu überprüfen (siehe Abbildung 6). Das kann beispielsweise bei Kontrastverhältnissen auf relevanten Bildern wichtig sein, da das WAVE Tool diese nicht überprüft. In einigen Fällen, z.B. wenn der Text direkt im Bild enthalten ist, ist es auch wichtig, dass dieser von allen gelesen werden kann.

Interpretation der Ergebnisse

Die Fehler und Kontrastfehler sind meistens klare Verstöße gegen die WCAG-Richtlinien Level AA und sollten vor dem Inkrafttreten des Barrierefreiheitsstärkungsgesetzes behoben werden. Bei den Warnungen erkennt das WAVE Tool vermeintliche Barrieren bei der Nutzung, die nicht ganz so drastisch sind und nicht immer auf einer rechtlichen Grundlage basieren. Generell sollten allerdings alle Ergebnisse kritisch betrachtet und kontrolliert werden, bevor es in die Umsetzung geht.

Bei der Nutzung von Features und ARIA-Labels handelt es sich um HTML-Elemente, die unter anderem dafür gedacht sind, barrierefreie Websites zu ermöglichen. Diese sollten allerdings richtig verwendet werden. Als Feature wird zum Beispiel ein vorhandenes Alt-Attribut eines Bildes gekennzeichnet. Die Qualität bzw. richtige Nutzung kann nicht vom WAVE Tool erfasst werden. Alt-Attribute sollten möglichst den Inhalt der Abbildung beschreiben, da sie von Screenreadern vorgelesen werden. Du musst also selbst prüfen, ob diese gut gewählt sind. Ein weiteres Beispiel sind die ARIA-Labels. Auch hier ist die korrekte Verwendung wichtig. Das WAVE Tool zeigt alle verwendeten Labels an. Sie können allerdings auch falsch verwendet werden und für mehr Barrieren sorgen. Um selbst zu prüfen, ob sie richtig verwendet werden, ist es sehr hilfreich, deine Website selbst mit einem Screenreader zu nutzen. Für Windows Geräte empfehlen wir den Screenreader NVDA. Dieser ist kostenlos zum Download verfügbar und man kann ihn einfach bedienen. Apple Geräte haben die Bedienungshilfe “VoiceOver” integriert.

Die Tab-Reihenfolge sollte einer logischen Reihenfolge der Links folgen. Sie sollte visuell auf der Webseite von links nach rechts und von oben nach unten hochzählen. Ist dies nicht der Fall, muss der Code angepasst werden.

Fazit - Lighthouse und WAVE

Die Vorteile von Barrierefreiheit sind klar. Es ist eine Chance für Websitebetreiber*innen, die Usability zu verbessern und Inhalte für alle zugänglich zu machen. Gleichzeitig profitiert auch die Sichtbarkeit von einer barrierefreien Umsetzung.

Aber welches Tool solltest du am besten nutzen, um deine Website auf Barrierefreiheit zu prüfen? Wir haben in diesem Blogartikel zwei Tools vorgestellt, Lighthouse und WAVE. Das sind unsere beiden Favoriten. Nutzbar sind beide als Browser Erweiterung oder direkt auf der jeweiligen Website. Lighthouse ist ein Google Tool und hat den Vorteil, dass die Ergebnisse eventuell schon bald direkt in das Ranking einfließen. Setzt man die Hinweise des Tools um, ist man aus SEO-Sicht gut beraten. Bei der Darstellung der Ergebnisse hat unserer Meinung nach ganz klar WAVE die Nase vorn. Die Fehler und Hinweise sind direkt auf der Seite sichtbar. Von einem Kontrast Checker über die Darstellung der Struktur bis hin zu der Möglichkeit, Styles zu deaktivieren, bietet das Tool WAVE vielfältige Anwendungsmöglichkeiten. Dabei ist es trotzdem übersichtlich und einfach zu bedienen. Die Fehler und Warnungen der beiden Tools sind nach unserer Erfahrung sehr ähnlich.

Allerdings ist es wichtig zu betonen, dass es sich um automatisierte Tools handelt. Die tatsächliche Beurteilung und das Verständnis von Barrieren erfordern menschliches Urteilsvermögen. Daher ist es empfehlenswert, die identifizierten Ergebnisse zusätzlich mit Screenreadern zu überprüfen, um ein realistisches Bild der Zugänglichkeit einer Website zu erhalten. Ein weiterer Aspekt ist, dass sie nur einzelne Seiten analysieren und nicht die gesamte Website. Das kann dazu führen, dass Probleme, die sich aus der Interaktion verschiedener Seiten ergeben, möglicherweise übersehen werden.

Du brauchst Hilfe bei der Überprüfung und Umsetzung der Barrierefreiheit deiner Website? Die warriors aus Berlin stehen dir gerne zur Verfügung. Schon am 28. Juni 2025 müssen alle betroffenen Websites barrierefrei sein. Bereite dich schon jetzt darauf vor und hebe dich von deinen Mitbewerber*innen ab! Du kannst uns jederzeit für ein unverbindliches Angebot kontaktieren.