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:
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.
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.
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).
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.
Julien Moritz bringt seit Oktober 2023 frischen Wind in das SEO Team der internetwarriors. Mit seinem großen Interesse für Online Marketing und seiner Leidenschaft für SEO Strategien unterstützt er Unternehmen dabei, ihre digitale Präsenz zu verbessern. Seine zielstrebige und lösungsorientierte Arbeitsweise ermöglicht es den Kunden der internetwarriors ihre Ziele zu erreichen.