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

Chcesz, aby Twoja witryna Angular była dostępna dla wszystkich? To jest odpowiednie miejsce!

Minko Gechev

Zama Khan Mohammed

Udostępnianie aplikacji oznacza, że wszyscy użytkownicy, w tym osoby o szczególnych potrzebach, mogą z niej korzystać i rozumieć jej zawartość. Według Światowego Raportu Zdrowia ponad miliard ludzi, czyli około 15% populacji świata, ma jakąś formę niepełnosprawności. Dlatego ułatwienia dostępu są priorytetem każdego projektu programistycznego.

Z tego posta dowiesz się, jak dodać testy ułatwień dostępu codelyzer do procesu kompilacji aplikacji Angular. Takie podejście pozwala wychwytywać błędy ułatwień dostępu bezpośrednio w edytorze tekstu podczas pisania kodu.

Wykrywanie niedostępnych elementów za pomocą kodera

codelyzer to narzędzie działające na bazie TSLint, które sprawdza, czy projekty Angular TypeScript są zgodne z zestawem reguł lintowania. Projekty skonfigurowane przy użyciu interfejsu wiersza poleceń Angular (CLI) domyślnie zawierają kodalizator.

Codelyzer ma ponad 50 reguł sprawdzania, czy aplikacja Angular jest zgodna ze sprawdzonymi metodami. Dostępnych jest około 10 reguł do egzekwowania kryteriów ułatwień dostępu. Więcej informacji o różnych testach ułatwień dostępu dostarczanych przez koder i ich uzasadnieniach znajdziesz w artykule Nowe reguły ułatwień dostępu w aplikacji Codelyzer.

Obecnie wszystkie reguły ułatwień dostępu mają charakter eksperymentalny i domyślnie są 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 działa ze wszystkimi popularnymi edytorami tekstu i IDE. Aby używać go z VSCode, zainstaluj wtyczkę TSLint. W WebStorm TSLint jest domyślnie włączony. W przypadku innych edytorów sprawdź plik README w TSLint.

Gdy funkcja kontroli ułatwień dostępu w aplikacji Codelyzer jest skonfigurowana, podczas kodowania pojawia się wyskakujące okienko wyświetlające błędy ułatwień dostępu w plikach TypeScript lub szablonach wbudowanych:

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

Uzupełnianie kodera

Lighthouse to kolejne narzędzie, którego możesz używać do egzekwowania ułatwień dostępu w aplikacji Angular. Główną różnicą między algorytmem a narzędziem Lighthouse jest to, kiedy są wykonywane testy. Codelyzer statycznie analizuje aplikację w czasie programowania, bez jej uruchamiania. Oznacza to, że w czasie tworzenia aplikacji możesz otrzymywać opinie bezpośrednio w edytorze tekstu lub w terminalu. Natomiast Lighthouse uruchamia aplikację i przeprowadza zestaw testów, korzystając z analizy dynamicznej.

Oba narzędzia mogą być przydatnym elementem procesu programowania. Narzędzie Lighthouse działa lepiej ze względu na przeprowadzaną kontrolę, a Codelyzer umożliwia szybsze iterację dzięki stałemu uzyskiwaniu informacji zwrotnych w edytorze tekstu.

Wymuszanie kontroli ułatwień dostępu w ramach ciągłej integracji

Wprowadzenie statycznych kontroli ułatwień dostępu w trybie ciągłej integracji (CI) może znacznie usprawnić proces programowania. Za pomocą programu Codelyzer możesz łatwo egzekwować określone reguły ułatwień dostępu lub inne metody, uruchamiając polecenie ng lint przy każdej modyfikacji kodu (na przykład przy każdym nowym żądaniu pull).

Dzięki temu, jeszcze zanim przeprowadzisz weryfikację kodu, CI będzie poinformować Cię o naruszeniach związanych z ułatwieniami dostępu.

Podsumowanie

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

1. Włącz eksperymentalne reguły ułatwień dostępu w Codelyzer.
2. Wykonuj lintowanie ułatwień dostępu w całym projekcie za pomocą interfejsu wiersza poleceń Angular.
3. Napraw wszystkie problemy z ułatwieniami dostępu zgłoszone przez program Codelyzer.
4. Rozważ użycie Lighthouse do kontroli ułatwień dostępu w czasie działania.