Witryna React nie jest progresywna, jeśli jest niedostępna. Kontrola w trakcie tworzenia aplikacji pomoże Ci dostrzec ewentualne problemy.
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:
- Zainstaluj odpowiednią wtyczkę ESLint dla swojego edytora kodu.
- 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
- 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.
- 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. - 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.