JavaScript spielt bei fast allem, was wir entwickeln, eine wichtige Rolle – von kleineren dynamischen Komponenten bis hin zu vollständigen Produkten, die auf einem JavaScript-Framework wie React oder Angular laufen.
Diese Verwendung (oder Übernutzung) von JavaScript hat viele besorgniserregende Trends hervorgebracht, wie lange Ladezeiten aufgrund großer Codemengen, die Verwendung nicht semantischer HTML-Elemente und die Einschleusung von HTML und CSS über JavaScript. Vielleicht sind Sie sich nicht sicher, wie die Barrierefreiheit in diese einzelnen Bereiche passt.
JavaScript kann sich erheblich auf die Barrierefreiheit Ihrer Website auswirken. In diesem Modul stellen wir einige allgemeine Muster für Barrierefreiheit vor, die durch JavaScript verbessert werden, sowie Lösungen für Probleme mit der Barrierefreiheit, die durch die Verwendung von JavaScript-Frameworks entstehen.
Trigger-Ereignisse
Mit JavaScript-Ereignissen können Nutzer mit Webinhalten interagieren und eine bestimmte Aktion ausführen. Viele Nutzer, z. B. Screenreader-Nutzer, Personen mit Beeinträchtigungen der Feinmotorik, Personen ohne Maus oder Touchpad und andere, sind auf die Tastatur angewiesen, um mit dem Web zu interagieren. Es ist wichtig, dass Sie Ihren JavaScript-Aktionen Tastaturunterstützung hinzufügen, da dies alle diese Nutzer betrifft.
Sehen wir uns ein Klickereignis an.
Wenn ein onClick()-Ereignis für ein semantisches HTML-Element wie <button> oder <a> verwendet wird, umfasst es natürlich sowohl Maus- als auch Tastaturfunktionen. Die Tastaturfunktionen werden jedoch nicht automatisch angewendet, wenn einem nicht semantischen Element wie einem generischen <div> ein onClick()-Ereignis hinzugefügt wird.
<div role="button" tabindex="0" onclick="doAction()">Click me!</div>
<button onclick="doAction()">Click me!</button>
Hier finden Sie eine Vorschau dieses Vergleichs auf CodePen.
Wenn ein nicht semantisches Element für ein Triggerereignis verwendet wird, muss ein keydown-/keyup-Ereignis hinzugefügt werden, um die Eingabe der Eingabetaste oder des Leerzeichens zu erkennen. Das Hinzufügen von Triggerereignissen zu nicht semantischen Elementen wird oft vergessen. Wenn Sie das vergessen, ist die Komponente leider nur mit der Maus zugänglich. Nutzer, die nur eine Tastatur verwenden, haben keinen Zugriff auf die zugehörigen Aktionen.
Seitentitel
Wie wir im Modul „Dokument“ gelernt haben, ist der Seitentitel für Nutzer von Screenreadern unerlässlich. Sie informieren die Nutzer darüber, auf welcher Seite sie sich befinden und ob sie zu einer neuen Seite weitergeleitet wurden.
Wenn Sie ein JavaScript-Framework verwenden, müssen Sie überlegen, wie Sie Seitentitel handhaben. Dies ist besonders wichtig für Single-Page-Anwendungen (SPAs), die aus einer einzelnen index.html-Datei geladen werden, da bei Übergängen oder Routen (Seitenänderungen) keine Seitenaktualisierung erforderlich ist. Jedes Mal, wenn ein Nutzer eine neue Seite in einer SPA lädt, ändert sich der Titel standardmäßig nicht.
Bei SPAs kann der Wert document.title je nach JavaScript-Framework manuell oder mit einem Hilfspaket hinzugefügt werden. Es kann etwas zusätzliche Arbeit erfordern, Screenreader-Nutzern die aktualisierten Seitentitel anzukündigen. Es gibt aber Optionen wie dynamische Inhalte.
Dynamischer Inhalt
Eine der leistungsstärksten JavaScript-Funktionen ist die Möglichkeit, jedem Element auf der Seite HTML und CSS hinzuzufügen. Entwickler können dynamische Anwendungen erstellen, die auf den Aktionen oder dem Verhalten der Nutzer basieren.
Angenommen, Sie möchten Nutzern eine Nachricht senden, wenn sie sich auf Ihrer Website oder in Ihrer App anmelden. Die Nachricht soll sich vom weißen Hintergrund abheben und folgende Informationen enthalten: „Sie sind jetzt angemeldet.“
Mit dem Element innerHTML können Sie den Inhalt festlegen:
document.querySelector("#banner").innerHTML = '<p>You are now signed in</p>';
Sie können CSS auf ähnliche Weise mit setAttribute anwenden:
document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");
Mit großer Macht kommt große Verantwortung. Leider wurde die JavaScript-Injection von HTML und CSS in der Vergangenheit missbraucht, um nicht barrierefreie Inhalte zu erstellen. Im Folgenden sind einige häufige Missbräuche aufgeführt:
| Mögliche Missbrauchsfälle | Richtige Verwendung |
|---|---|
| Rendern großer Mengen nicht semantischer HTML-Code | Kleinere semantische HTML-Elemente rendern |
| Es wird nicht genügend Zeit eingeräumt, damit dynamische Inhalte von Hilfstechnologien erkannt werden können. | Eine setTimeout()-Sekunden lange Zeitverzögerung, damit Nutzer die vollständige Nachricht hören können |
Stilattribute für onFocus() dynamisch anwenden |
Verwenden Sie :focus für die zugehörigen Elemente in Ihrem CSS-Stylesheet. |
| Das Anwenden von Inline-Styles kann dazu führen, dass Nutzer-Stylesheets nicht richtig gelesen werden. | Styles in CSS-Dateien aufbewahren, um für Einheitlichkeit des Designs zu sorgen |
| Erstellen sehr großer JavaScript-Dateien, die die Gesamtleistung der Website verlangsamen | Verwenden Sie weniger JavaScript. Möglicherweise können Sie ähnliche Funktionen in CSS ausführen (z. B. Animationen oder eine fixierte Navigation), die schneller geparst und leistungsfähiger sind. |
Verwenden Sie für CSS CSS-Klassen anstelle von Inline-Styles, da dies die Wiederverwendbarkeit und Einfachheit ermöglicht. Verwenden Sie versteckte Inhalte auf der Seite und Schaltflächenklassen, um Inhalte für dynamisches HTML auszublenden und einzublenden. Wenn Sie JavaScript verwenden müssen, um Ihrer Seite dynamisch Inhalte hinzuzufügen, achten Sie darauf, dass es einfach und prägnant und natürlich barrierefrei ist.
Fokusverwaltung
Im Modul zum Tastaturfokus haben wir die Reihenfolge des Fokus und die Stilarten von Indikatoren behandelt. Bei der Fokusverwaltung geht es darum, zu wissen, wann und wo der Fokus fixiert werden soll und wann nicht.
Die Fokusverwaltung ist für Nutzer, die nur die Tastatur verwenden, entscheidend.
Komponentenebene
Sie können Tastaturfallen erstellen, wenn der Fokus einer Komponente nicht richtig verwaltet wird. Eine Tastaturfalle tritt auf, wenn ein Nutzer, der nur die Tastatur verwendet, in einer Komponente stecken bleibt oder der Fokus nicht wie vorgesehen beibehalten wird.
Eines der häufigsten Muster, bei dem Nutzer Probleme mit der Fokusverwaltung haben, ist eine modale Komponente. Wenn ein Nutzer, der nur eine Tastatur verwendet, auf ein modales Fenster stößt, sollte er mit der Tabulatortaste zwischen den ausführbaren Elementen des modalen Fensters wechseln können. Er sollte jedoch niemals außerhalb des modalen Fensters gelangen, ohne es explizit zu schließen. JavaScript ist unerlässlich, um diesen Fokus richtig zu erfassen.
Seitenebene
Der Fokus muss auch bei der Navigation zwischen den Seiten beibehalten werden. Das gilt insbesondere für SPAs, bei denen kein Browser aktualisiert wird und sich alle Inhalte dynamisch ändern. Wenn ein Nutzer auf einen Link klickt, um eine andere Seite in Ihrer Anwendung aufzurufen, bleibt der Fokus entweder an derselben Stelle oder wird möglicherweise ganz woanders platziert.
Beim Wechsel zwischen Seiten (oder beim Routing) muss das Entwicklungsteam entscheiden, wo der Fokus beim Laden der Seite liegen soll.
Es gibt mehrere Möglichkeiten, dies zu erreichen:
- Legen Sie den Fokus mit einer
aria-live-Ankündigung auf den Hauptcontainer. - Legen Sie den Fokus wieder auf einen Link, um zum Hauptinhalt zu springen.
- Verschieben Sie den Fokus auf die oberste Überschrift der neuen Seite.
Worauf Sie den Schwerpunkt legen, hängt vom verwendeten Framework und den Inhalten ab, die Sie Ihren Nutzern präsentieren möchten. Sie kann kontext- oder aktionsabhängig sein.
Zustandsverwaltung
Ein weiterer Bereich, in dem JavaScript für die Barrierefreiheit entscheidend ist, ist die Zustandsverwaltung. Das ist der Fall, wenn der aktuelle visuelle Zustand einer Komponente oder Seite an einen Nutzer mit eingeschränktem Sehvermögen, einen Blinden oder einen gehörlosen Blinden mit Hilfstechnologien weitergeleitet wird.
Der Status einer Komponente oder Seite wird häufig über ARIA-Attribute verwaltet, wie im Modul „ARIA und HTML“ erläutert. Sehen wir uns einige der gängigsten ARIA-Attribute an, die zum Verwalten des Zustands eines Elements verwendet werden.
Komponentenebene
Je nach Seiteninhalt und den Informationen, die Ihre Nutzer benötigen, gibt es viele ARIA-Status, die Sie berücksichtigen müssen, wenn Sie Informationen zu einer Komponente an den Nutzer weitergeben.
Sie können beispielsweise ein aria-expanded-Attribut verwenden, um Nutzern mitzuteilen, ob ein Drop-down-Menü oder eine Liste maximiert oder minimiert ist.
Oder Sie können aria-pressed verwenden, um anzuzeigen, dass eine Schaltfläche gedrückt wurde.
Es ist wichtig, bei der Anwendung von ARIA-Attributen selektiv vorzugehen. Überlegen Sie sich, welche wichtigen Informationen den Nutzern vermittelt werden sollten.
Seitenebene
Entwickler verwenden häufig einen visuell ausgeblendeten Bereich, den sogenannten ARIA-Live-Bereich, um Änderungen auf dem Bildschirm und Benachrichtigungen an Nutzer von Hilfstechnologien anzukündigen. Dieser Bereich kann mit JavaScript kombiniert werden, um Nutzer über dynamische Änderungen auf der Seite zu informieren, ohne dass die gesamte Seite neu geladen werden muss.
Aufgrund seiner dynamischen Natur war es bisher schwierig, mit JavaScript Inhalte in aria-live- und Benachrichtigungsbereichen anzukündigen. Wenn Inhalte asynchron in das DOM eingefügt werden, ist es für AT schwierig, die Region zu erkennen und anzukündigen.
Damit der Inhalt richtig gelesen werden kann, muss sich der Live- oder Benachrichtigungsbereich beim Laden im DOM befinden. Anschließend kann der Text dynamisch ausgetauscht werden.
Wenn du ein JavaScript-Framework verwendest, gibt es gute Neuigkeiten: Fast alle haben ein „Live-Ansager“-Paket, das die gesamte Arbeit für dich erledigt und vollständig barrierefrei ist. Sie müssen keine Live-Region erstellen und sich nicht mit den im vorherigen Abschnitt beschriebenen Problemen befassen.
Hier sind einige Live-Pakete für gängige JavaScript-Frameworks:
- React: react-aria-live und react-a11y-announcer
- Angular:
LiveAnnouncer - Vue: vue-a11y-utils
Modernes JavaScript ist eine leistungsstarke Sprache, mit der Webentwickler robuste Webanwendungen erstellen können. Dies führt manchmal zu übertriebener Komplexität und in der Folge zu unzugänglichen Mustern. Wenn Sie die JavaScript-Muster und -Tipps in diesem Modul befolgen, können Sie Ihre Apps für alle Nutzer barrierefreier gestalten.
Wissen testen
Ihr Wissen über JavaScript testen
Wie können Sie den Stil eines Elements am besten mit JavaScript ändern?
Können alle JavaScript-Aktionen von Nutzern mit Tastatur unterstützt werden?