Wir haben mit einem W3C WAI’s Bad Demo Tool begonnen, das nebeneinander einen Vergleich zwischen einer nicht barrierefreien und einer barrierefreien Webseite zeigt. Durch den direkten Bildvergleich lassen sich häufige Barrieren sofort erkennen, zum Beispiel fehlende Bezeichnungen (Labels), ungünstige Tab-Reihenfolgen und unbeschriftete Formularelemente.

Weil es etwas schwierig sein kann, abstrakte Richtlinien zu verstehen, bis sie angewendet (oder verletzt) werden, kann dieses Tool konkrete Beispiele liefern.

Unser zweiter Tipp stellte die W3C Easy Checks vor – eine kostenlose Übersicht, mit der Sie jede Seite auf grundlegende Barrierefreiheitskriterien hin prüfen können. Schritt für Schritt wird erläutert, wie Sie aussagekräftige Seitentitel anlegen, Alternativtexte hinzufügen und Überschriften korrekt strukturieren.

Während unser BFSG Guide einen Leitfaden liefert, welche Punkte noch anstehen, findet ihr bei den W3C Easy Checks fassbare Beispiele, wie gewisse Anforderungen umgesetzt werden können.

Für die dritte Woche haben wir uns entschieden, ein paar Farbkontrastprüfer vorzustellen. Ausreichender Kontrast zwischen Text und Hintergrund ist essenziell für Nutzer*innen mit eingeschränktem Sehvermögen oder Farbenblindheit. Wir haben drei Lösungen empfohlen:

• https://www.skynettechnologies.com/color-contrast-checker: Dieses Online-Tool bewertet die Unterschiede in Helligkeit oder Farbe zwischen Text und seinem Hintergrund. Es stellt sicher, dass Text vor seinem Hintergrund gut lesbar ist, insbesondere für Menschen mit Sehbeeinträchtigungen.
• DigitalA11Y: Eine Chrome-Browser-Erweiterung, mit der Farbkombinationen anhand der WCAG-Kontrastverhältnisse geprüft werden können und passende Palettenvorschläge anbietet. Entwickelt für Designer*innen, Entwickler*innen und Barrierefreiheitsexpert*innen, um den Farbkontrast einer Website zu überprüfen oder zu auditieren.
• Accessibility Checker – AI EAA: Ein Tool für iOS-Geräte, das den Kontrast zwischen zwei Farben auf einer Website, sei es im Browser oder in einem Screenshot, ermittelt. Damit könnt Ihr direkt von eurem Handy aus den BFSG Check starten.

Da nicht jede*r in Ihrem Team ist Entwickler*in, aber jede*r kann einen Beitrag zur Barrierefreiheit leisten. Wir haben drei Tools vorgestellt, die keine Programmierkenntnisse erfordern:

• WAVE: Eine Browser-Erweiterung, die mithilfe von Symbol-Overlays fehlende Alt-Texte, Probleme mit Überschriften und Kontrastmängel visualisiert.
• Koa11y: Ein Freemium-Tool, das automatisierte WCAG Scans mit geführten manuellen Prüfungen kombiniert und teilbare Dashboards für Stakeholder erstellt.
• Lighthouse: Googles Open-Source-Tool in den Chrome DevTools, das hochrangige Accessibility-Audits zusammen mit Performance- und SEO-Checks durchführt.

Für Teams, die mit Code vertraut sind, haben wir in der fünften Woche Tools vorgestellt, die sich in Ihren Build-Prozess integrieren lassen oder eine tiefere Inspektion Ihres Markups ermöglichen:

• Skynette Accessibility Checker: Ein webbasiertes Analyse-Tool, das sich an den neuesten WCAG-Richtlinien orientiert und detaillierte Befunde mit konkreten Handlungsempfehlungen liefert.
• Axe: Eine Open-Source-Bibliothek (und Browser-Erweiterung), die sich in CI/CD-Pipelines einbinden lässt und Barrieren schon beim Code-Commit erkennt.
• Lighthouse: Auch hier nützlich für einen schnellen Überblick  insbesondere, wenn es automatisch in den Testablauf eingebunden wird.
• Wick-a11y: Ein GitHub-Tool, das zusätzliche technische Einblicke bietet und ideal ist für Teams, die detailliertere Kontrolle über Regeln und individuelle Skripte wünschen.