Barrierefreie React-Apps erstellen

Die React-JavaScript-Bibliothek ist eine großartige Möglichkeit, wiederverwendbare modulare Komponenten zu erstellen, die von Projekten gemeinsam genutzt werden können. Aber wie stellen Sie sicher, dass Ihre React-Apps von allen möglichen Menschen genutzt werden können?

---

Vor langer Zeit, im Februar 2017, nahm ich einen Zug von Kingston, Kanada, in die Innenstadt von Toronto. Warum machte ich diese zweistündige Wanderung? Um mehr über die React- JavaScript-Bibliothek zu erfahren.

Am Ende des ganztägigen Kurses haben wir alle eine voll funktionsfähige Anwendung entwickelt. Eines der Dinge, die mich an React wirklich begeistert haben, war, wie es einen dazu zwingt, modular zu denken. Jede Komponente erledigt eine Aufgabe, und diese eine Sache macht sie wirklich gut. Wenn Sie Komponenten auf diese Weise bauen, können Sie all Ihre Gedanken und Energie darauf konzentrieren, sicherzustellen, dass Sie die Aufgabe richtig erledigen – nicht nur für Ihr aktuelles Projekt, sondern auch für zukünftige Projekte. React-Komponenten sind wiederverwendbar und können bei guter Konstruktion von Projekten gemeinsam genutzt werden. Es geht nur darum, den richtigen Lego-Stein im Haufen zu finden, um das zusammenzusetzen, was Sie brauchen, um ein großartiges Benutzererlebnis zu schaffen.

Als ich jedoch von der Reise zurückkam, begann ich mich zu fragen, ob die App, die ich an diesem Tag erstellt hatte, barrierefrei war. Könnte es zugänglich gemacht werden? Nachdem ich das Projekt auf meinen Laptop geladen hatte, machte ich mich daran, einige grundlegende Tests mit meiner Tastatur und dem VoiceOver-Screenreader durchzuführen.

Es gab einige kleinere, schnelle Probleme, wie z. B. die Verwendung von ul + li -Elementen für die Homepage-Linkliste anstelle des aktuellen Angebots von div -Elementen. Ein weiterer schneller Gewinn: Hinzufügen eines leeren alt -Attributs für die Callout-Container mit dekorativen Bildern.

Es gab auch einige herausforderndere Probleme, die es zu bewältigen galt. Bei jedem neuen Laden der Seite änderte sich der Text des title nicht, um den neuen Inhalt widerzuspiegeln. Nicht nur das, der Tastaturfokus wurde auch sehr schlecht verwaltet, was Benutzer, die nur die Tastatur verwenden, daran hinderte, die App zu verwenden. Wenn eine neue Seite geladen wird, bleibt der Fokus auf der vorherigen Seitenansicht!

Gab es Techniken, um diese schwierigeren Barrierefreiheitsprobleme zu beheben?

Nachdem ich Zeit damit verbracht hatte, die React-Dokumentation zu lesen und einige der während des Kurses erworbenen Techniken auszuprobieren, konnte ich die App viel zugänglicher machen. In diesem Beitrag führe ich Sie durch die dringendsten Probleme mit der Barrierefreiheit und wie Sie sie angehen können, darunter:

• Auf reservierte Wörter reagieren;
• Aktualisieren des Seitentitels;
• Verwalten des Tastaturfokus;
• Erstellen einer Live-Messaging-Komponente;
• Code Linting, plus ein paar weitere Gedanken zum Erstellen barrierefreier React-Apps.

Demo-App

Wenn es eher Ihr Stil ist, Code in Aktion zu sehen, sehen Sie sich die begleitende React-Demo-App dieses Beitrags an: TV-Db .

Sie können diesen Beitrag auch mitverfolgen, indem Sie den Inline-Links zum Quellcode der Demo-App folgen.

Sind Sie bereit sicherzustellen, dass Ihre React-Apps für Menschen mit Behinderungen und alle Arten von Benutzern integrativer sind? Lass uns gehen!

HTML-Attribute und reservierte Wörter

Eine Sache, die Sie beim Schreiben von HTML in React-Komponenten beachten sollten, ist, dass HTML-Attribute in camelCase geschrieben werden müssen. Das hat mich zunächst überrascht, aber ich habe mich schnell daran gewöhnt. Wenn Sie aus Versehen ein Attribut nur in lowercase einfügen, erhalten Sie in der JavaScript-Konsole eine freundliche Warnung, dass Sie auf camelCase .

Beispielsweise muss das tabindex Attribut als tabIndex geschrieben werden (beachten Sie das großgeschriebene „I“-Zeichen). Die Ausnahme von dieser Regel ist, dass alle data-* - oder aria-* Attribute weiterhin so geschrieben werden, wie Sie es erwarten würden.

Es gibt auch einige reservierte Wörter in JavaScript , die mit bestimmten HTML-Attributnamen übereinstimmen. Diese können nicht so geschrieben werden, wie Sie es erwarten würden:

• for ist ein reserviertes Wort in JavaScript, das zum Durchlaufen von Elementen verwendet wird. Beim Erstellen von label -Elementen in React-Komponenten müssen Sie stattdessen das htmlFor Attribut verwenden, um die Beziehung zwischen label und input explizit festzulegen.
• class ist auch ein reserviertes Wort in JavaScript. Wenn Sie einem HTML-Element ein class zum Gestalten zuweisen, muss es stattdessen als className geschrieben werden.

Es gibt wahrscheinlich noch mehr Attribute, auf die Sie achten müssen, aber bisher sind dies die einzigen Konflikte, die ich gefunden habe, wenn es um JavaScript-reservierte Wörter und HTML-Attribute geht. Sind Sie auf andere Konflikte gestoßen? Poste das in den Kommentaren und wir veröffentlichen einen Folgepost mit der ganzen Liste!

Festlegen des Seitentitels

Da es sich bei React-Apps um SPAs (Single Page Apps) handelt, zeigt das title während der gesamten Browsersitzung denselben Inhalt an. das ist nicht ideal.

Das title ist normalerweise der erste Inhalt, der von Screenreadern beim Laden der Seite angekündigt wird.

Es ist wichtig, dass der Titel den Inhalt der Seite widerspiegelt, damit Leute, die darauf angewiesen sind und zuerst auf diesen Inhalt stoßen, wissen, was sie erwartet.

In React-Apps wird der Inhalt für das title in der Datei public/index.html festgelegt und dann nie wieder verändert.

Wir können dieses Problem umgehen, indem wir den Inhalt des title in unseren übergeordneten Komponenten oder „Seiten“ nach Bedarf dynamisch festlegen, indem wir der globalen Eigenschaft document.title einen Wert zuweisen. Wo wir dies festlegen, ist in Reacts Lebenszyklusmethode componentWillMount() . Dies ist eine Funktion, mit der Sie Codeschnipsel ausführen, wenn die Seite geladen wird.

Wenn es sich bei der Seite beispielsweise um eine „Kontakt“-Seite mit Kontaktinformationen oder ein Kontaktformular handelt, könnten wir die Lebenszyklusmethode „ componentWillMount() “ wie {[Home.js:23](https://github.com/svinkle/tv-db/blob/master/src/pages/Home.js#L23)} :

 componentWillMount() { document.title = 'Contact us | Site Name'; }

Wenn diese Komponenten-„Seite“ geladen wird, beobachten Sie, wie der Wert im Browser-Tab zu „Kontaktieren Sie uns | Site-Name“ aktualisiert wird. Stellen Sie einfach sicher, dass Sie denselben Code oben hinzufügen, um das title für alle Ihre Seitenkomponenten zu aktualisieren.

Fokusmanagement, Teil eins

Lassen Sie uns über das Fokusmanagement sprechen, ein wichtiger Faktor, um sicherzustellen, dass Ihre App zugänglich ist und eine erfolgreiche Benutzererfahrung bietet. Wenn Ihre Kunden versuchen, ein mehrseitiges Formular auszufüllen, und Sie den Fokus nicht bei jeder Ansicht verwalten, führt dies wahrscheinlich zu Verwirrung, und wenn sie Hilfstechnologien verwenden, kann es für sie zu schwierig sein, fortzufahren um das Formular auszufüllen. Sie könnten sie als Kunden vollständig verlieren.

Um den Tastaturfokus auf ein bestimmtes Element innerhalb einer Komponente zu setzen, müssen Sie eine sogenannte „Funktionsreferenz“ oder kurz „ ref “ erstellen. Wenn Sie gerade erst anfangen, React zu lernen, können Sie sich eine ref so vorstellen, als würden Sie ein HTML-Element im DOM mit jQuery auswählen und es in einer Variablen zwischenspeichern, wie zum Beispiel:

 var myBtn = $('#myBtn');

Eine einzigartige Sache beim Erstellen der ref ist, dass sie beliebig benannt werden kann (hoffentlich etwas, das für Sie und die anderen Entwickler im Team sinnvoll ist) und sich nicht auf eine id oder class für einen Selektor verlässt.

Wenn Sie beispielsweise einen Ladebildschirm haben, wäre es ideal, den Fokus auf den Nachrichtencontainer „Laden“ zu senden, damit ein Screenreader den aktuellen App-Status ankündigt. In Ihrer Ladekomponente könnten Sie eine Referenz erstellen, die auf den ref {[Loader.js:29](https://github.com/svinkle/tv-db/blob/master/src/components/Loader.js#L29)} :

 <div tabIndex="-1" ref={ (loadingContainer) => { this.loadingContainer = loadingContainer; } } > <p>Loading…</p> </div>

Wenn diese Komponente gerendert wird, wird die function ref ausgelöst und erstellt einen „Verweis“ auf das Element, indem eine neue Klasseneigenschaft erstellt wird. In diesem Fall erstellen wir einen Verweis auf das div namens „loadingContainer“ und übergeben es über this.loadingContainer = loadingContainer an eine neue Klasseneigenschaft.

Wir verwenden die ref im Lebenszyklus-Hook von „ componentDidMount() “, um den Fokus explizit auf den Container „Laden“ zu setzen, wenn die Komponente {[Loader.js:12](https://github.com/svinkle/tv-db/blob/master/src/components/Loader.js#L12)} lädt. {[Loader.js:12](https://github.com/svinkle/tv-db/blob/master/src/components/Loader.js#L12)} :

 componentDidMount() { this.loadingContainer.focus(); }

An dem Punkt, an dem die Ladekomponente aus der Ansicht entfernt wird, könnten Sie eine andere ref verwenden, um den Fokus an eine andere Stelle zu verschieben.

Es kann wirklich nicht genug betont werden, wie wichtig es ist, den Fokus auf ein Element zu lenken und den Fokus von einem Element auf ein anderes zu lenken. Dies ist eine der größten Herausforderungen beim Erstellen von Single-Page-Apps, um die Zugänglichkeit richtig zu gestalten.

Live-Messaging

Live-Messaging ist eine großartige Möglichkeit, Statusänderungen in Ihrer App anzukündigen. Wenn beispielsweise Daten zur Seite hinzugefügt wurden, ist es hilfreich, Personen mit bestimmten Arten von Hilfstechnologien, wie Bildschirmlesegeräten, darüber zu informieren, dass dieser Vorfall stattgefunden hat, zusammen mit der Anzahl der verfügbaren Elemente.

Lassen Sie uns durchgehen und eine Möglichkeit schaffen, Live-Ankündigungen zu handhaben, indem Sie eine neue Komponente erstellen. Wir nennen diese neue Komponente: Announcements .

Wenn die Komponente gerendert wird, wird der Wert this.props.message in das aria-live Element eingefügt und kann dann von Screenreadern angekündigt werden.

Die Komponente sieht in etwa so aus {[Announcements.js:12](https://github.com/svinkle/tv-db/blob/master/src/components/Announcements.js#L12)} :

 import React from 'react'; class Announcements extends React.Component { render() { return ( <div className="visuallyhidden" aria-live="polite" aria-atomic="true"> {this.props.message} </div> ); } } export default Announcements;

Diese Komponente erstellt einfach ein div -Element mit einigen ausgewählten Attributen zur Barrierefreiheit: aria-live und aria-atomic . Screenreader lesen diese Attribute und kündigen jeden Text im div laut an, damit die Person, die Ihre App verwendet, ihn hören kann. Das Attribut „ aria-live “ ist ziemlich mächtig, verwenden Sie es also mit Bedacht.

Darüber hinaus ist es wichtig, die Announcement immer in der Vorlage zu rendern, da einige Browser-/Screenreader-Technologien Inhalte nicht ankündigen, wenn das aria-live Element dynamisch zum DOM hinzugefügt wird. Daher sollte diese Komponente immer in allen übergeordneten Komponenten Ihrer App enthalten sein.

Sie fügen die Announcement wie {[Results.js:91](https://github.com/svinkle/tv-db/blob/master/src/pages/Results.js#L91)} :

 <Announcements message="{this.state.announcementMessage}" />

Um die Nachricht an die Announcements-Komponente weiterzuleiten, erstellen Sie eine state-Eigenschaft in der übergeordneten Komponente, die verwendet wird, um den Nachrichtentext {[Results.js:22](https://github.com/svinkle/tv-db/blob/master/src/pages/Results.js#L22)} :

 this.state = { announcementMessage: null };

Aktualisieren Sie dann den Status nach Bedarf {[Results.js:62](https://github.com/svinkle/tv-db/blob/master/src/pages/Results.js#L62)} :

 this.setState({ announcementMessage: `Total results found: ${data.length}` });

Fokusmanagement, Teil zwei

Wir haben bereits gelernt, wie man den Fokus mit ref s verwaltet, dem React-Konzept zum Erstellen einer Variablen, die auf ein Element im DOM zeigt. Schauen wir uns nun ein weiteres sehr wichtiges Beispiel an, das dasselbe Konzept verwendet.

Wenn Sie auf andere Seiten Ihrer App verlinken, können Sie das HTML a -Element verwenden. Dadurch wird wie erwartet ein Neuladen der gesamten Seite verursacht. Wenn Sie jedoch React Router in Ihrer App verwenden, haben Sie Zugriff auf die Link Komponente. Die Link Komponente ersetzt eigentlich das altbewährte a -Element in React-Apps.

Warum sollten Sie Link anstelle von tatsächlichen HTML-Ankerlinks verwenden, fragen Sie? Während es völlig in Ordnung ist, HTML-Links in React-Komponenten zu verwenden, ermöglicht die Verwendung der Link -Komponente von React Router Ihrer App, das virtuelle DOM von React zu nutzen. Die Verwendung der Link -Komponente hilft, "Seiten" viel schneller zu laden, da der Browser bei einem Link -Klick nicht aktualisiert werden muss, aber sie haben einen Haken.

Wenn Sie Link -Komponenten verwenden, müssen Sie sich darüber im Klaren sein, wo der Tastaturfokus platziert ist und wohin er geht, wenn die nächste „Seite“ erscheint.

Hier kommt unser Freund ref ins Spiel, um zu helfen.

Komponenten verknüpfen

Eine typische Link-Komponente sieht etwa so aus:

 <Link to='/home'>Home</Link>

Die Syntax sollte Ihnen bekannt vorkommen, da sie einem HTML- a -Element ziemlich ähnlich ist; tauschen Sie a gegen Link und href gegen to aus und schon sind Sie fertig.

Wie ich bereits erwähnt habe, aktualisiert die Verwendung von Link Komponenten anstelle von HTML-Links den Browser nicht. Stattdessen lädt React Router die nächste Komponente wie in der to -Prop beschrieben.

Schauen wir uns an, wie wir sicherstellen können, dass der Tastaturfokus an eine geeignete Stelle verschoben wird.

Anpassen des Tastaturfokus

Wenn eine neue Seite geladen wird, muss der Tastaturfokus explizit gesetzt werden. Andernfalls bleibt der Fokus auf der vorherigen Seite, und wer weiß, wo der Fokus enden könnte, wenn jemand als nächstes zu navigieren beginnt? Wie setzen wir explizit Fokus? Unser lieber Freund ref .

Einrichten der Ref

Um zu entscheiden, wohin der Fokus gehen soll, müssen Sie untersuchen, wie Ihre Komponenten eingerichtet wurden und welche Widgets verwendet werden. Wenn Sie beispielsweise "Seiten"-Komponenten mit untergeordneten Komponenten haben, die den Rest des Seiteninhalts ausmachen, möchten Sie möglicherweise den Fokus auf das äußerste übergeordnete Element der Seite verschieben, höchstwahrscheinlich auf ein div -Element. Von hier aus konnte jemand durch den Rest des Seiteninhalts navigieren, ähnlich wie bei einer vollständigen Browseraktualisierung.

Lassen Sie uns eine contentContainer ref dem äußersten übergeordneten div erstellen, etwa so {[Details.js:84](https://github.com/svinkle/tv-db/blob/master/src/pages/Details.js#L84)} :

 <div ref={ (contentContainer) => { this.contentContainer = contentContainer; } } tabIndex="-1" aria-labelledby="pageHeading" \>

Sie haben vielleicht bemerkt, dass die Attribute tabIndex und aria-labelledby sind. Der tabIndex mit seinem auf -1 gesetzten Wert ermöglicht es dem normalerweise nicht fokussierbaren div -Element, den Tastaturfokus zu erhalten, programmgesteuert über ref .

Tipp: Verwenden tabIndex="-1" genau wie bei der Fokusverwaltung bewusst und nach einem expliziten Plan.

Der Attributwert aria-labelledby programmgesteuert die Überschrift der Seite (vielleicht ein h1 oder h2 -Element mit der ID „pageHeading“), um dabei zu helfen, den aktuellen Kontext zu beschreiben, auf den sich die Tastatur derzeit konzentriert.

Nun, da wir die ref erstellt haben, sehen wir uns an, wie wir sie verwenden, um den Fokus tatsächlich zu verschieben.

Unter Verwendung der Ref

Wir haben vorhin etwas über die Lebenszyklusmethode „ componentDidMount() “ gelernt. Wir können dies erneut verwenden, um den Tastaturfokus zu verschieben, wenn die Seite im virtuellen DOM von React geladen wird, indem wir die contentContainer -Referenz verwenden, die wir zuvor in der Komponente {[ ref {[Home.js:26](https://github.com/svinkle/tv-db/blob/master/src/pages/Home.js#L26)} :

 componentDidMount() { this.contentContainer.focus(); }

Der obige Code teilt React mit: „Verschiebt beim Laden der Komponente den Tastaturfokus auf das Containerelement.“ Von diesem Punkt an beginnt die Navigation oben auf der Seite und der Inhalt ist auffindbar, als ob eine vollständige Seitenaktualisierung stattgefunden hätte.

Code-Linter für Barrierefreiheit von React

Ich könnte keinen React-Beitrag über Barrierefreiheit schreiben, ohne das unglaubliche Open-Source-Projekt [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) zu erwähnen. Dies ist ein ESLint -Plug-in, speziell für JSX und React, das nach potenziellen Zugänglichkeitsproblemen mit Ihrem Code sucht und diese meldet. Es wird integriert, wenn Sie ein neues React-Projekt erstellen, sodass Sie sich keine Gedanken über die Einrichtung machen müssen.

Wenn Sie beispielsweise ein Bild ohne alt -Attribut in Ihre Komponente eingefügt haben, sehen Sie dies in der Konsole Ihrer Browser-Entwicklertools:

Nachrichten wie diese sind bei der Entwicklung einer App sehr hilfreich. Wäre es nicht großartig, diese Art von Nachrichten in Ihrem eigenen Code-Editor zu sehen, bevor überhaupt etwas in den Browser gelangt? So installieren und eslint-plugin-jsx-a11y für die Verwendung mit Ihrer Bearbeitungsumgebung.

Installieren Sie das ESLint-Plugin

Zuerst müssen Sie das ESLint-Plugin für Ihren Editor installieren. Durchsuchen Sie die Plugin-Repositories Ihres Editors nach „eslint“ – es besteht die Möglichkeit, dass etwas für Sie zum Installieren verfügbar ist.

Hier sind einige schnelle Links für:

• Atom
• Erhabener Text
• VS-Code

Installieren Sie eslint-plugin-jsx-a11y

Der nächste Schritt ist die Installation von eslint-plugin-jsx-a11y über npm . Geben Sie einfach den folgenden Befehl aus, um es und ESLint zur Verwendung in Ihrem Editor zu installieren:

 npm install eslint eslint- plugin -jsx-a11y --save-dev

Nachdem die Ausführung abgeschlossen ist, aktualisieren Sie die .eslintrc -Datei des Projekts, damit ESLint das eslint-plugin-jsx-a11y verwenden kann.

Aktualisieren Sie die ESLint-Konfiguration

Wenn im Stammverzeichnis Ihres Projekts keine .eslintrc -Datei vorhanden ist, können Sie einfach eine neue Datei mit diesem Dateinamen erstellen. Sehen Sie sich an, wie Sie die Datei [.eslintrc](https://eslint.org/docs/user-guide/configuring) einrichten und einige der Regeln , die Sie hinzufügen können, um ESLint so zu konfigurieren, dass es die Anforderungen Ihres Projekts erfüllt.

Wenn die .eslintrc -Datei vorhanden ist, öffnen Sie sie zum Bearbeiten und fügen Sie Folgendes zum Abschnitt "Plugins" {[.eslintrc:43](https://github.com/svinkle/tv-db/blob/master/.eslintrc#L43)} :

 "plugins" : [ "jsx-a11y" ]

Dies weist unsere lokale Instanz von ESLint an, das jsx-a11y Plugin zu verwenden, wenn Sie Ihre Projektdateien linten.

Damit ESLint nach bestimmten Fehlern im Zusammenhang mit der Barrierefreiheit in unserem Code suchen kann, müssen wir auch den Regelsatz angeben, den ESLint verwenden soll. Sie können Ihre eigenen Regeln konfigurieren, aber ich empfehle die Verwendung des Standardsatzes, zumindest für den Anfang.

Fügen Sie dem Abschnitt „extends“ der .eslintrc -Datei {[.eslintrc:47](https://github.com/svinkle/tv-db/blob/master/.eslintrc#L47)} :

 "extends" : [ "plugin:jsx-a11y/recommended" ]

Diese eine Zeile weist ESLint an, den empfohlenen Standardregelsatz zu verwenden, was ich sehr nützlich finde.

Nachdem Sie diese Änderungen vorgenommen und Ihren Editor neu gestartet haben, sollten Sie jetzt etwa Folgendes sehen, wenn es Probleme mit der Barrierefreiheit gibt:

Fahren Sie mit dem Schreiben von semantischem HTML fort

In der Hilfedokumentation „Thinking in React“ werden Leser ermutigt, Komponentenmodule oder komponentengesteuerte Entwicklung zu erstellen; winzige, wiederverwendbare Codeschnipsel. Der Vorteil davon ist, dass Code von Projekt zu Projekt wiederverwendet werden kann. Stellen Sie sich vor, Sie erstellen ein barrierefreies Widget für eine Site und können dann, wenn die andere Site dasselbe Widget benötigt, den Code kopieren und einfügen!

Von hier aus bauen Sie Ihre Benutzeroberfläche mithilfe von Modulen innerhalb von Modulen auf, um größere Komponenten zu erstellen, und schließlich kommt eine „Seite“ zusammen. Dies mag anfangs eine gewisse Lernkurve darstellen, aber nach einer Weile gewöhnt man sich an diese Denkweise und genießt am Ende möglicherweise den Zusammenbruchsprozess beim Schreiben von HTML.

Da React ES6-Klassen verwendet, um seine Komponenten zu bilden, liegt es an Ihnen, weiterhin gutes, sauberes, semantisches HTML zu schreiben.

Wie wir bereits früher in diesem Artikel angesprochen haben, gibt es einige reservierte Wörter, auf die Sie achten sollten, wie z. B. htmlFor und className , aber abgesehen davon liegt es immer noch in Ihrer Verantwortung als Entwickler, Ihre HTML-Benutzeroberfläche wie gewohnt zu schreiben und zu testen.

Nutzen Sie auch die Möglichkeit, JavaScript über JSX in Ihren HTML-Code zu schreiben, wenn dies angebracht ist. Es hilft sehr dabei, Ihre App dynamischer und zugänglicher zu machen.

Fazit

Sie sind jetzt vollständig gerüstet, um React-Apps zugänglicher zu machen! Sie besitzen das Wissen um:

• Aktualisieren Sie den title damit die Benutzer sich in Ihrer App orientieren und den Zweck des Inhalts jeder Ansicht verstehen.
• Verwalten Sie den Tastaturfokus, damit sie sich reibungslos durch dynamische Inhalte bewegen können, ohne sich zu verirren oder darüber zu verwirren, was gerade passiert ist;
• Erstellen Sie eine Live-Messaging-Komponente, um Personen über wichtige Statusänderungen zu informieren. und
• Fügen Sie Ihrem Projekt Codelinting hinzu, damit Sie während der Arbeit Zugriffsfehler erkennen können.

Und vielleicht der beste Tipp zur Barrierefreiheit, den Sie mit allen teilen sollten, die für das Web entwickeln: Schreiben Sie semantisches HTML in Ihre Vorlagen, so wie Sie es für jede statische, CMS- oder Framework-basierte Website tun würden. React steht Ihnen nicht im Weg, wenn es darum geht, welche Elemente Sie für Ihre Benutzeroberflächen erstellen möchten. Es liegt an Ihnen, lieber Entwickler, sicherzustellen, dass das, was Sie erstellen, für so viele Menschen wie möglich nutzbar und zugänglich ist.

Haben Sie andere Möglichkeiten entdeckt, um zugänglichere React-Apps zu erstellen? Ich würde mich freuen, davon in den Kommentaren zu hören!