Google Lighthouse ist ein kostenfreies Tool, das Webseiten auf verschiedene Kriterien hin überprüft und bewertet. Dazu gehören unter anderem die Geschwindigkeit der Seite und SEO-Aspekte, aber auch die Barrierefreiheit. Du kannst Google Lighthouse direkt im Chrome Browser nutzen.
Google Lighthouse im Chrome Browser öffnen
Um Lighthouse zu nutzen, benötigst du den Chrome Browser. Google Lighthouse findest du ein wenig versteckt in den Entwicklertools. Hier siehst du Schritt für Schritt den Klickweg, um es aufzurufen:
- Google Chrome öffnen: Lade den Google Chrome Browser herunter, installiere ihn und starte ihn.
- Developer Tools öffnen: Klicke auf die drei Punkte in der rechten oberen Ecke, wähle „Weitere Tools“ und dann „Entwicklertools“.
Klicken, um das Bild zu vergrößern - Lighthouse Tab wählen: Klicke auf den Tab „Lighthouse“ in den Entwickler-Tools. (Windows Nutzer können die Schritte 2 und 3 abkürzen, indem sie in Chrome die Funktionstaste „F12“ drücken)
Klicken, um das Bild zu vergrößern - Scan starten: Rufe in der Adresszeile des Browsers die Website auf, die du untersuchen lassen willst. Wähle dann im Lighthouse Tab die Option „Bedienungshilfen“ und klicke auf „Seitenaufbau analysieren“.
Klicken, um das Bild zu vergrößern
Die Ergebnisse des Google Lighthouse Berichts verstehen
Nach Abschluss des Scans erhältst du einen Bericht mit der Gesamtpunktzahl deiner Website. Die Skala reicht von 0 bis 100.
Höchstwahrscheinlich wird deine WordPress Website nicht sofort 100 Punkte erreichen. Du erhältst aber eine detaillierte Liste mit Hinweisen, wo du ansetzen kannst, um die Barrierefreiheit deiner Webpräsenz zu optimieren.
Hier sind einige wichtige Hinweise, die dir dabei weiterhelfen:
Accessibility Score: Die Gesamtpunktzahl deiner barrierearmen WordPress Website
Dieser Wert gibt dir mithilfe einer Gesamtpunktzahl eine allgemeine Vorstellung davon, wie barrierefrei deine Website ist. Bei der Optimierung deiner WordPress Website solltest du einen hohen Accessibility Score, also Werte zwischen 90 und 100, anstreben.
Wichtige Metriken und Empfehlungen für die Barrierefreiheit von WordPress Seiten
Wenn du ganz neu in das Thema “Barrierefreie WordPress Website” einsteigst, kannst du dich mit gutem Gewissen auf einzelne Metriken konzentrieren. Oftmals lassen sich damit schon deutliche Verbesserungen der Gesamtpunktzahl erreichen. Außerdem solltest du Barrierefreiheit als einen Prozess verstehen, an dem du konstant arbeiten wirst. Es ist also vollkommen in Ordnung, mit kleinen Schritten anzufangen.
Folgende Metriken eignen sich gut, um damit zu beginnen:
- Kontrastverhältnis: Stelle sicher, dass der Text auf deiner Website einen ausreichenden Kontrast zum Hintergrund hat. Dies hilft Menschen mit Sehschwächen, den Inhalt besser zu lesen.
- Alt-Texte für Bilder: Jeder Bildinhalt sollte einen beschreibenden Alternativtext haben, damit Screenreader den Inhalt vorlesen können.
- Aria-Labels: Verwende Aria-Labels, um interaktive Elemente wie Buttons und Links besser zugänglich zu machen.
Weitere Informationen:
Konkrete Maßnahmen zur Verbesserung der Barrierefreiheit deiner WordPress Website
Nachdem du den Bericht von Google Lighthouse durchgesehen hast, kannst du gezielte Maßnahmen ergreifen, um die Barrierefreiheit deiner WordPress Website zu verbessern. Hier sind einige praktische Tipps:
Farbkontrast der Website prüfen und bei Bedarf anpassen
Verwende Tools wie den Contrast Checker von Adobe, um sicherzustellen, dass deine gewählten Farben den empfohlenen Kontrastverhältnissen entsprechen. Passe die Farben gegebenenfalls in deinem WordPress-Theme an, falls bestimmte Kombinationen als ungeeignet eingestuft werden. Wir nutzen auf unserer Website beispielsweise regelmäßig weißen Text auf dunkelblauem Hintergrund für Kacheln. Diese Kombination besteht den Test problemlos:
Alt-Texte zu Bilddateien in WordPress hinzufügen
Bildern kann im sogenannten Alt-Tag ein Alternativtext hinzugefügt werden, der das Bild bzw. dessen Inhalt und Nutzen beschreibt. Dieser Alt-Text erfüllt mehrere Funktionen. Er ist zum einen hilfreich, falls die Bilddatei nicht geladen werden kann, da der Browser anstelle des Bildes den Alternativtext anzeigt. Zum anderen sind Alt-Texte aber auch für alle User:innen notwendig, die das Bild – beispielsweise aufgrund eines eingeschränkten Sehvermögens – nicht oder nicht vollständig sehen können. Ein Screenreader kann ihnen stattdessen den Alternativtext des Bildes als gesprochene Sprache ausgeben. Ohne Alternativtext können betroffene Personen die Information des Bildes nicht erfassen.
Um Alt-Texte hinzuzufügen, gehst du in die Mediathek deiner WordPress-Website und rufst jede einzelne Bilddatei nacheinander auf. Direkt in den Einstellungen des Bildes findest du ein Feld, das mit “Alternativer Text” beschriftet ist. Hier fügst du eine Beschreibung des Bildinhaltes hinzu:
Hinweis zu dekorativen Bildern:
Wenn Bilder nur zu dekorativen Zwecken – also ohne relevante inhaltliche Informationen für Leser:innen– in die Website eingebunden sind, bleibt ihr Alternativtext leer. Ein Screenreader überspringt den leeren Text dann.
ARIA-Labels integrieren, um klickbare Elemente verständlich zu machen
Mit ARIA-Labels ergänzt du zusätzliche Informationen zum HTML-Code interaktiver Elemente auf deiner Website, damit diese besser zugänglich werden.
Hier ein konkretes Beispiel: Nehmen wir an, dass deine Website einen Button für die Suchfunktion nutzt, der so aussieht:
<button>Suche</button>
Mit einem ARIA-Label kannst du den HTML-Code so erweitern, dass die Funktion des Buttons kommuniziert wird:
<button aria-label=“Suchfunktion öffnen“>Suche</button>
Der Screenreader liest dann den Text „Suchfunktion öffnen“ vor, anstatt einfach nur “Button” zu sagen, sodass User:innen genau wissen, was passiert, wenn sie auf diesen Button klicken.
Falls du selbst nicht in der Lage bist, den Code der Website zu editieren, helfen dir zahlreiche WordPress Plugins dabei, ARIA-Labels zu deiner Webseite hinzuzufügen. ARIA-Labels sind zudem ein recht komplexes Feld, wenn man zum ersten Mal damit konfrontiert wird. Gutes Material zum Einlesen in das Thema findest du beispielsweise in den Umsetzungshilfen des Portal Barrierefreiheit unter www.barrierefreiheit-dienstekonsolidierung.bund.de.
Barrierefreiheit für deine WordPress Website ist ein Prozess
Du ahnst es jetzt vielleicht schon: Barrierefreiheit ist keine einmalige Aufgabe. Es ist wichtig, das Thema nicht aus den Augen zu verlieren und – insbesondere wenn du einen Blog betreibst – neue Inhalte fortlaufend auf ihre Zugänglichkeit zu testen. Mit regelmäßigen Überprüfungen und gezielten Maßnahmen kannst du sicherstellen, dass deine Website für alle Nutzer:innen zugänglich ist. So kannst du mithelfen, das Web zu einem Ort für alle Menschen zu machen. Auch wir sind gerade dabei zu lernen, wie barrierefreie Webinhalte erstellt werden. In den nächsten Monaten findest du daher noch weitere Beiträge zum Thema Barrierefreiheit in unserem Blog.