Chcesz, aby Twoja witryna Angular była dostępna dla wszystkich? To właściwe miejsce!
Udostępnienie aplikacji oznacza, że wszyscy użytkownicy, w tym osoby z niepełnosprawnościami, mogą z niej korzystać i rozumieć jej zawartość. Według Raportu Światowej Organizacji Zdrowia ponad miliard osób, czyli około 15% populacji świata, ma jakąś formę niepełnosprawności. Dlatego ułatwienia dostępu są priorytetem w każdym projekcie deweloperskim.
Z tego posta dowiesz się, jak dodać do procesu kompilacji aplikacji w Angularze testy dostępności codelyzera. To podejście pozwala wykrywać błędy związane z dostępnością bezpośrednio w edytorze tekstu podczas pisania kodu.
Wykrywanie niedostępnych elementów za pomocą narzędzia Codelyzer
codelyzer to narzędzie, które działa na podstawie TSLint i sprawdza, czy projekty Angular TypeScript są zgodne z zestawem reguł lintingu. Projekty skonfigurowane za pomocą interfejsu wiersza poleceń (CLI) Angulara domyślnie zawierają narzędzie Codelyzer.
Codelyzer ma ponad 50 reguł sprawdzających, czy aplikacja Angular jest zgodna ze sprawdzonymi metodami. Około 10 z nich służy do egzekwowania kryteriów dostępności. Więcej informacji o różnych testach ułatwień dostępu przeprowadzanych przez narzędzie Codelyzer i ich uzasadnieniach znajdziesz w artykule Nowe reguły ułatwień dostępu w narzędziu Codelyzer.
Obecnie wszystkie reguły ułatwień dostępu są eksperymentalne i domyślnie wyłączone. Możesz je włączyć, dodając je do pliku konfiguracji TSLint (tslint.json):
{
"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 współpracuje ze wszystkimi popularnymi edytorami tekstu i IDE. Aby używać go w VSCode, zainstaluj wtyczkę TSLint. W WebStorm TSLint jest domyślnie włączony. W przypadku innych edytorów zapoznaj się z README TSLint.
Po skonfigurowaniu sprawdzania ułatwień dostępu w narzędziu codelyzer podczas pisania kodu w plikach TypeScript lub szablonach wbudowanych będzie się wyświetlać wyskakujące okienko z błędami dotyczącymi ułatwień dostępu: