Möchten Sie Ihre Angular-Website für alle zugänglich machen? Dann bist du hier genau richtig.
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: