Barrierefreiheit deiner Angular App mit Codelyzer prüfen

Möchten Sie Ihre Angular-Website für alle zugänglich machen? Dann sind Sie 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 Weltgesundheitsbericht haben mehr als eine Milliarde Menschen – etwa 15% der Weltbevölkerung – eine Form von Behinderung. Daher hat die Barrierefreiheit eine Priorität für jedes Entwicklungsprojekt.

In diesem Beitrag erfahren Sie, wie Sie die Barrierefreiheitsprüfungen von codelyzer in den Erstellungsprozess für eine Angular-App einbinden. Auf diese Weise können Sie Fehler bei der Barrierefreiheit direkt im Texteditor erkennen, während Sie programmieren.

Mit Codelyzer nicht zugängliche Elemente erkennen

codelyzer ist ein Tool, das sich auf TSLint befindet und prüft, ob Angular TypeScript-Projekte einer Reihe von Linting-Regeln entsprechen. Projekte, die mit der Angular-Befehlszeile eingerichtet wurden, enthalten Codelyzer standardmäßig.

Codelyzer hat über 50 Regeln, um zu überprüfen, ob eine Angular-Anwendung den Best Practices entspricht. Davon gibt es etwa zehn Regeln zur Durchsetzung von Kriterien für die Barrierefreiheit. Weitere Informationen zu den verschiedenen von Codelyzer bereitgestellten Bedienungshilfen und deren Begründungen finden Sie im Artikel New Accessibility Rules in Codelyzer (Neue Regeln für die Barrierefreiheit in Codelyzer).

Derzeit befinden sich alle Regeln für Bedienungshilfen in der Testphase und sind 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 ist mit allen gängigen Texteditoren und IDEs kompatibel. Installieren Sie das TSLint-Plug-in, um es mit VSCode zu verwenden. In WebStorm ist TSLint standardmäßig aktiviert. Informationen zu anderen Bearbeitern finden Sie in der Readme-Datei für TSLint.

Wenn die Barrierefreiheitsprüfungen von Codelyzer eingerichtet sind, wird beim Codieren ein Popup-Fenster angezeigt, in dem Fehler bezüglich der Barrierefreiheit in TypeScript-Dateien oder Inline-Vorlagen angezeigt werden:

Ein Codelyzer-Pop-up mit einem Labelfehler für Formularelemente.

Verwenden Sie den Befehl ng lint, um Linting für das gesamte Projekt (einschließlich externer Vorlagen) durchzuführen:

Codelyzer ergänzen

Lighthouse ist ein weiteres Tool, mit dem Sie Bedienungshilfen in Ihrer Angular-Anwendung erzwingen können. Der Hauptunterschied zwischen Codelyzer und Lighthouse ist der Zeitpunkt, zu dem die Prüfungen durchgeführt werden. Codelyzer analysiert die Anwendung während der Entwicklung statisch, ohne sie auszuführen. Das bedeutet, dass Sie während der Entwicklung direktes Feedback in Ihrem Texteditor oder im Terminal erhalten können. Im Gegensatz dazu führt Lighthouse eine Reihe von Prüfungen mit dynamischen Analysen durch.

Beide Tools können im Entwicklungsablauf hilfreich sein. Lighthouse bietet eine bessere Abdeckung angesichts der durchgeführten Prüfungen. Mit Codelyzer hingegen kannst du durch ständiges Feedback in deinem Texteditor schneller Iterationen durchführen.

Prüfung der Barrierefreiheit in der Continuous Integration erzwingen

Die Einführung statischer Barrierefreiheitsprüfungen in der Continuous Integration (CI) kann Ihren Entwicklungsablauf erheblich verbessern. Mit Codelyzer kannst du ganz einfach bestimmte Regeln zur Barrierefreiheit oder andere Praktiken durchsetzen, indem du ng lint bei jeder Codeänderung ausführst (z. B. für jede neue Pull-Anfrage).

So kann Ihnen das CI-Team sagen, ob es Verstöße gegen die Barrierefreiheit gibt, noch bevor Sie mit der Codeüberprüfung fortfahren.

Fazit

So verbessern Sie die Barrierefreiheit Ihrer Angular App:

1. Experimentelle Regeln für Bedienungshilfen in Codelyzer aktivieren
2. Führen Sie mit der Angular CLI Linting für Bedienungshilfen für Ihr gesamtes Projekt durch.
3. Alle von Codelyzer gemeldeten Probleme mit der Barrierefreiheit wurden behoben.
4. Verwenden Sie Lighthouse für Barrierefreiheitsprüfungen während der Laufzeit.