Kontrola ułatwień dostępu za pomocą pliku „Reaxe” i „eslint-plugin-jsx-a11y”

Witryna React nie jest progresywna, jeśli jest niedostępna. Kontrola w trakcie tworzenia aplikacji pomoże Ci dostrzec ewentualne problemy.

Houssein Djirdeh

react-axe to biblioteka, która kontroluje aplikację React i rejestruje problemy z ułatwieniami dostępu w konsoli Narzędzi deweloperskich w Chrome. Wykorzystuje bibliotekę testów open source axe do oznaczania problemów i ich wagi.

eslint-plugin-jsx-a11y to wtyczka ESLint, która identyfikuje i egzekwuje szereg reguł ułatwień dostępu bezpośrednio w JSX. Połączenie tej funkcji z narzędziem, które testuje ostateczny wyrenderowany model DOM, np. react-axe, może pomóc w wyszukaniu i usunięciu wszelkich problemów z ułatwieniami dostępu w witrynie.

Dlaczego to takie przydatne?

Istotne jest tworzenie witryn zapewniających dostęp do treści każdemu użytkownikowi, niezależnie od jego niepełnosprawności czy ograniczeń. Korzystanie z bibliotek kontrolnych takich jak react-axe czy eslint-plugin-jsx-a11y podczas tworzenia aplikacji React powoduje automatyczne ujawnianie ewentualnych problemów z ułatwieniami dostępu.

Użyj eslint-plugin-jsx-a11y

React obsługuje już tworzenie dostępnych elementów HTML w składni JSX. Aby na przykład powiązać etykietę z konkretnym elementem formularza w komponencie React, musisz na przykład użyć tylko atrybutu htmlFor zamiast for.

<input id="promo" type="checkbox">
<label htmlFor="promo">Receive promotional offers?</label>

Dokumentacja ułatwień dostępu React zawiera wszystkie szczegóły obsługi problemów z ułatwieniami dostępu w komponencie React. Aby ułatwić wykrywanie takich problemów podczas programowania, usługa Create React App (CRA) domyślnie zawiera wtyczkę eslint-plugin-jsx-a11y do ESLint.

Aby włączyć wstępnie skonfigurowane lintowanie udostępniane przez CRA:

1. Zainstaluj odpowiednią wtyczkę ESLint dla swojego edytora kodu.
2. Dodaj do projektu plik .eslintrc.json

{
  "extends": "react-app"
}

Wyświetlą się niektóre typowe problemy z ułatwieniami dostępu.

Aby wyszukać jeszcze więcej reguł ułatwień dostępu, zmodyfikuj plik tak, aby automatycznie uwzględniał wszystkie reguły zalecane przez wtyczkę:

{
  "extends": ["react-app", "plugin:jsx-a11y/recommended"]
}

Jeśli chcesz zastosować bardziej rygorystyczny podzbiór reguł, przejdź na tryb ścisły:

{
  "extends": ["react-app", "plugin:jsx-a11y/strict"]
}

Informacje o różnicach między trybem zalecanym a ścisłym znajdziesz w dokumentacji projektu.

Użyj osi reagowania

eslint-plugin-jsx-a11y może pomóc Ci łatwo wykryć problemy z ułatwieniami dostępu w pliku JSX, ale nie testuje żadnego z ostatecznych danych wyjściowych HTML. react-axe to biblioteka, która robi to dokładnie, udostępniając kod React wokół narzędzia do testowania axe-core opracowanego przez Deque Labs.

Na początek zainstaluj bibliotekę jako zależność programistyczną:

npm install --save-dev react-axe

Teraz musisz tylko zainicjować moduł w zadaniu index.js:

if (process.env.NODE_ENV !== 'production') {
  import('react-axe').then(axe => {
    axe.default(React, ReactDOM, 1000);
    ReactDOM.render(<App />, document.getElementById('root'));
  });
} else {
  ReactDOM.render(<App />, document.getElementById('root'));
}

Import dynamiczny służy do tego, by wczytać bibliotekę tylko wtedy, gdy nie jest ona w trybie produkcyjnym, przed wyrenderowaniem i uruchomieniem głównego komponentu App. Dzięki temu nie będzie on niepotrzebnie uwzględniany w ostatecznym pakiecie produkcyjnym.

Teraz gdy uruchomisz aplikację w trakcie programowania, problemy będą widoczne bezpośrednio w konsoli Chrome DevTools.

Każdemu naruszeniu zasad przypisywany jest także poziom ważności. Te poziomy to:

• Niska
• Umiarkowane ceny
• Poważnie
• Krytyczny

Podsumowanie

1. Jeśli tworzysz witrynę w React, włącz kontrolę ułatwień dostępu do przepływu pracy na wczesnym etapie, by wychwycić problemy podczas tworzenia komponentów.
2. Użyj eslint-plugin-jsx-a11y, aby dodać mechanizmy kontroli ułatwień dostępu do przepływu pracy lintowania. CRA jest już w pakiecie, ale przełącz się na tryb zalecany lub rygorystyczny.
3. Oprócz lokalnych testów programistycznych dodaj do swojej aplikacji react-axe, aby wykryć ewentualne problemy w ostatecznie renderowanym DOM. Nie dodawaj go do pakietu produkcyjnego.