Barrierefreiheit deiner Angular App mit Codelyzer prüfen

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

Minko Gechev

Zama Khan Mohammed

Eine barrierefreie App bedeutet, dass alle Nutzer, auch Nutzer mit besonderen Bedürfnissen, sie verwenden und die Inhalte verstehen können. Laut dem Weltgesundheitsbericht haben mehr als eine Milliarde Menschen – etwa 15% der Weltbevölkerung – irgendeine Form von Behinderung. Barrierefreiheit hat daher bei jedem Entwicklungsprojekt Priorität.

In diesem Beitrag erfahren Sie, wie Sie die Barrierefreiheitsprüfungen von Codelyzer zum Build-Prozess für eine Angular-App hinzufügen. So können Sie Fehler in Bezug auf Bedienungshilfen direkt im Texteditor erkennen, während Sie programmieren.

Codelyzer verwenden, um nicht zugängliche Elemente zu erkennen

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

Codelyzer hat über 50 Regeln, mit denen geprüft wird, ob eine Angular-Anwendung den Best Practices entspricht. Davon gibt es etwa zehn Regeln zur Durchsetzung der Kriterien für die Barrierefreiheit. Weitere Informationen zu den verschiedenen Barrierefreiheitsprüfungen von Codelyzer und ihren Begründungen finden Sie im Artikel New Accessibility Rules in Codelyzer (Neue Regeln für Barrierefreiheit im Codelyzer).

Derzeit sind alle Regeln für Bedienungshilfen experimentell und standardmäßig deaktiviert. Sie können sie aktivieren, indem Sie sie zur 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. Lesen Sie für andere Editoren die README von TSLint.

Nachdem die Bedienungshilfenprüfungen in Codelyzer eingerichtet sind, wird ein Pop-up angezeigt, in dem Bedienungshilfen in TypeScript-Dateien oder Inline-Vorlagen während des Programmierens angezeigt werden:

<ph type="x-smartling-placeholder">

</ph>

Codelyzer-Pop-up mit einem Fehler beim Beschriften eines Formularelements

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

Codelyzer ergänzend

Lighthouse ist ein weiteres Tool, mit dem Sie Bedienungshilfen 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 während der Entwicklung statisch, ohne sie auszuführen. Das bedeutet, dass Sie während der Entwicklung direktes Feedback im Texteditor oder Terminal erhalten können. Im Gegensatz dazu führt Lighthouse tatsächlich Ihre Anwendung aus und führt eine Reihe von Prüfungen mit dynamischen Analysen durch.

Beide Tools können für den Entwicklungsablauf nützlich sein. Lighthouse bietet angesichts der durchgeführten Prüfungen eine bessere Abdeckung. Mit Codelyzer lassen sich dagegen schnellere Iterationen vornehmen, da in Ihrem Texteditor ständig Feedback erhalten wird.

Barrierefreiheitsprüfungen in der kontinuierlichen Integration erzwingen

Die Einführung statischer Barrierefreiheitsprüfungen in Ihre Continuous Integration (CI) kann eine großartige Verbesserung für Ihren Entwicklungsablauf sein. Mit Codelyzer kannst du ganz einfach bestimmte Regeln für die Barrierefreiheit oder andere Praktiken erzwingen, indem du ng lint für jede Codeänderung ausführst (z. B. für jede neue Pull-Anfrage).

So kann Ihr CI-Team Ihnen bereits vor der Codeüberprüfung mitteilen, ob Verstöße gegen die Barrierefreiheit vorliegen.

Fazit

So verbessern Sie die Barrierefreiheit Ihrer Angular-App:

1. Experimentelle Bedienungshilfen in Codelyzer aktivieren
2. Mit der Angular CLI können Sie für Ihr gesamtes Projekt Linting für Bedienungshilfen durchführen.
3. Beheben Sie alle von Codelyzer gemeldeten Probleme mit der Barrierefreiheit.
4. Prüfen Sie die Barrierefreiheit während der Laufzeit mit Lighthouse.