JavaScript

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

Diese Verwendung (oder Überbeanspruchung) von JavaScript hat viele besorgniserregende Trends hervorgebracht, z. B. lange Ladezeiten aufgrund großer Mengen an Code, die Verwendung von nicht semantischen HTML-Elementen und die Einfügung von HTML und CSS über JavaScript. Außerdem sind Sie möglicherweise unsicher, wie die Barrierefreiheit in diese einzelnen Bereiche passt.

JavaScript kann einen großen Einfluss auf die Barrierefreiheit 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 Barrierefreiheitsprobleme, die durch die Verwendung von JavaScript-Frameworks entstehen.

Trigger-Ereignisse

JavaScript-Ereignisse ermöglichen es Nutzern, mit Webinhalten zu interagieren und eine bestimmte Aktion auszuführen. Viele Nutzer, z. B. Nutzer von Screenreadern, Menschen mit motorischen Behinderungen, Menschen ohne Maus oder Trackpad und andere, sind auf die Tastaturunterstützung 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 Click-Event an. Wenn ein onClick()-Ereignis für ein semantisches HTML-Element wie <button> oder <a> verwendet wird, umfasst es sowohl Maus- als auch Tastaturfunktionen. Die Tastaturfunktion wird jedoch nicht automatisch angewendet, wenn ein onClick() Ereignis zu 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>

Vorschau dieses Vergleichs auf CodePen.

Wenn ein nicht semantisches Element für ein Trigger-Ereignis verwendet wird, muss ein Keydown-/Keyup-Ereignis hinzugefügt werden, um das Drücken der Eingabetaste oder der Leertaste zu erkennen. Das Hinzufügen von Trigger-Ereignissen zu nicht semantischen Elementen wird oft vergessen. Wenn dies vergessen wird, ist die Komponente leider nur mit der Maus zugänglich. Nutzer, die nur die Tastatur verwenden, haben keinen Zugriff auf die zugehörigen Aktionen.

Seitentitel

Wie wir im Modul „Dokument“ erfahren haben, ist der Seitentitel für Nutzer von Screenreadern unerlässlich. Er informiert Nutzer darüber, auf welcher Seite sie sich befinden und ob sie zu einer neuen Seite gewechselt sind.

Wenn Sie ein JavaScript-Framework verwenden, müssen Sie überlegen, wie Sie mit Seitentiteln umgehen. Dies ist besonders wichtig für Single-Page-Apps (SPAs) , die aus einer einzelnen index.html-Datei geladen werden, da bei Übergängen oder Routen (Seiten änderungen) kein Seitenneuladen erfolgt. Jedes Mal, wenn ein Nutzer eine neue Seite in einer SPA lädt, ändert sich der Titel standardmäßig nicht.

Bei SPAs kann der document.title Wert manuell oder mit einem Hilfspaket hinzugefügt werden (je nach JavaScript-Framework). Das Ankündigen der aktualisierten Seitentitel für einen Nutzer von Screenreadern erfordert möglicherweise etwas mehr Aufwand, aber es gibt Optionen wie dynamische Inhalte.

Dynamischer Inhalt

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

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 lauten: „Sie sind jetzt angemeldet.“

Sie können das Element innerHTML verwenden, um den Inhalt festzulegen:

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

CSS kann auf ähnliche Weise mit setAttribute angewendet werden:

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

Viel Macht erfordert viel Verantwortung Leider wurde die JavaScript-Einfügung von HTML und CSS in der Vergangenheit missbraucht, um nicht barrierefreie Inhalte zu erstellen. Einige häufige Missbräuche sind hier aufgeführt:

Verwenden Sie für CSS CSS-Klassen anstelle von Inline-Stilen, da dies die Wiederverwendbarkeit und Einfachheit ermöglicht. Verwenden Sie versteckte Inhalte auf der Seite und wechseln Sie zwischen Klassen, um Inhalte für dynamisches HTML ein- und auszublenden. Wenn Sie JavaScript verwenden müssen, um dynamisch Inhalte zu Ihrer Seite hinzuzufügen, achten Sie darauf, dass es einfach und prägnant und natürlich barrierefrei ist.

Fokusverwaltung

Im Modul „Tastaturfokus“ haben wir die Fokus reihenfolge und die Stile für Fokusindikatoren behandelt. Bei der Fokusverwaltung geht es darum, zu wissen, wann und wo der Fokus eingeschränkt werden sollte 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 die Tastatur verwendet, in einer Komponente stecken bleibt oder der Fokus nicht beibehalten wird, wenn er beibehalten werden sollte.

Eines der häufigsten Muster, bei denen Nutzer Probleme mit der Fokusverwaltung haben, ist eine modale Komponente. Wenn ein Nutzer, der nur die Tastatur verwendet, auf ein modales Fenster stößt, sollte er mit der Tabulatortaste zwischen den aktionsfähigen Elementen des modalen Fensters wechseln können. Er sollte jedoch niemals außerhalb des modalen Fensters zugelassen werden, ohne es explizit zu schließen. JavaScript ist unerlässlich, um diesen Fokus richtig einzuschränken.

Seitenebene

Der Fokus muss auch beibehalten werden, wenn ein Nutzer von Seite zu Seite wechselt. Dies gilt insbesondere für SPAs, bei denen keine Browseraktualisierung erfolgt, und sich alle Inhalte dynamisch ändern. 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 wird möglicherweise ganz woanders platziert.

Beim Übergang zwischen Seiten (oder beim Routing) muss das Entwicklungsteam entscheiden, wohin der Fokus beim Laden der Seite gesetzt wird.

Es gibt mehrere Möglichkeiten, dies zu erreichen:

• Fokus auf den Hauptcontainer mit einer aria-live-Ankündigung setzen.
• Den Fokus wieder auf einen Link setzen, um zum Hauptinhalt zu springen.
• Den Fokus auf die Überschrift der obersten Ebene der neuen Seite setzen.

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

Zustandsverwaltung

Ein weiterer Bereich, in dem JavaScript für die Barrierefreiheit von entscheidender Bedeutung ist, ist die Zustandsverwaltung. Dabei wird der aktuelle visuelle Zustand einer Komponente oder Seite an einen Nutzer mit eingeschränktem Sehvermögen, Blindheit oder Taubblindheit weitergegeben, der Hilfstechnologien verwendet.

Der Zustand einer Komponente oder Seite wird häufig über ARIA-Attribute verwaltet, wie im Modul „ARIA und HTML“ beschrieben. Sehen wir uns einige der häufigsten Arten von ARIA-Attributen an, die zur Verwaltung des Zustands eines Elements verwendet werden.

Komponentenebene

Je nach Seiteninhalt und den Informationen, die Ihre Nutzer benötigen, gibt es viele ARIA-Zustände , die bei der Weitergabe von Informationen zu einer Komponente an den Nutzer berücksichtigt werden müssen.

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

Oder Sie können aria-pressed verwenden, um anzugeben, dass eine Schaltfläche gedrückt wurde.

Bei der Anwendung von ARIA-Attributen ist es wichtig, selektiv vorzugehen. Überlegen Sie sich den Nutzerfluss, um zu verstehen, welche wichtigen Informationen an den Nutzer weitergegeben werden sollten.

Seitenebene

Entwickler verwenden häufig einen visuell verborgenen Bereich, die sogenannte ARIA-Live-Region , um Änderungen auf dem Bildschirm und Warnmeldungen für Nutzer von Hilfstechnologien (AT) 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.

In der Vergangenheit gab es Probleme mit JavaScript, Inhalte in aria-live und Warnbereichen anzukündigen, da es dynamisch ist. Durch das asynchrone Hinzufügen von Inhalten zum DOM ist es für unterstützende Technologien schwierig, die Region zu erkennen und anzukündigen. Damit der Inhalt richtig gelesen werden kann, muss sich die Live- oder Warnregion beim Laden im DOM befinden. Anschließend kann der Text dynamisch ausgetauscht werden.

Wenn Sie ein JavaScript-Framework verwenden, gibt es gute Nachrichten: Fast alle haben ein „Live-Ankündigungs“-Paket, das die gesamte Arbeit für Sie erledigt und vollständig barrierefrei ist. Sie müssen sich keine Gedanken darüber machen, einen Live-Bereich zu erstellen und die im vorherigen Abschnitt beschriebenen Probleme zu beheben.

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 einer Überentwicklung und damit zu nicht barrierefreien Mustern. Wenn Sie die JavaScript-Muster und -Tipps in diesem Modul befolgen, können Sie Ihre Apps für alle Nutzer barrierefreier gestalten.