Co to jest eslint?
Eslint jest narzędziem do analizy statycznej kodu JavaScript, które pomaga programistom w utrzymaniu spójności i jakości swojego kodu. Dzięki konfiguracji eslint można ustawić reguły dotyczące formatowania, stylu kodu oraz wykrywania potencjalnych błędów wytycznych WCAG.
Dlaczego dostępność jest ważna?
Dostępność to kluczowy element tworzenia aplikacji i stron internetowych, który umożliwia korzystanie z nich osobom z różnymi ograniczeniami, takimi jak np. niepełnosprawność wzroku czy niepełnosprawność ruchowa. Zapewnienie dostępności jest nie tylko kwestią etyczną, ale także przyczynia się do zwiększenia zasięgu użytkowników i poprawy ogólnej jakości produktu.
- Według badań przeprowadzonych przez WebAIM, ponad 98% stron internetowych nie spełnia standardów dostępności.
- Osoby z niepełnosprawnościami stanowią znaczną część społeczeństwa, dlatego ignorowanie tego aspektu może prowadzić do utraty potencjalnych użytkowników.
Wtyczka angular-eslint i reguły dostępności
angular-eslint to narzędzie dedykowane projektom Angular, które umożliwia analizę i automatyczną poprawę kodu TypeScript oraz szablonów HTML. Wtyczka ta zawiera zestaw wbudowanych reguł dostępności, które pomagają zidentyfikować problemy związane z dostępnością już na etapie pisania kodu. Reguły te można znaleźć w pliku konfiguracyjnym accessibility.json.
@angular-eslint/template/alt-text
Wymusza obecność atrybutu alt dla elementów obrazów <img src="logo.png" alt="Logo firmy">
@angular-eslint/template/click-events-have-key-event
Reguła wymusza, aby każdy element w szablonie Angular, który posiada przypisane zdarzenie (click), miał również zdefiniowane co najmniej jedno ze zdarzeń keydown, keypress, keyup. Dotyczy to elementów takich jak div lub button, które w przeciwieństwie do tagu a nie mają natywnej obsługi klawisza Enter czy spacji.
@angular-eslint/template/elements-content
Weryfikuje, czy elementy takie jak <a>, <button>,<h1 - h6>,<p> mają treść.
@angular-eslint/template/interactive-supports-focus
Zapewnia, że elementy interaktywne (np. <button> lub <a>) są dostatecznie dostępne przy obsłudze komputera bez użycia myszy.
@angular-eslint/template/label-has-associated-control
Wymusza, aby elementy <label> były poprawnie skojarzone z elementami kontrolnymi (np. <input>).
@angular-eslint/template/mouse-events-have-key-events
Wymusza dodanie odpowiednich zdarzeń klawiszowych (np. keydown, keypress, keyup) dla elementów mających zdarzenia myszy (np. mouseover, mouseout).
@angular-eslint/template/no-autofocus
Zabrania używania atrybutu autofocus w elementach formularzy.
@angular-eslint/template/no-distracting-elements
Zabrania używania elementów odciągających uwagę, takich jak <marquee> i <blink>
@angular-eslint/template/role-has-required-aria
Zapewnia, że elementy z określonymi rolami mają wszystkie wymagane atrybuty ARIA.
@angular-eslint/template/table-scope
Wymusza używanie poprawnych atrybutów scope w tabelach, aby zwiększyć dostępność dla użytkowników korzystających z czytników ekranu.
Korzyści z automatyzacji
Stosowanie reguł dostępności w ESLint:
- Pomaga wychwytywać błędy na wczesnym etapie tworzenia kodu, co zmniejsza koszty ich naprawy.
- Zwiększa świadomość programistów na temat wymagań dostępności.
- Przyczynia się do lepszego doświadczenia użytkownika, szczególnie dla osób z niepełnosprawnościami.
Podsumowanie
Dostosowanie kodu HTML do wymagań dostępności cyfrowej jest nie tylko dobrą praktyką, ale także obowiązkiem wynikającym z przepisów, takich jak WCAG. Dzięki narzędziom takim jak ESLint i regułom dostępności dostępnym w angular-eslint, programiści mogą łatwo identyfikować i naprawiać problemy w swoich projektach. Wdrożenie takiego podejścia to krok w stronę bardziej inkluzywnego internetu.