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

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

Minko Gechev

Zama Khan Mohammed

Zwiększenie dostępności aplikacji oznacza, że wszyscy użytkownicy, w tym osoby o szczególnych potrzebach, będą mogli z niej korzystać i zrozumieć jej treść. Według Światowego Raportu o zdrowiu ponad miliard osób – około 15% populacji świata – boryka się z jakąś formą niepełnosprawności. Dlatego właśnie ułatwienia dostępu są priorytetem w każdym projekcie.

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

Używanie Codelyzera do wykrywania niedostępnych elementów

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

Codelyzer ma ponad 50 reguł do sprawdzania, czy aplikacja Angular jest zgodna ze sprawdzonymi metodami. Istnieje około 10 reguł do egzekwowania kryteriów ułatwień dostępu. Więcej informacji na temat różnych mechanizmów kontroli ułatwień dostępu dostarczanych przez narzędzia Codelyzer wraz z ich uzasadnieniami znajdziesz w artykule Nowe reguły ułatwień dostępu w Codelyzer.

Obecnie wszystkie reguły ułatwień dostępu są eksperymentalne i domyślnie wyłączone. Aby je włączyć, dodaj 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 z VSCode, zainstaluj wtyczkę TSLint. W WebStorm narzędzie TSLint jest domyślnie włączone. W przypadku innych edytorów zapoznaj się z README TSLint.

Po skonfigurowaniu kontroli ułatwień dostępu w Codelyzer pojawia się wyskakujące okienko z błędami ułatwień dostępu w plikach TypeScript lub szablonach wbudowanych w trakcie tworzenia kodu:

Aby wykonać lintowanie w całym projekcie (w tym w szablonach zewnętrznych), użyj polecenia ng lint:

Uzupełnianie kodera

Lighthouse to kolejne narzędzie, które pozwala egzekwować stosowanie ułatwień dostępu w aplikacji Angular. Główną różnicą między Codelyzer a Lighthouse jest czas przeprowadzania kontroli. Codelyzer statycznie analizuje aplikację w czasie tworzenia, bez uruchamiania. Oznacza to, że podczas programowania możesz otrzymywać opinie bezpośrednio w edytorze tekstu lub w terminalu. Z kolei Lighthouse uruchamia aplikację i przeprowadza szereg testów, korzystając z analizy dynamicznej.

Oba narzędzia mogą być użytecznym elementem procesu programowania. Narzędzie Lighthouse ma większy zasięg dzięki sprawdzanym testom, a Codelyzer umożliwia szybsze powtarzanie dzięki stałemu opiniom w edytorze tekstu.

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

Wprowadzenie statycznych testów ułatwień dostępu do ciągłej integracji (CI) może być doskonałym udoskonaleniem procesu programowania. Dzięki Codelyzer możesz łatwo egzekwować określone reguły ułatwień dostępu lub inne praktyki, uruchamiając ng lint przy każdej modyfikacji kodu (np. dla każdego nowego żądania pull).

Dzięki temu, nawet zanim przejdziesz do weryfikacji kodu, CI poinformuje Cię o naruszeniach związanych z ułatwieniami dostępu.

Podsumowanie

Aby poprawić ułatwienia dostępu w aplikacji Angular:

1. Włącz eksperymentalne reguły ułatwień dostępu w Codelyzer.
2. Przeprowadzaj 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łaszane przez codelyzer.
4. Rozważ korzystanie z Lighthouse do przeprowadzania audytów ułatwień dostępu w czasie działania aplikacji.