Barrierefreiheit deiner Angular App mit Codelyzer prüfen

Möchten Sie Ihre Angular-Website für alle zugänglich machen? Dann bist du hier genau richtig.

Minko Gechev

Zama Khan Mohammed

Wenn Sie Ihre App barrierefrei gestalten, können alle Nutzer, auch solche mit besonderen Bedürfnissen, sie verwenden und die Inhalte verstehen. Laut dem World Health Report haben mehr als eine Milliarde Menschen – etwa 15% der Weltbevölkerung – eine Form von Behinderung. Barrierefreiheit hat also bei jedem Entwicklungsprojekt Priorität.

In diesem Beitrag erfahren Sie, wie Sie dem Build-Prozess für eine Angular-App die Barrierefreiheitsprüfungen von Codelyzer hinzufügen. Mit diesem Ansatz können Sie Barrierefreiheitsfehler direkt in Ihrem Texteditor erkennen, während Sie programmieren.

Codelyzer zum Erkennen nicht zugänglicher Elemente verwenden

codelyzer ist ein Tool, das auf TSLint basiert und prüft, ob Angular-TypeScript-Projekte eine Reihe von Linting-Regeln einhalten. Projekte, die mit der Angular-Befehlszeile (CLI) eingerichtet wurden, enthalten standardmäßig Codelyzer.

codelyzer enthält über 50 Regeln, mit denen geprüft wird, ob eine Angular-Anwendung Best Practices entspricht. Davon gibt es etwa zehn Regeln zur Durchsetzung von Barrierefreiheitskriterien. Informationen zu den verschiedenen von Codelyzer bereitgestellten Barrierefreiheitsprüfungen und ihren Begründungen finden Sie im Artikel New Accessibility rules in Codelyzer.

Derzeit sind alle Barrierefreiheitsregeln experimentell und standardmäßig deaktiviert. Sie können sie aktivieren, indem Sie sie der TSLint-Konfigurationsdatei (tslint.json) hinzufügen:

{
  "rulesDirectory": [
    "codelyzer"
  ],
  "rules": {
    ...,
    "template-accessibility-alt-text": true,
    "template-accessibility-elements-content": true,
    "template-accessibility-label-for": true,
    "template-accessibility-tabindex-no-positive": true,
    "template-accessibility-table-scope": true,
    "template-accessibility-valid-aria": true,
    "template-click-events-have-key-events": true,
    "template-mouse-events-have-key-events": true,
    "template-no-autofocus": true,
    "template-no-distracting-elements": true
  }
}

TSLint funktioniert mit allen gängigen Texteditoren und IDEs. Wenn Sie es mit VSCode verwenden möchten, installieren Sie das TSLint-Plug-in. In WebStorm ist TSLint standardmäßig aktiviert. Informationen zu anderen Editoren finden Sie in der README von TSLint.

Wenn Sie die Bedienungshilfe-Prüfungen von Codelyzer eingerichtet haben, wird beim Programmieren ein Pop-up mit Bedienungshilfe-Fehlern in TypeScript-Dateien oder Inline-Vorlagen angezeigt:

Verwenden Sie den Befehl ng lint, um das gesamte Projekt (einschließlich externer Vorlagen) zu prüfen:

Codelyzer ergänzen

Lighthouse ist ein weiteres Tool, mit dem Sie die Barrierefreiheit in Ihrer Angular-Anwendung erzwingen können. Der Hauptunterschied zwischen Codelyzer und Lighthouse besteht darin, wann die Prüfungen durchgeführt werden. Codelyzer analysiert die Anwendung statisch während der Entwicklung, ohne sie auszuführen. Das bedeutet, dass Sie während der Entwicklung direkt in Ihrem Texteditor oder im Terminal Feedback erhalten können. Im Gegensatz dazu wird Ihre Anwendung von Lighthouse ausgeführt und es werden eine Reihe von Prüfungen mit dynamischer Analyse durchgeführt.

Beide Tools können nützliche Bestandteile Ihres Entwicklungsablaufs sein. Lighthouse bietet aufgrund der durchgeführten Prüfungen eine bessere Abdeckung, während Sie mit Codelyzer schneller iterieren können, da Sie in Ihrem Texteditor ständig Feedback erhalten.

Barrierefreiheitsprüfungen in der Continuous Integration erzwingen

Die Einführung statischer Barrierefreiheitsprüfungen in Ihre Continuous Integration (CI) kann eine große Verbesserung für Ihren Entwicklungsablauf sein. Mit Codelyzer können Sie bestimmte Barrierefreiheitsregeln oder andere Praktiken ganz einfach erzwingen, indem Sie ng lint für jede Codeänderung ausführen (z. B. für jeden neuen Pull-Request).

So kann Ihre CI Ihnen schon vor der Codeüberprüfung mitteilen, ob es Verstöße gegen die Barrierefreiheit gibt.

Fazit

So verbessern Sie die Barrierefreiheit Ihrer Angular-App:

1. Aktivieren Sie die experimentellen Bedienungshilferegeln in Codelyzer.
2. Führen Sie mit der Angular CLI ein Accessibility-Linting für Ihr gesamtes Projekt durch.
3. Beheben Sie alle von Codelyzer gemeldeten Probleme mit der Barrierefreiheit.
4. Sie können Lighthouse für Barrierefreiheitsprüfungen zur Laufzeit verwenden.