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

Ihre React-Website ist nicht progressiv, wenn sie nicht zugänglich ist. Audits während der Entwicklung können Ihnen helfen, Probleme zu erkennen.

Houssein-Djirdeh

react-axe ist eine Bibliothek, die eine React-Anwendung prüft und alle Probleme bezüglich der Barrierefreiheit in der Chrome-Entwicklertools-Konsole protokolliert. Dabei wird die Open-Source-Testbibliothek axe verwendet, um Probleme und deren Schweregrad zu melden.

eslint-plugin-jsx-a11y ist ein ESLint-Plug-in, das eine Reihe von Regeln für Bedienungshilfen direkt in JSX identifiziert und durchsetzt. Wenn du sie zusammen mit einem Tool verwendest, das das endgültig gerenderte DOM testet, wie z. B. react-axe, kannst du mögliche Probleme bezüglich der Barrierefreiheit auf deiner Website ermitteln und beheben.

Welchen Nutzen bieten sie?

Es ist von entscheidender Bedeutung, Websites zu erstellen, die allen Nutzern unabhängig von ihren Beeinträchtigungen oder Einschränkungen die Möglichkeit bieten, auf die Inhalte zuzugreifen. Wenn Sie während der Entwicklung Ihrer React-Anwendung Auditing-Bibliotheken wie react-axe und eslint-plugin-jsx-a11y verwenden, werden alle Probleme mit der Barrierefreiheit automatisch angezeigt, sobald sie auftreten.

eslint-plugin-jsx-a11y verwenden

React unterstützt bereits das Schreiben zugänglicher HTML-Elemente in der JSX-Syntax. Sie müssen beispielsweise nur das Attribut htmlFor anstelle von for verwenden, um ein Label mit einem bestimmten Formularelement innerhalb einer React-Komponente zu verknüpfen.

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

In der Dokumentation zur Barrierefreiheit von React finden Sie alle Details für den Umgang mit Barrierefreiheit innerhalb einer React-Komponente. Damit diese Probleme während der Entwicklung leichter erkannt werden, enthält die Create React App (CRA) standardmäßig das eslint-plugin-jsx-a11y-Plug-in für ESLint.

So aktivieren Sie das vorkonfigurierte Linting, das von CRA bereitgestellt wird:

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

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

Warnung zur Barrierefreiheit von Bildern in Linter

Wenn Sie nach weiteren Regeln für Barrierefreiheit suchen möchten, ändern Sie die Datei so, dass sie automatisch alle vom Plug-in empfohlenen Regeln enthält:

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

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

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

Barrierefreiheitsfehler beim Label in Linter

Die Projektdokumentation enthält Informationen zu den Unterschieden zwischen dem empfohlenen und dem strikten Modus.

Reaktionsachse verwenden

Mit eslint-plugin-jsx-a11y können Sie Probleme mit der Barrierefreiheit in Ihrer JSX-Datei einfach ermitteln. Die endgültige HTML-Ausgabe wird jedoch nicht getestet. react-axe ist eine Bibliothek, die genau dies tut. Sie stellt einen React-Wrapper um das axe-core-Testtool von Deque Labs bereit.

Installieren Sie die Bibliothek als Entwicklungsabhängigkeit, um zu beginnen:

npm install --save-dev react-axe

Sie müssen jetzt 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'));
}

Hier wird ein dynamischer Import verwendet, um die Bibliothek nur zu laden, wenn sie sich nicht im Produktionsmodus befindet, bevor die Stammkomponente App gerendert und gestartet wird. Dadurch wird sichergestellt, dass es nicht unnötig im endgültigen Produktions-Bundle enthalten ist.

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

React Axe in den Chrome-Entwicklertools

Für jeden Verstoß wird außerdem ein Schweregrad zugewiesen. Diese Ebenen sind:

  • Gering
  • Mittel
  • Ernst
  • Kritisch

Fazit

  1. Wenn Sie eine Website mit React erstellen, sollten Sie frühzeitig eine Prüfung der Barrierefreiheit in Ihren Workflow einbinden, um Probleme beim Erstellen der Komponenten zu erkennen.
  2. Verwenden Sie eslint-plugin-jsx-a11y, um Ihrem Linting-Workflow Barrierefreiheitsprüfungen hinzuzufügen. CRA ist bereits enthalten, aber wechseln Sie entweder zum empfohlenen oder zum strikten Modus.
  3. Zusätzlich zu lokalen Entwicklungstests kannst du react-axe in deine Anwendung einbinden, um Probleme im endgültigen gerenderten DOM zu erkennen. Fügen Sie ihn nicht Ihrem Produktions-Bundle hinzu.