Reemt Windmann

So testest Du deine Website auf Barrierefreiheit

Die digitale Barrierefreiheit gewinnt immer mehr an Bedeutung – nicht nur durch gesetzliche Vorgaben wie das Barrierefreiheitsstärkungsgesetz (BFSG), sondern auch, um eine inklusive Nutzererfahrung zu ermöglichen. Doch wie findest du heraus, ob deine Website barrierefrei ist? Gerade für kleinere Websites gibt es eine einfache und kostenfreie Lösung: das Tool WAVE. In diesem Beitrag erfährst du, wie du deine Website mit WAVE auf Barrierefreiheit testest und welche Maßnahmen du ergreifen kannst, um bestehende Probleme zu beheben.


Warum ist Barrierefreiheit wichtig?

Eine barrierefreie Website ist für alle Menschen zugänglich – unabhängig von körperlichen Einschränkungen. Menschen mit Sehbehinderungen, motorischen Einschränkungen oder anderen Beeinträchtigungen können von einer optimierten Website profitieren. Darüber hinaus verbessert Barrierefreiheit die Usability für alle Nutzer und trägt zur Suchmaschinenoptimierung (SEO) bei.


Das WAVE-Tool: Einfache Prüfung auf Barrierefreiheit

Das kostenlose Analyse-Tool WAVE wird vom WebAIM-Institut der Universität Utah betrieben und ist eine der besten Lösungen, um die Barrierefreiheit einer Website schnell und unkompliziert zu überprüfen.

Schritt 1: WAVE aufrufen

Besuche die Website von WAVE und gebe die URL deiner Website in das Adressfeld ein. Beachte, dass WAVE nur einzelne Seiten prüfen kann. Falls deine Website aus mehreren Unterseiten besteht, solltest du repräsentative Seiten testen.

Schritt 2: Analyseergebnisse verstehen

Nach der Analyse zeigt WAVE verschiedene Kategorien von Ergebnissen an:

  • Errors (Fehler): Diese sind dringend zu beheben, da sie die Nutzung deiner Website erheblich erschweren oder unmöglich machen. Ein häufiger Fehler sind z. B. „leere Links“, die keine Alternativtexte haben.

 

  • Contrast Errors (Kontrastfehler): Diese betreffen die Lesbarkeit von Texten. WAVE weist auf Stellen hin, an denen der Farbkontrast nicht ausreichend ist. Falls eine Anpassung des Kontrasts das Corporate Design beeinträchtigen würde, kann eine alternative Lösung, wie eine Kontrastanpassung über Drittanbieter-Tools, sinnvoll sein.

 

  • Alerts (Warnhinweise): Diese zeigen potenzielle Probleme an, die du manuell überprüfen solltest. Ein Beispiel ist der Hinweis, dass ein Video eine Transkription benötigt.

 

 

Hier erhälst du eine Liste von Fehlern, Kontrastfehlern und Warnungen. Diese Punkte sind für dich relevant. Features, strukturelle Elemente und die barrierefreien Rich Items (ARIA) werden nur der Vollständigkeit halber angezeigt.


Schritt 3: Fehler beheben

  • Errors: Die Hauptaufgabe bei der Barrierefreiheit ist es, deine Seite „error-frei“ zu halten. Es handelt sich um klare Fehlfunktionen, die in der Regel auch für gesunde Menschen oder Suchmaschinen problematisch sind. Im Screenshot siehst du zum Beispiel „leere Links“ – Links ohne Alternativtexte. Solche Fehler entstehen häufig, wenn Ankerlinks innerhalb der Website gesetzt werden. In unserem Fall ist es ein Pfeil, der die Seite beim Anklicken etwas herunterscrollt. Wenn du auf die Fehlermeldung klickst, siehst du, was auf deiner Website nicht stimmt. Behebe diesen Fehler, indem du dich in deine Website einloggst und unter dem Link einen Alternativtext setzt. Verfahre so mit allen Fehlern.



  • Contrast Errors (Kontrastfehler): „Contrast Errors“ sind ohne Drittanbietersoftware kaum zu beheben. Für barrierefreie Websites wird ein maximaler Kontrast benötigt. Wenn deine Website jedoch nicht in Schwarz-Weiß gestaltet werden soll, musst du diesen Fehler unter Umständen hinnehmen.


Möchtest du auf Nummer sicher gehen, kannst du eine Drittanbietersoftware wie z. B. von DigiAccess einsetzen, mit der eingeschränkte Nutzer den Kontrast individuell anpassen können, ohne dass du dein Corporate Design verändern musst.

  • Alerts (Warnhinweise): Alerts sind Warnhinweise, die du dir anschauen solltest. Unter dem „i“-Symbol kannst du dir ansehen, was der Grund für den Alert ist. Nicht jeder Alert ist auch ein Fehler. So weist das „HTML5 Video or Audio“-Alert beispielsweise darauf hin, dass Video- oder Audioinhalte ein Transkript benötigen, wenn gesprochenes Wort enthalten ist. Hast du das Transkript bereits oder enthält das Video keine Audiokomponenten, kannst du den Alert ignorieren.


Wir empfehlen dir, alle Alerts durchzugehen und von Fall zu Fall zu entscheiden, welche du bearbeitest, ignorierst oder in der Barrierefreiheitserklärung angeben möchten.


Schritt 4: Barrierefreiheitserklärung anpassen

Falls bestimmte Anpassungen technisch oder aus Designgründen nicht möglich sind zum Beispiel, wenn die Anpassung des Kontrasts, aufgrund des Corporate Designs nicht möglich ist, solltest du dies in einer Barrierefreiheitserklärung dokumentieren. So informierst du Nutzer transparent über bestehende Einschränkungen und mögliche Alternativen.


Fazit: Barrierefreiheit testen und verbessern

Mit WAVE kannst du schnell und einfach überprüfen, wie barrierefrei deine Website ist. Besonders für kleinere Websites ist das Tool eine hervorragende Lösung, um erste Maßnahmen ohne zusätzliche Kosten umzusetzen. Eine kontinuierliche Optimierung hilft nicht nur, gesetzlichen Anforderungen gerecht zu werden, sondern macht deine Website für alle Nutzer besser zugänglich.

Ähnliche Beiträge