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. Und Sie sind sich vielleicht 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 du deinen JavaScript-Aktionen die Tastaturunterstützung hinzufügst, da dies alle 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. Tastaturfunktionen werden jedoch nicht automatisch angewendet, wenn ein onClick()-Ereignis einem nicht semantischen Element wie einem generischen <div> 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 Dokumentmodul gelernt haben, ist der Seitentitel für Nutzer von Screenreadern unerlässlich. Sie erfahren, auf welcher Seite sie sich befinden und ob sie eine neue Seite aufgerufen haben.
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 die folgende Information 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;");
Leistungsfähigkeit bringt auch Verantwortung mit sich. Leider wurde die JavaScript-Einschleusung von HTML und CSS in der Vergangenheit missbraucht, um nicht zugängliche Inhalte zu erstellen. Im Folgenden sind einige häufige Missbräuche aufgeführt:
| Mögliche Missbrauchsfälle | Richtige Verwendung |
|---|---|
| Große nicht semantische HTML-Blöcke rendern | Kleinere Teile semantischen HTML-Codes 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 werden und eine bessere Leistung bieten. |
Bei CSS können Sie zwischen CSS-Klassen wechseln, statt Inline-Styles hinzuzufügen, da dies 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 du JavaScript verwenden musst, um deiner Seite Inhalte dynamisch hinzuzufügen, achte darauf, dass sie einfach, prägnant und natürlich zugänglich ist.
Fokusverwaltung
Im Modul zum Tastaturfokus haben wir die Reihenfolge des Fokus und die Stilarten von Indikatoren behandelt. Beim Fokusmanagement geht es darum zu wissen, wann und wo der Fokus erfasst werden soll.
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. Ein Tastaturfall tritt auf, wenn ein Nutzer, der nur die Tastatur verwendet, in einer Komponente hängt oder der Fokus nicht wie gewünscht 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. Dies gilt insbesondere für SPAs, bei denen keine Browseraktualisierung durchgeführt 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 Übergang zwischen Seiten (oder Weiterleitungen) muss das Entwicklungsteam entscheiden, worauf der Fokus beim Seitenaufbau liegt.
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.
Mit dem Attribut aria-expanded kannst du dem Nutzer beispielsweise mitteilen, 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 anzukündigen und Benachrichtigungen an Nutzer von Hilfstechnologien zu senden. 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. Das asynchrone Hinzufügen von Inhalten zum DOM erschwert es der AT, die Region zu erfassen und anzukündigen.
Damit der Inhalt richtig gelesen werden kann, muss sich die Live- oder Benachrichtigungsregion 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
- Winkelig:
LiveAnnouncer - Vue: vue-a11y-utils
Modernes JavaScript ist eine leistungsstarke Sprache, mit der Webentwickler robuste Webanwendungen erstellen können. Dies führt manchmal zu Over-Engineering und damit nicht zugänglichen Mustern. Wenn Sie die JavaScript-Muster und -Tipps in diesem Modul befolgen, können Sie Ihre Apps für alle Nutzer barrierefreier gestalten.
Wissenstest
Testen Sie Ihr JavaScript-Wissen
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?