Kontrola ułatwień dostępu w aplikacji Angular za pomocą Codelyzer

Chcesz, aby Twoja witryna Angular była dostępna dla wszystkich? To właściwe miejsce!

Minko Gechev
Zama Khan Mohammed

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:

Zrzut ekranu przedstawiający wyskakujące okienko narzędzia Codelyzer w edytorze tekstu.
Wyskakujące okienko z narzędziem do analizy kodu, które pokazuje błąd etykietowania elementu formularza.

Aby przeprowadzić linting całego projektu (w tym szablonów zewnętrznych), użyj polecenia ng lint:

Lintowanie za pomocą Angular CLI

Uzupełnianie narzędzia Codelyzer

Lighthouse to kolejne narzędzie, którego możesz użyć do wymuszania stosowania praktyk dotyczących ułatwień dostępu w aplikacji Angular. Główna różnica między narzędziami Codelyzer i Lighthouse polega na tym, kiedy przeprowadzają one sprawdzanie. Codelyzer statycznie analizuje aplikację w czasie jej tworzenia, bez uruchamiania. Oznacza to, że podczas programowania możesz otrzymywać bezpośrednie informacje zwrotne w edytorze tekstu lub w terminalu. Lighthouse uruchamia aplikację i przeprowadza wiele testów za pomocą analizy dynamicznej.

Oba narzędzia mogą być przydatne w procesie tworzenia. Lighthouse ma większy zakres, ponieważ przeprowadza więcej kontroli, a codelyzer umożliwia szybsze iteracje dzięki ciągłym informacjom zwrotnym w edytorze tekstu.

Wymuszanie sprawdzania dostępności w ramach ciągłej integracji

Wprowadzenie statycznych testów ułatwień dostępu w ramach ciągłej integracji (CI) może znacznie usprawnić proces tworzenia aplikacji. Za pomocą narzędzia codelyzer możesz łatwo egzekwować określone reguły dostępności lub inne praktyki, uruchamiając ng lint przy każdej modyfikacji kodu (np. w przypadku każdego nowego żądania scalenia).

Dzięki temu jeszcze przed rozpoczęciem sprawdzania kodu system CI może Cię poinformować o wszelkich naruszeniach zasad dostępności.

Podsumowanie

Aby zwiększyć dostępność aplikacji Angular:

  1. Włącz eksperymentalne reguły ułatwień dostępu w narzędziu Codelyzer.
  2. Przeprowadź linting ułatwień dostępu w całym projekcie za pomocą interfejsu wiersza poleceń Angular.
  3. Rozwiąż wszystkie problemy z dostępnością zgłoszone przez narzędzie Codelyzer.
  4. Rozważ użycie Lighthouse do przeprowadzania audytów dostępności w czasie działania.