JavaScript

JavaScript spielt bei fast allem, was wir erstellen, eine wichtige Rolle – von kleineren dynamischen Komponenten bis hin zu vollständigen Produkten, die auf einem JavaScript-Framework wie React oder Angular ausgeführt werden.

Der Einsatz oder die übermäßige Verwendung von JavaScript hat zu vielen beunruhigenden Trends geführt, wie lange Ladezeiten aufgrund von umfangreichem Code, die Verwendung nicht semantischer HTML-Elemente sowie das Einschleusen von HTML und CSS über JavaScript. Und vielleicht sind Sie sich nicht sicher, wie die Barrierefreiheit in jeden dieser Bereiche passt.

JavaScript kann einen großen Einfluss auf die Zugänglichkeit Ihrer Website haben. In diesem Modul stellen wir einige allgemeine Muster für die Barrierefreiheit vor, die durch JavaScript verbessert werden, sowie Lösungen für Probleme mit der Barrierefreiheit, die sich aus der Verwendung von JavaScript-Frameworks ergeben.

Ereignisse auslösen

JavaScript-Ereignisse ermöglichen es Nutzern, mit Webinhalten zu interagieren und eine bestimmte Aktion auszuführen. Viele Menschen, z. B. Nutzer von Screenreadern, Menschen mit feinmotorischen Beeinträchtigungen oder Menschen ohne Maus oder Touchpad, verlassen sich bei der Interaktion im Web auf die Tastaturunterstützung. Es ist wichtig, dass Sie die Tastaturunterstützung für JavaScript-Aktionen hinzufügen, da diese 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>-Ereignis ein onClick()-Ereignis hinzugefügt wird.

<div role="button" tabindex="0" onclick="doAction()">Click me!</div>

<button onclick="doAction()">Click me!</button>

Sehen Sie sich diesen Vergleich mit CodePen als Vorschau an.

Wenn ein nicht semantisches Element für ein Triggerereignis verwendet wird, muss ein Keydown-Ereignis hinzugefügt werden, um die Betätigung der Eingabetaste oder der Leertaste zu erkennen. Das Hinzufügen von Triggerereignissen zu nicht semantischen Elementen wird oft vergessen. Vergessen wird eine Komponente, auf die nur mit der Maus zugegriffen werden kann. Nutzer, die nur die Tastatur verwenden, haben keinen Zugriff auf die zugehörigen Aktionen.

Seitentitel

Wie Sie im Modul "Dokumente" gelernt haben, ist der Seitentitel für Nutzer von Screenreadern unerlässlich. Sie teilt dem Nutzer mit, auf welcher Seite sie sich befinden und ob sie bereits eine neue Seite aufgerufen haben.

Wenn du ein JavaScript-Framework verwendest, musst du überlegen, wie du mit Seitentiteln umgehst. Dies ist besonders wichtig für Apps mit nur einer Seite (SPAs), die aus einer einzelnen index.html-Datei geladen werden, da bei Übergängen oder Routen (Seitenänderungen) die Seite nicht neu geladen wird. 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. Die Ankündigung der aktualisierten Seitentitel für Nutzer von Screenreadern kann zusätzliche Arbeit erfordern. Zum Beispiel gibt es Optionen wie dynamische Inhalte.

Dynamische Inhalte

Eine der leistungsstärksten JavaScript-Funktionen ist die Möglichkeit, jedem Element auf der Seite HTML und CSS hinzuzufügen. Entwickler können dynamische Apps basierend auf den Aktionen oder Verhaltensweisen der Nutzer erstellen.

Angenommen, Sie möchten Nutzern eine Nachricht senden, wenn sie sich bei Ihrer Website oder App anmelden. Die Nachricht soll sich vom weißen Hintergrund abheben und die Nachricht weiterleiten: „Sie sind jetzt angemeldet.“

Du kannst das Element innerHTML verwenden, um den Inhalt festzulegen:

document.querySelector("#banner").innerHTML = '<p>You are now logged in</p>';

Sie können CSS auf ähnliche Weise mit setAttribute anwenden:

document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");

Aus großer Macht geht auch große Verantwortung mit sich. Leider wurde die JavaScript-Injektion von HTML und CSS in der Vergangenheit missbraucht, um nicht zugängliche Inhalte zu erstellen. Hier sind einige häufige Missverständnisse aufgeführt:

Bei CSS können Sie zwischen CSS-Klassen wechseln, statt Inline-Stile hinzuzufügen, da dies die Wiederverwendbarkeit und Einfachheit ermöglicht. Verwenden Sie ausgeblendete Inhalte auf der Seite und wechseln Sie zwischen Klassen, um Inhalte für dynamisches HTML ein- und auszublenden. Wenn du JavaScript verwenden musst, um deiner Seite dynamisch Inhalte hinzuzufügen, achte darauf, dass diese einfach und prägnant und natürlich barrierefrei sind.

Fokusmanagement

Im Tastaturfokusmodul wurden die Stile für Fokusreihenfolge und -anzeige behandelt. Bei fokussiertem Management geht es darum zu wissen, wann und wo der Fokus gefangen werden soll und wann nicht.

Die Fokusverwaltung ist für Nutzer, die nur die Tastatur verwenden, von entscheidender Bedeutung.

Komponentenebene

Sie können Tastaturfallen erstellen, wenn der Fokus einer Komponente nicht richtig verwaltet wird. Eine Tastaturfalle tritt auf, wenn ein Nutzer, der nur mit der Tastatur arbeitet, in einer Komponente feststeckt oder der Fokus nicht wie gewünscht beibehalten wird.

Eines der häufigsten Muster, bei denen Probleme bei der Fokusverwaltung auftreten, ist eine modale Komponente. Wenn ein Nutzer, der nur über die Tastatur verfügt, auf ein modales Fenster stößt, sollte der Nutzer mit der Tabulatortaste zwischen den Elementen des Modaldialogfelds wechseln können. Es sollte jedoch nie außerhalb des Modaldialogfelds erlaubt sein, ohne es ausdrücklich zu schließen. JavaScript ist wichtig, um diesen Fokus richtig zu erfassen.

Seitenebene

Der Fokus muss auch aufrechterhalten werden, wenn ein Nutzer von einer Seite zur nächsten navigiert. Dies gilt insbesondere für SPAs, bei denen der Browser nicht aktualisiert wird und alle Inhalte dynamisch geändert werden. Jedes Mal, wenn ein Nutzer auf einen Link klickt, um zu einer anderen Seite in Ihrer Anwendung zu wechseln, bleibt der Fokus entweder an derselben Stelle oder möglicherweise an einer anderen Stelle.

Beim Wechsel zwischen Seiten (oder Routing) muss das Entwicklungsteam entscheiden, worauf der Fokus beim Laden der Seite liegt.

Dafür gibt es mehrere Methoden:

• Der Fokus wird mit einer aria-live-Ankündigung auf den Hauptcontainer gerichtet.
• Fokus wieder auf einen Link verlagern, um zum Hauptinhalt zu springen
• Verschieben Sie den Fokus auf die oberste Überschrift der neuen Seite.

Wo Sie den Fokus legen, hängt vom verwendeten Framework und den Inhalten ab, die Sie Ihren Nutzern bereitstellen möchten. Sie kann kontext- oder aktionsabhängig sein.

Staatliche Verwaltung

Ein weiterer Bereich, in dem JavaScript für die Barrierefreiheit von entscheidender Bedeutung ist, ist die Statusverwaltung. Das bedeutet, dass der aktuelle visuelle Zustand einer Komponente oder Seite an Nutzer von sehbehinderten, blinden oder taublinden Hilfstechnologien weitergegeben wird.

Häufig wird der Status einer Komponente oder Seite durch ARIA-Attribute verwaltet, wie im ARIA- und HTML-Modul beschrieben. Sehen wir uns einige der gängigsten Typen von ARIA-Attributen an, die zur Verwaltung des Zustands eines Elements verwendet werden.

Komponentenebene

Abhängig vom Seiteninhalt und den benötigten Informationen gibt es viele ARIA-Status, die bei der Weiterleitung von Informationen zu einer Komponente an den Nutzer berücksichtigt werden müssen.

Sie können beispielsweise das Attribut aria-expanded verwenden, um dem Nutzer mitzuteilen, ob ein Drop-down-Menü oder eine Liste maximiert oder minimiert ist.

Alternativ können Sie mit aria-pressed anzeigen, dass eine Schaltfläche gedrückt wurde.

Es ist wichtig, bei der Anwendung von ARIA-Attributen selektiv zu sein. Den User Flow durchdenken, um zu verstehen, welche wichtigen Informationen den Nutzenden vermittelt werden sollten.

Seitenebene

Entwickler verwenden häufig einen visuell verborgenen Bereich, der als ARIA-Live-Region bezeichnet wird, um Nutzer von Hilfstechnologien (AT) Nutzern über Änderungen auf dem Bildschirm und Warnmeldungen zu informieren. Dieser Bereich kann mit JavaScript kombiniert werden, um Nutzer über dynamische Änderungen an der Seite zu informieren, ohne dass die gesamte Seite neu geladen werden muss.

In der Vergangenheit hatte JavaScript aufgrund seines dynamischen Charakters Schwierigkeiten, Inhalte in aria-live anzukündigen und Regionen zu benachrichtigen. Das asynchrone Hinzufügen von Inhalten zum DOM erschwert es AT, die Region zu erfassen und anzukündigen. Damit die Inhalte richtig gelesen werden können, muss sich der Live- oder Benachrichtigungsbereich beim Laden im DOM befinden. Dann kann der Text dynamisch ausgetauscht werden.

Wenn Sie ein JavaScript-Framework verwenden, haben fast alle ein Paket für Live-Ankündigungen, das Ihnen die Arbeit abnimmt und uneingeschränkt zugänglich ist. Sie müssen sich nicht um das Erstellen einer Live-Region und den Umgang mit den im vorherigen Abschnitt beschriebenen Problemen kümmern.

Hier sind einige Live-Pakete für gängige JavaScript-Frameworks:

• React: react-aria-live und react-a11y-announcer
• Eckig: LiveAnnouncer
• Vue: vue-a11y-utils

Modernes JavaScript ist eine leistungsstarke Sprache, mit der Webentwickler zuverlässige Webanwendungen erstellen können. Dies kann manchmal zu Over-Engineering und damit zu unzugänglichen Mustern führen. Wenn Sie die JavaScript-Muster und -Tipps in diesem Modul befolgen, können Sie Ihre Anwendungen für alle Nutzer zugänglicher machen.

Überprüfen Sie Ihr Wissen

Testen Sie Ihr JavaScript-Wissen