Ihre React-Website ist nicht progressiv, wenn sie nicht zugänglich ist. Audits während der Entwicklung können Ihnen helfen, Probleme zu erkennen.
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:
- Installieren Sie das entsprechende ESLint-Plug-in für Ihren Code-Editor.
- Dem Projekt eine
.eslintrc.json
-Datei hinzufügen
{
"extends": "react-app"
}
Nun werden einige häufige Probleme mit der Barrierefreiheit angezeigt.
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"]
}
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.
Für jeden Verstoß wird außerdem ein Schweregrad zugewiesen. Diese Ebenen sind:
- Gering
- Mittel
- Ernst
- Kritisch
Fazit
- 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.
- 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. - 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.