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

Twoja witryna z React nie jest progresywna, jeśli nie jest dostępna. Kontrola podczas tworzenia aplikacji może pomóc w wykryciu problemów.

Houssein Djirdeh

react-axe to biblioteka, która kontroluje React i rejestrowanie wszelkich problemów z ułatwieniami dostępu w Narzędziach deweloperskich w Chrome konsoli. Wykorzystuje axe typu open source w bibliotece testowej, aby sygnalizować ewentualne problemy i ich wagę.

eslint-plugin-jsx-a11y to Wtyczka ESLint, która identyfikuje i egzekwuje szereg reguł ułatwień dostępu bezpośrednio w JSX. Użycie tego w połączeniu z narzędziem testowym wyrenderowany DOM, np. react-axe, może pomóc w znalezieniu i usunięciu ułatwień dostępu. w Twojej witrynie.

Dlaczego to jest przydatne?

Niezwykle ważne jest, aby tworzyć witryny, które będą zapewniać wszystkim użytkownikom, niezależnie od ich niepełnosprawność lub ograniczenie dostępu do treści. Korzystanie z kontroli biblioteki, takie jak react-axe i eslint-plugin-jsx-a11y, w okresie jeśli utworzysz aplikację React, automatycznie ujawnimy pojawiających się problemów z ułatwieniami dostępu.

Użyj eslint-plugin-jsx-a11y

React obsługuje już zapisywanie dostępnych elementów HTML w składni JSX. Dla: na przykład wystarczy użyć atrybutu htmlFor zamiast for, aby połączyć do określonego elementu formularza w komponencie React.

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

Dokumentacja ułatwień dostępu React obejmuje wszystkie niuanse rozwiązywania problemów z ułatwieniami dostępu w filmie React. . Aby ułatwić wykrywanie tych problemów na etapie tworzenia aplikacji, Aplikacja React (CRA) zawiera wtyczkę eslint-plugin-jsx-a11y dla ESLint wartość domyślną.

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

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

{
  "extends": "react-app"
}

Pojawią się typowe problemy z ułatwieniami dostępu.

Aby sprawdzić, czy jest jeszcze więcej reguł ułatwień dostępu, zmodyfikuj plik automatycznie zastosuj wszystkie reguły zalecane przez wtyczkę:

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

Jeśli chcesz zastosować jeszcze bardziej rygorystyczny podzbiór reguł, przełącz się na tryb ścisły:

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

Projekt dokumentacja zawiera informacje o różnicach między trybem zalecanym a ścisłym.

Użyj osi reakcji

eslint-plugin-jsx-a11y może pomóc Ci z łatwością wykryć problemy z ułatwieniami dostępu. w JSX, ale nie testuje ostatecznej wersji kodu HTML. react-axe to biblioteka, która dodaje opakowanie React wokół kodu Narzędzie do testowania axe-core opracowane przez Deque Labs.

Aby rozpocząć, zainstaluj bibliotekę jako zależność deweloperską:

npm install --save-dev react-axe

Teraz wystarczy zainicjować moduł w programie 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'));
}

O import dynamiczny jest tu używany do ładowania biblioteki tylko wtedy, gdy nie jest ona przed renderowanie i uruchomienie głównego komponentu App. Dzięki temu nie będzie niepotrzebnie uwzględnione w ostatecznej wersji pakietu produkcyjnego.

Teraz, gdy uruchomisz aplikację w trakcie jej programowania, wystąpią problemy. bezpośrednio do konsoli Narzędzi deweloperskich w Chrome.

Każde naruszenie ma też wagę. Poziomy to:

• Osoba nieletnia
• Średnia
• Poważnie
• Krytyczny

Podsumowanie

1. Jeśli tworzysz witrynę przy użyciu React, uwzględnij kontrolę ułatwień dostępu aby wychwytywać problemy przy tworzeniu komponentów.
2. Użyj narzędzia eslint-plugin-jsx-a11y, aby dodać informacje o ułatwieniach dostępu do lintowania procesu tworzenia kampanii. Mechanizm CRA jest już dołączony, ale przełącz się na w trybie zalecanym lub ścisłym.
3. Oprócz testowania lokalnego programowania uwzględnij react-axe w w celu wykrywania problemów w ostatecznym renderowanym DOM. Nie dodawaj. do pakietu produkcyjnego.