Google Chrome Lighthouse
Google Chrome Lighthouse ist ein Open-Source-Tool von Google zur Analyse und Optimierung von Webseiten und Barrierefreiheit testen. Es hilft Entwicklern, die Leistung, Barrierefreiheit, SEO und Best Practices ihrer Websites zu bewerten und zu verbessern. Lighthouse kann direkt in den Chrome-Entwicklertools, über die Kommandozeile oder als eigenständiges Tool verwendet werden.
Der Barrierefreiheitstest von Lighthouse überprüft, ob eine Website für Menschen mit Behinderungen gut nutzbar ist. Dabei werden verschiedene Kriterien bewertet, darunter:
- Kontraste von Text und Hintergrund: Stellt sicher, dass Texte für Menschen mit Sehschwäche gut lesbar sind.
- Alternativtexte für Bilder: Prüft, ob Bilder mit passenden Alt-Texten versehen sind.
- Nutzung von ARIA-Attributen: Bewertet die korrekte Implementierung von ARIA-Labels zur Unterstützung assistiver Technologien.
- Tastatur-Navigation: Untersucht, ob alle interaktiven Elemente ohne Maus bedienbar sind.
- Strukturierte Überschriften und semantisches HTML: Gewährleistet eine logische Struktur für Screenreader.
Mozilla Firefox Developer Tools
Firefox stellt leistungsstarke Werkzeuge für Barrierefreiheitstests bereit. Der integrierte Accessibility Inspector (auf Deutsch: „Barrierefreiheit“) unterstützt Entwickler dabei, Probleme zu identifizieren und zu beheben. Er ist Teil der Entwicklerwerkzeuge, die über die F12-Taste aufgerufen werden können.
Der Accessiblity Inspector untergleidert sich in die drei Bereiche Überprüfung auf Probleme, Simulieren und Tab-Reihenfolge anzeigen.
Überprüfung auf Probleme mit Kontrast, Tastatur und Textbeschriftung
Der Firefox Accessibility Inspector unterstützt Entwickler dabei, die Barrierefreiheit ihrer Websites gezielt zu verbessern. Er überprüft unter anderem, ob die Farbkontraste ausreichend sind, um eine gute Lesbarkeit für Menschen mit Sehbeeinträchtigungen zu gewährleisten.
Zudem stellt er sicher, dass alle interaktiven Elemente per Tastatur erreichbar und bedienbar sind, was insbesondere für Nutzer mit motorischen Einschränkungen essenziell ist.
Darüber hinaus analysiert das Tool, ob Bedienelemente mit aussagekräftigen Labels versehen sind, sodass sie von assistiven Technologien wie Screenreadern korrekt interpretiert und ausgegeben werden können. Diese Funktionen helfen dabei, digitale Inhalte für alle Nutzer zugänglicher zu machen.
Simulation von Fehlsichtigkeiten
Der Firefox Accessibility Inspector ermöglicht die Simulation von Fehlsichtigkeiten wie Protanopie, Deuteranopie, Tritanopie. Entwickler können so testen, wie ihre Website für Menschen mit verschiedenen Formen der Farbfehlsichtigkeit aussieht und sicherstellen, dass Inhalte unabhängig von der Farbwahrnehmung verständlich bleiben.
Tab-Reihenfolge
Im Ausgangszustand zeigt der Accessibility Inspector die semantische Struktur des HTML-Dokuments. So lässt sich nachvollziehen, wie ein Screenreader die Website interpretiert.
Barrierefreiheit testen: WAVE Tool
Das WAVE-Tool von WebAIM (Web Accessibility in Mind) ist ein vielseitiges Werkzeug, das speziell für die Analyse der Barrierefreiheit von Webseiten entwickelt wurde. Es ist als Plugin für Browser verfügbar und bietet eine detaillierte Prüfung, wobei die Ergebnisse in sechs Hauptbereiche kategorisiert werden: Errors, Contrast Errors, Alerts, Features, Structural Elements und ARIA. Diese Kategorien helfen dabei, die verschiedenen Aspekte der Barrierefreiheit gezielt zu überprüfen und Schwachstellen zu identifizieren.
Das Tool ist englischsprachig und bietet eine intuitive Benutzeroberfläche. Ein besonderes Merkmal ist die Möglichkeit, die Anzeige von Styles (CSS-Designs) ein- und auszuschalten. Dadurch können Barrieren, die durch visuelle Gestaltungselemente verursacht werden, besser erkannt werden.
Die identifizierten Probleme werden direkt auf der analysierten Webseite hervorgehoben. Dies erleichtert es, die Fehlerquellen präzise zu lokalisieren und gezielt Maßnahmen zur Behebung zu ergreifen. Mit diesen Funktionen ist WAVE ein unverzichtbares Tool für Webentwickler, Designer und Accessibility-Experten, die barrierefreie Webseiten erstellen möchten.
Das WAVE-Tool lässt sich als Browser-Erweiterung für Chrome, Firefox und Edge installieren:
Chrome
- Besuchen Sie die Seite des WAVE-Tools im Chrome Web Store.
- Klicken Sie auf „Zu Chrome hinzufügen“
Firefox
- Öffnen Sie die Seite des WAVE-Tools im Firefox Add-ons Store.
- Klicken Sie auf „Zu Firefox hinzufügen“.
Edge
- Öffnen Sie die Seite des WAVE-Tools auf der Edge Add-on Website.
- Klicken Sie auf „Abrufen“ und anschließend auf „Erweiterung hinzufügen“.
Nach der Installation ist das WAVE-Icon in der Symbolleiste des Browsers verfügbar und kann direkt für Barrierefreiheitstests verwendet werden.
Barrierefreiheit testen: axe DevTools®
Die axe DevTools sind ein leistungsstarkes Tool zur Prüfung der Barrierefreiheit von Webseiten, entwickelt von Deque Systems. Sie sind als Browser-Erweiterung für Chrome, Firefox und Edge verfügbar und ermöglichen es Entwicklern, Barrierefreiheitstests direkt in der Entwicklungsumgebung durchzuführen.
Mit den axe DevTools lassen sich Barrieren schnell identifizieren und priorisieren. Die gefundenen Probleme werden übersichtlich dargestellt, mit klaren Erklärungen, warum sie Barrierefreiheit beeinträchtigen, und konkreten Vorschlägen zur Behebung. Das Tool deckt die gängigen Richtlinien wie die WCAG (Web Content Accessibility Guidelines) ab und bietet automatisierte Tests, ergänzt durch manuelle Prüfempfehlungen.
Die DevTools sind einfach zu bedienen, sowohl für Anfänger als auch für erfahrene Entwickler, und helfen dabei, Webseiten von Anfang an inklusiv und zugänglich zu gestalten.
So installieren Sie die axe DevTools für Chrome, Firefox und Edge:
- Besuchen Sie die Seite des axe DevTools im Chrome Web Store.
- Klicken Sie auf „Zu Chrome hinzufügen“
Firefox
- Öffnen Sie die Seite des axe DevTools im Firefox Add-ons Store.
- Klicken Sie auf „Zu Firefox hinzufügen“.
Edge
- Öffnen Sie die Seite des axe DevTools auf der Edge Add-on Website.
- Klicken Sie auf „Abrufen“ und anschließend auf „Erweiterung hinzufügen“.
Nach der Installation können Sie die axe DevTools in den Entwicklertools des Browsers aufrufen, um Webseiten direkt auf Barrierefreiheit zu prüfen.
NVDA Screenreader für Windows
Der NVDA Reader (NonVisual Desktop Access) ist ein kostenloser und quelloffener Screenreader für Windows. Er wurde speziell entwickelt, um blinden und sehbehinderten Menschen den Zugang zu digitalen Inhalten zu erleichtern. NVDA unterstützt eine breite Palette von Anwendungen, darunter Webbrowser, Textverarbeitungsprogramme, Tabellenkalkulationen und vieles mehr. Das Tool liest Texte sowie andere Bildschirminhalte laut vor und kann mit Braillezeilen verwendet werden. Es überzeugt durch einfache Bedienung, regelmäßige Updates und umfassende Unterstützung für verschiedene Sprachen. Er ist ein wertvolles Werkzeug zum Barrierefreiheit testen.
Der NVDA Reader kann kostenlos von der offiziellen Website heruntergeladen werden. Nach der Installation ist der Screenreader vollständig über die Tastatur bedienbar. Es gibt außerdem eine Übersicht der verfügbaren Tastenkombinationen.
Ein wichtiger Hinweis: Die sogenannte „NVDA-Taste“ entspricht standardmäßig der Einfg-Taste (oft nahe der „Num“-Taste am Ziffernblock).
mit der Tastenkombination Strg + Alt + N gestartet oder neu gestartet werden.
Das Beenden des Programms erfolgt in drei Schritten:
2. Navigieren Sie mit den Cursortasten nach unten zum Menüpunkt Beenden oder wählen Sie ihn direkt mit der Taste B aus.
3. Bestätigen Sie die Beendigung des Programms mit der Enter-Taste.