JavaScript

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

Die Übernutzung von JavaScript hat viele besorgniserregende Trends hervorgebracht. etwa lange Ladezeiten aufgrund von großen Codemengen, die Verwendung von nicht semantischem HTML-Code sowie das Einfügen von HTML und CSS über JavaScript. Vielleicht sind Sie weil ich unsicher bin, wie Barrierefreiheit in jedem dieser Bereiche zu finden ist.

JavaScript kann einen großen Einfluss auf die Barrierefreiheit deiner Website haben. In dieser erfahren Sie mehr über einige allgemeine Barrierefreiheitsmuster, die durch JavaScript generiert werden, sowie Lösungen für Probleme mit der Barrierefreiheit, die durch mit JavaScript-Frameworks.

Trigger-Ereignisse

JavaScript-Ereignisse ermöglichen es Nutzern, mit Webinhalten zu interagieren und eine bestimmte Aktion ausführen. Viele Nutzer, z. B. Nutzer von Screenreadern, Menschen mit feinmotorischen Beeinträchtigungen, Menschen ohne Maus oder Touchpad, und andere nutzen Tastaturunterstützung, um mit dem Web zu interagieren. Es ist wichtig, dass Sie die Tastaturunterstützung für Ihre JavaScript-Aktionen hinzufügen, da diese alle diese Nutzenden betrifft.

Sehen wir uns ein Klickereignis an. Wenn ein onClick()-Ereignis für ein semantisches HTML-Element wie ein <button> verwendet wird <a> enthält, umfasst diese sowohl Maus- als auch Tastaturfunktionen. Sie können jedoch Tastaturfunktionen werden nicht automatisch angewendet, wenn ein onClick()-Ereignis wird einem nicht semantischen Element wie einem generischen <div> hinzugefügt.

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

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

Sehen Sie sich diesen Vergleich auf CodePen als Vorschau an.

Wenn für ein Triggerereignis ein nicht semantisches Element verwendet wird, Keydown-/Keyup-Ereignis hinzugefügt werden, um das Drücken der Eingabe- oder Leertaste zu erkennen. Trigger-Ereignisse hinzufügen zu werden oft vergessen. Wenn es vergessen wird, Das Ergebnis ist eine Komponente, auf die nur mit der Maus zugegriffen werden kann. Nur Tastatur Nutzer haben keinen Zugriff mehr auf die zugehörigen Aktionen.

Seitentitel

Wie wir im Dokument-Modul gelernt haben, ist der Seitentitel für Nutzer von Screenreadern sehr wichtig. Sie erfahren, welche Seite und ob er eine neue Seite aufgerufen hat.

Wenn Sie ein JavaScript-Framework verwenden, müssen Sie berücksichtigen, wie Sie die Seite Titel. Das ist besonders wichtig für Single-Page-Apps (SPAs) die aus einer einzelnen index.html-Datei als Übergänge oder Routen (Seite Änderungen) beinhalten keine Aktualisierung der Seite. Jedes Mal, wenn ein Nutzer eine neue Seite in als SPA, wird der Titel standardmäßig nicht geändert.

Bei SPAs: document.title kann manuell oder mit einem Hilfspaket hinzugefügt werden (je nach JavaScript-Framework). Bekanntgabe der aktualisierte Seitentitel Screenreader-Nutzer können zusätzliche Arbeit erfordern, aber die gute Nachricht ist, wie z. B. dynamische Inhalte.

Dynamischer Inhalt

Eine der leistungsstärksten JavaScript-Funktionen ist die Möglichkeit, HTML-Code und CSS zu einem beliebigen Element auf der Seite hinzufügen. Entwickelnde können dynamische Anwendungen erstellen. Aktionen oder Verhaltensweisen der Nutzenden.

Angenommen, Sie möchten eine Nachricht an Nutzer senden, wenn diese sich auf Ihrer Website anmelden. oder einer App. Die Botschaft soll sich vom weißen Hintergrund abheben die Meldung: „Sie sind jetzt angemeldet.“

Sie können 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 anwenden, setAttribute:

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

Große Leistung bringt auch Verantwortung mit sich. Leider ist JavaScript Das Einfügen von HTML und CSS wurde in der Vergangenheit missbraucht, um Inhalte. Im Folgenden sind einige häufige Missbrauchsfälle aufgeführt:

Bei CSS können Sie zwischen CSS-Klassen wechseln, statt Inline-Styles hinzuzufügen, da Wiederverwendbarkeit und Einfachheit. Verwenden Sie verborgene Inhalte auf der Seite und Klassen ein-/ausblenden, um Inhalte für dynamisches HTML ein- und auszublenden. Wenn Sie um Ihrer Seite dynamisch Inhalte hinzuzufügen, und achten Sie darauf, dass diese einfach und prägnant und natürlich barrierefrei zugänglich sind.

Fokusmanagement

Im Fokusmodul Tastatur haben wir den Fokus Sortier- und Indikatorstile. Beim Fokusmanagement geht es darum zu wissen, wann und wo es Fallen droht und wann er nicht eingeschlossen werden sollte.

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. Ein Tastaturfall tritt auf, wenn ein Nutzer, der nur mit der Tastatur arbeitet, in einer Komponente feststeckt oder bleibt der Fokus nicht erhalten, wenn er es sein sollte.

Eines der häufigsten Muster, bei denen Nutzer Probleme bei der Fokusverwaltung haben in einer modalen Komponente. Wenn ein Nutzer, der nur mit der Tastatur arbeitet, ein modales Fenster sieht, zwischen den umsetzbaren Elementen des modalen Fensters zu wechseln, darf niemals außerhalb des modalen Fensters zugelassen werden, ohne es ausdrücklich zu schließen. JavaScript ist unerlässlich, um diesen Fokus richtig zu erfassen.

Seitenebene

Der Fokus muss auch dann beibehalten werden, wenn ein Nutzer von einer Seite zur nächsten wechselt. Dies ist Dies gilt insbesondere für SPAs, wo keine Browseraktualisierung, und der gesamte Inhalt ändert sich dynamisch. Jedes Mal, wenn ein Nutzer auf einen Link klickt, zu einer anderen Seite innerhalb Ihrer Anwendung wechseln, wird der Fokus entweder oder woanders platziert werden könnte.

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

Dafür gibt es mehrere Methoden:

• Setzen Sie den Fokus mit einer aria-live-Ankündigung auf den Hauptcontainer.
• Platzieren Sie den Fokus wieder auf einem Link, um zum Hauptinhalt zu springen.
• Verschieben Sie den Fokus auf die oberste Überschrift der neuen Seite.

Wo Sie den Schwerpunkt legen, hängt vom verwendeten Framework ab und die Inhalte, die Sie Ihren Nutzern bereitstellen möchten. Es kann sich um Kontext- oder aktionsabhängig ist.

Staatliche Verwaltung

Ein weiterer Bereich, in dem JavaScript für die Barrierefreiheit entscheidend ist, oder wenn der aktuelle visuelle Zustand einer Komponente oder einer Seite an Nutzer mit eingeschränktem Sehvermögen, blinde oder taublinde Hilfstechnologien übermittelt wird.

Häufig wird der Status einer Komponente oder Seite über ARIA-Attribute wie im ARIA- und HTML-Modul vorgestellt. Sehen wir uns einige der häufigsten Arten von ARIA-Attributen an, die den Status eines Elements zu verwalten.

Komponentenebene

Je nach dem Seiteninhalt und den Informationen, die die Nutzer benötigen, Viele ARIA-Bundesstaaten bei der Weiterleitung von Informationen zu einer Komponente an die Nutzenden.

Beispielsweise können Sie ein aria-expanded um dem Nutzer mitzuteilen, ob ein Dropdown-Menü oder eine Liste maximiert oder minimiert.

Oder Sie verwenden aria-pressed. um anzuzeigen, dass eine Schaltfläche gedrückt wurde.

Es ist wichtig, bei der Anwendung von ARIA-Attributen selektiv vorzugehen. Denken Sie an die User Flow zu verstehen, um zu verstehen, welche wichtigen Informationen den Nutzenden vermittelt werden sollten.

Seitenebene

Entwickler nutzen oft einen visuell verborgenen Bereich, ARIA-Live-Region um Änderungen auf dem Bildschirm und Warnmeldungen für Hilfstechnologien anzukündigen (AT)-Nutzer. Dieser Bereich kann mit JavaScript kombiniert werden, um Nutzer über dynamische Änderungen an der Seite vornehmen, ohne dass die gesamte Seite neu geladen werden muss.

In der Vergangenheit hatte JavaScript Schwierigkeiten, Inhalte in aria-live und Alarmbereiche aufgrund ihrer Dynamik angezeigt werden. Asynchrones Hinzufügen von Inhalten zu Das DOM erschwert es AT, die Region zu erfassen und bekannt zu geben. Damit der Inhalt richtig gelesen werden kann, muss sich die Live- oder Alarmregion in der DOM beim Laden abruft, kann der Text dynamisch ausgetauscht werden.

Wenn ihr ein JavaScript-Framework verwendet, haben fast alle „Livesprecher“ das Ihnen die Arbeit abnimmt und zugänglich zu machen. Sie müssen keine Live-Region erstellen und die im vorherigen Abschnitt beschrieben wurden.

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

• React: react-aria-live und React-A11y-Ansager
• Winkelig: LiveAnnouncer
• Vue: vue-a11y-utils

Modernes JavaScript ist eine leistungsstarke Sprache, mit der Webentwickler robuste Webanwendungen. Dies führt manchmal zu Over-Engineering Erweiterung und nicht zugängliche Muster. Indem Sie sich an die JavaScript-Muster und -Tipps In diesem Modul erfahren Sie, wie Sie Ihre Apps für alle Nutzer zugänglicher machen.

Wissen testen

Testen Sie Ihr JavaScript-Wissen