Vor kurzem habe ich bei Accessibility NYC (a11yNYC) in Lower Manhattan einen Vortrag mit dem Titel „Werkzeuge des Handwerks: Barrierefreiheit ohneKosten“ gehalten. Im Mittelpunkt der Veranstaltung standen Tools zur Barrierefreiheit – in welche man investieren sollte, wie man das Beste aus ihnen herausholt und wann man kostenpflichtige Funktionen in Betracht ziehen sollte.
In diesem Beitrag fasse ich einige der Erkenntnisse zusammen, die ich bereits vorgestellt habe. Wir werden uns Tools ansehen, die für drei Entwicklungsphasen konzipiert sind: das Schreiben von Code, das lokale Testen sowie die Phase nach dem Commit und vor der Produktion. Dabei werde ich mich insbesondere auf kostenlose Linting-Tools und Browser-Erweiterungen konzentrieren, die Sie sofort nutzen können.
Die Auswahl und Nutzung von Tools erfordert einen gewissen Zeitaufwand und oft auch finanzielle Investitionen. Mein Ziel ist es, Ihnen einige leicht zugängliche, kostenlose Tools vorzustellen, die Ihnen den Einstieg in die digitale Barrierefreiheit erleichtern und sicherstellen, dass Sie die richtigen Investitionen für Ihre Entwicklungsanforderungen tätigen können.
Die vollständige Präsentation können Sie sich unten ansehen:
Linters
Beim Schreiben von Code, also in der ersten Entwicklungsphase, können kostenlose Linter sehr nützlich sein. Linter sind so etwas wie Rechtschreibprüfprogramme für Ihren Code, die Fehler anhand vordefinierter Regeln schnell erkennen.
Eines der am weitesten verbreiteten Linter-Tools für Barrierefreiheit ist das „eslint-plugin-jsx-a11y“, das von der JSX-ESLint-Organisation auf GitHub gepflegt wird:
Dieses Plugin führt eine statische Auswertung des JSX durch, um Barrierefreiheitsprobleme in React-Anwendungen zu erkennen. Da es nur Fehler im statischen Code erkennt, sollten Sie es in Kombination mit @axe-core/react verwenden, um die Barrierefreiheit des gerenderten DOM zu testen. Betrachten Sie diese Tools lediglich als einen Schritt innerhalb eines umfassenderen Barrierefreiheitstestprozesses und testen Sie Ihre Anwendungen stets mit assistiver Technologie.
Mit diesem fantastischen Tool können Sie Fehler in Ihrer Entwicklungsumgebung aufspüren und bestimmte Verstöße gegen die WCAG-Richtlinien genau lokalisieren. Es gibt eine umfassende Liste vorgefertigter Regeln, und Sie können sogar eigene Regeln erstellen.
Ich empfehle dir, auch den axe DevTools Linter Plugin auszuprobieren. Dieser Linter kennzeichnet Fehler durch eine rote Wellenlinie unter dem problematischen Code. Außerdem bietet er einen Link zur „ Deque University“, wo Sie umfassende Informationen zu Korrekturen, von der Verletzung betroffenen Behinderungen, verletzten WCAG-Kriterien und vielem mehr erhalten.
Diese Funktionen sind in der folgenden Abbildung zu sehen:
Eine weitere Neuerung ist die Ausgabe auf der Registerkarte „Probleme“. Eine zusätzliche Funktion der Pro-Version bietet dem Nutzer die Möglichkeit, einen Pull-Request zu blockieren, der Probleme hinsichtlich der Barrierefreiheit aufweist.
Browser-Erweiterungen
Das lokale Testen ist die zweite Entwicklungsphase. Sehen wir uns drei verschiedene Arten von Browser-Erweiterungen an, die beim Aufspüren von Barrierefreiheitsproblemen während des Testens sehr nützlich sein können:
Mit Lighthouse können Sie Audits durchführen, um die Seitenleistung zu bewerten und Barrierefreiheitsprobleme zu identifizieren. Lighthouse nutzt ein Bewertungssystem und Diagramme. Sie können das Tool außerdem nutzen, um die Leistung, die Suchmaschinenoptimierung (SEO) und vieles mehr zu testen.
WAVE zeigt Barrierefreiheitsprobleme direkt auf der Seite visuell an und eignet sich daher hervorragend für die manuelle Überprüfung und zum Lernen.
Die axe DevTools-Erweiterungliefert entwicklerorientierte, code-genaue Ergebnisse ohne Fehlalarme und bietet detaillierte Anleitungen zur Behebung von Problemen. Mit axe DevTools können Sie nicht nur Probleme identifizieren, sondern auch lernen, wie Sie diese beheben können. Starten Sie noch heute mit einer kostenlosen Testversion.
Im Rahmen meines Vortrags haben wir ein Problem mit dem Farbkontrast besprochen. Nachdem wir das Problem behoben hatten, haben wir die Seite erneut eingescannt und festgestellt, dass die Fehler verschwunden waren.
Im folgenden Video erhalten Sie einen Überblick über die Axe DevTools-Erweiterung:
Pull-Request/Überprüfung
Unsere letzten Tools fügen sich in die dritte Entwicklungsphase ein – die Überprüfung, den Pull-Request und den übergeordneten CI/CD-Prozess:
Die Axe Developer Hub API erfasst die Barrierefreiheit in Ihrem gesamten Repository, überwacht Git-Commits auf Regressionen und lässt sich in GitHub integrieren, um Pull-Anfragen zu blockieren, die neue Probleme hinsichtlich der Barrierefreiheit verursachen. Damit können Sie Trends im Zeitverlauf visualisieren und Ergebnisse einfach teilen oder exportieren. Axe Developer Hub bietet eine kostenlose Testversion (keine Kreditkarte erforderlich) sowie einen API-Schlüssel und einen Code-Schnipsel für die einfache Integration in Ihren Arbeitsablauf.
Die WAVE-API automatisiert Barrierefreiheitsprüfungen auf Seitenebene, indem sie URLs übermittelt und JSON- oder XML-Ergebnisse auf der Grundlage vollständig gerenderter Seiten – einschließlich dynamischer Inhalte – zurückgibt. Beide Tools sind zunächst kostenlos und wechseln anschließend zu einem kostenpflichtigen Modell.
Nächste Schritte
Der Erwerb und die Nutzung eines Tools sind eine Investition in Ihr Handwerk, und kostenlose Tools sind eine hervorragende Möglichkeit, um in den Bereich der digitalen Barrierefreiheit einzusteigen.
Sie werden in der Lage sein, sofortige Verbesserungen vorzunehmen, und – was noch wichtiger ist – Sie werden auch ein viel klareres Bild davon entwickeln, welche Investitionen Sie tätigen müssen, um langfristig barrierefrei zu werden und zu bleiben.
Mit den richtigen Werkzeugen und einem angemessenen Investitionsaufwand können Sie damit beginnen, Produkte und Dienstleistungen zu entwickeln, die für alle nutzbar sind – auch für Menschen mit Behinderungen.
Lasst uns alle gemeinsam daran arbeiten, das Internet barrierefreier zu gestalten.
