Prüfung der Barrierefreiheit mit „reaxe“ und „eslint-plugin-jsx-a11y“

Deine React-Website ist nicht progressiv, wenn nicht darauf zugegriffen werden kann. Das Auditing während der Entwicklung kann Ihnen helfen, Probleme zu erkennen.

Houssein Djirdeh

react-axe ist eine Bibliothek, die eine Anwendung reagieren und Probleme mit dem Zugriff in den Chrome-Entwicklertools protokollieren . Dabei kommt die Open-Source-Software Axe zum Einsatz. um Probleme und deren Schweregrad zu kennzeichnen.

eslint-plugin-jsx-a11y ist ESLint-Plug-in, das eine Reihe von Regeln für die Barrierefreiheit identifiziert und erzwingt direkt in Ihre JSX-Datei einfügen. Die Verwendung in Kombination mit einem Tool, das die finale kann ein gerendertes DOM wie z. B. react-axe Ihnen helfen, Bedienungshilfen zu finden und Bedenken auf Ihrer Website haben.

Welchen Nutzen bieten sie?

Websites zu erstellen, die allen Nutzenden ungeachtet ihrer Beeinträchtigung oder Einschränkung, der Fähigkeit, auf Inhalte zuzugreifen. Auditing verwenden wie react-axe und eslint-plugin-jsx-a11y während der werden bei der Entwicklung der React-Anwendung automatisch Probleme mit der Barrierefreiheit.

eslint-plugin-jsx-a11y verwenden

React unterstützt bereits das Schreiben barrierefreier HTML-Elemente innerhalb der JSX-Syntax. Für Sie müssen beispielsweise nur das Attribut htmlFor statt for verwenden, um ein einem bestimmten Formularelement innerhalb einer React-Komponente hinzu.

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

Die Dokumentation zur Barrierefreiheit im Internet React deckt alle Feinheiten im Umgang mit Barrierefreiheit im Internet in React ab Komponente. Damit Sie diese Probleme bei der Entwicklung leichter erkennen können, React App (CRA) enthält das Plug-in eslint-plugin-jsx-a11y für ESLint, Standardeinstellung.

So aktivieren Sie das von CRA bereitgestellte vorkonfigurierte Linting:

  1. Das entsprechende ESLint-Plug-in für Ihren Code-Editor installieren
  2. Dem Projekt eine .eslintrc.json-Datei hinzufügen
{
  "extends": "react-app"
}

Hier werden einige häufige Probleme mit der Barrierefreiheit angezeigt.

Warnung zur Barrierefreiheit von Bildern in Linter

Um nach noch mehr Bedienungshilfen zu suchen, ändern Sie die Datei so, dass sie automatisch Alle vom Plug-in empfohlenen Regeln einschließen:

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

Wenn Sie eine noch striktere Teilmenge von Regeln haben möchten, wechseln Sie in den strikten Modus:

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

Fehler beim Zugriff auf Labels in Linter

Das Projekt Dokumentation finden Sie Informationen zu den Unterschieden zwischen dem empfohlenen und dem strikten Modus.

Reaktionsaxt verwenden

Mit eslint-plugin-jsx-a11y kannst du Probleme mit der Barrierefreiheit ganz einfach ausfindig machen in JSX einfügen, aber die endgültige HTML-Ausgabe wird nicht getestet. react-axe ist eine Bibliothek, die genau dies tut, indem sie einen React-Wrapper um den axe-core-Testtool von Deque Labs.

Installieren Sie zuerst die Bibliothek als Entwicklungsabhängigkeit:

npm install --save-dev react-axe

Jetzt müssen Sie nur noch das Modul in index.js initialisieren:

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'));
}

A dynamischer Import wird hier verwendet, um die Bibliothek nur zu laden, wenn sie sich nicht vorher im Produktionsmodus befindet die App-Stammkomponente wird gerendert und gestartet. So wird sichergestellt, dass unnötig im endgültigen Produktionspaket enthalten.

Wenn Sie die Anwendung jetzt während der Entwicklung ausführen, werden Probleme direkt in der Chrome-Entwicklertools-Konsole.

React Axe in den Chrome-Entwicklertools

Jedem Verstoß wird ein Schweregrad zugewiesen. Diese Ebenen sind:

  • Kleinere Änderungen
  • Moderat
  • Ernst
  • Kritisch

Fazit

  1. Wenn Sie eine Website mit React erstellen, fügen Sie um Probleme beim Erstellen Ihrer Komponenten zu erkennen.
  2. Mit eslint-plugin-jsx-a11y können Sie Ihrem Linting Prüfungen für Bedienungshilfen hinzufügen zu optimieren. CRA ist bereits enthalten, aber wechseln Sie entweder zum empfohlenen oder strikten Modus.
  3. Nimm zusätzlich zu den lokalen Entwicklungstests react-axe in deine um Probleme mit dem endgültigen gerenderten DOM zu erkennen. Nicht einschließen in dein Produktionspaket ein.