What is ARIA?

Was ist ARIA?

ARIA ist ein Akronym für „Accessible Rich Internet Applications“. Es handelt sich um eine Reihe von HTML-Attributen , die es Entwicklern von Webanwendungen ermöglichen, zugängliche, benutzerdefinierte Komponenten oder Interaktionsmuster unter Verwendung von nicht-semantischen oder nicht-nativen HTML-Elementen zu erstellen. Hilfstechnologien nutzen diese Attribute und kündigen ihre Präsenz Benutzern an, die wiederum in der Lage sind, die Komponenten zu verstehen und mit ihnen zu interagieren.

Mit anderen Worten, ARIA fungiert als Brücke zwischen nicht-nativen HTML-Elementen und unterstützenden Technologien, indem es semantische Bedeutung für benutzerdefinierte Komponenten generiert. ARIA hilft bei der Beantwortung der Frage „ Was ist das Ding und was macht es? “ für benutzerdefinierte Komponenten.

Wie erreicht ARIA dies?

Der ARIA-Satz von HTML-Attributen wird auf verschiedene Elemente angewendet. Wenn ein Screenreader-Benutzer von hier aus mit einem Element in Kontakt kommt, das ein oder mehrere aria-* -Attribute aufweist, erkennen Screenreader die bereitgestellten Attribute und ihre Werte und sagen diese Informationen laut aus.

ARIA kann unterteilt werden in:

  • Rollen – definieren, was ein Element ist oder tut
  • Eigenschaften — Drücken Sie Eigenschaften oder Beziehungen eines Elements aus
  • Zustände — Definieren Sie die aktuellen Bedingungen oder Datenwerte, die dem Element zugeordnet sind

Werfen wir einen Blick auf einige der verfügbaren Attribute:

Attribut Zweck Beispiel
role Wird verwendet, um die grundlegende semantische Bedeutung eines Elements hinzuzufügen oder zu ändern. <div role="button"></div>
aria-label Fügt einem Element einen barrierefreien Namen hinzu. <div role="button" aria-label="Fake button"></div>
aria-disabled Kündigt das Element in einem "deaktivierten" Zustand an . <div role="button" aria-label="Fake button" aria-disabled="true"></div>

Weitere Informationen finden Sie im Dokument Accessible Rich Internet Applications (WAI-ARIA) 1.1 .

Was ARIA nicht tut

Es ist wichtig zu beachten, was ARIA tut (oben) und was es nicht tut.

Wenn Sie aria-* -Attribute, Rollen und Zustandseigenschaften auf ein HTML-Element anwenden, ermöglicht dies nicht automatisch, dass das Element über die Tastatur fokussierbar ist oder die gesamte erwartete Tastaturinteraktivität hinzufügt. Das sind Dinge, die Sie als Entwickler selbst umsetzen müssen.

Im vorherigen Beispiel würde das div -Element mit seinem role="button" -Attribut das Element als "button" ankündigen, aber dadurch wird die div -Tastatur nicht fokussierbar. Es bietet auch nicht die erwartete Tastaturinteraktion über die Enter oder Space . Auch diese Funktionalität soll nachträglich hinzugefügt werden.

Benutzerdefinierte Komponenten

Wie bereits erwähnt, kann ARIA benutzerdefinierten Komponenten semantische Bedeutung hinzufügen. Schauen wir uns an, wie man ein Kontrollkästchen mit nativem HTML und dann wieder mit ARIA erstellt.

HTML

Das HTML-Kontrollkästchen muss Folgendes enthalten:

  • Ein label -Element, das seinen Zweck erklärt
  • Das input zusammen mit den entsprechenden Attributen, um zu vermitteln, was es ist
  • Ein klar definierter Zustand, „markiert“ oder „nicht markiert“

Typischer HTML-Code für ein Kontrollkästchen sieht folgendermaßen aus:

<label for="apple-checkbox"> <input type="checkbox" id="apple-checkbox" name="apple"> Apple </label>

Wenn jemand zu diesem Kontrollkästchen navigiert, würde ein Screenreader ankündigen,

"Apple, Kontrollkästchen, nicht aktiviert."

Auf diese Weise würde der Benutzer wissen, dass er sich derzeit auf ein Kontrollkästchen-Element konzentriert, dessen Textbezeichnung „Apple“ lautet und der aktuelle Status nicht aktiviert ist. Sie können entweder mit dem Kontrollkästchen interagieren (durch Drücken der Space ) oder weitergehen.

ARIE

Lassen Sie uns jetzt dasselbe Kontrollkästchen mit div -Elementen und ARIA-Attributen neu erstellen. Das Kontrollkästchen muss Folgendes enthalten:

  • Ein zugänglicher Name oder ein label , das seinen Zweck erklärt
  • Eine role , um zu vermitteln, was sie ist
  • Ein klar definierter Zustand, „markiert“ oder „nicht markiert“

Sehen wir uns den HTML-Code an, um dies zu erreichen:

<div class="checkbox__wrapper"> <div class="checkbox__checkbox" role="checkbox" tabindex="0" aria-checked="false" aria-labelledby="apple-checkbox" ></div> <div class="checkbox__label" id="apple-checkbox">Apple</div> </div>

Lassen Sie uns hier etwas tiefer in den Code eintauchen.

  • Das div mit class="checkbox__checkbox" würde das visuelle Kontrollkästchen darstellen, normalerweise mit einem SVG-Symbol oder CSS.
  • Dieses div enthält auch role="checkbox" . Dies ist das Attribut, das Screenreader benötigen, um diese Komponente als "Kontrollkästchen" anzukündigen. Ohne sie würde es als generischer Container erscheinen.
  • Das div enthält das tabindex Attribut, dessen Wert auf 0 gesetzt ist. Dadurch können nicht fokussierbare Elemente den Tastaturfokus erhalten, wenn der Benutzer zu dem Element navigiert.
  • Das Attribut aria-checked ist vorhanden, das den aktuellen Zustand des Kontrollkästchens übermittelt. Bei Interaktion müsste der Wert dieses Attributs von false auf true .
  • Schließlich hat das div das Attribut aria-labelledby , dessen Wert auf die id des Elements gesetzt ist, das die Textbezeichnung enthält. Wenn dieses div den Tastaturfokus erhält, stellt das Attribut aria-labelledby die Verbindung mit dem Element her, das seinem Wert entspricht, und fügt den Inhalt des übereinstimmenden Elements zur Ansage des Kontrollkästchens hinzu.

Wie Sie vielleicht erkennen können, ist die Verwendung der ARIA-Methode um einiges mehr Code zu schreiben und zu warten. Und denken Sie daran, dass dies nur der HTML-Code ist, der zum Erstellen der ARIA-Version eines Kontrollkästchens benötigt wird. Es gibt auch den CSS-Code, um das Kontrollkästchen visuell zu gestalten, sowie das JavaScript, um das Space Tastendruck-Ereignis zu verarbeiten, um den aria-checked Wert umzuschalten.

Aus diesem Grund wird empfohlen, native HTML-Elemente zu verwenden. Auf diese Weise muss weniger Code geschrieben und gewartet werden, sowie die integrierte Tastaturunterstützung und die semantische Bedeutung, die mit jedem nativen Element geliefert wird.

Nicht standardmäßige Komponenten

ARIA kann auch verwendet werden, um allgemeine "Desktop"-Schnittstellenmuster zu erstellen, die im Web oder in der Browserumgebung nicht nativ sind.

Beispielsweise können komplexe Desktop-Anwendungen eine Baumansicht oder eine Registerkarten-Oberfläche als Mittel zum Navigieren von Inhalten innerhalb der App aufweisen. Zum jetzigen Zeitpunkt ist in HTML kein tree oder tab verfügbar. Wenn Ihr Web-App-Design also eine solche Komponente erfordert, kann eine erstellt und implementiert werden, indem eine Kombination aus HTML und ARIA verwendet wird, um die Bedeutung und Struktur des Musters zu vermitteln, und dann CSS und JavaScript hinzugefügt werden, um das erforderliche Styling und die erforderliche Funktionalität anzuwenden.

Andere Beispielmuster umfassen:

Diese Muster sind bezüglich ihrer Implementierung und erwarteten Interaktionen im WAI-ARIA Authoring Practices Guide dokumentiert, einschließlich:

  • Geschriebene Beschreibungen, die die erwarteten Tastatureingaben erklären, die man verwenden könnte, um mit benutzerdefinierten Komponenten zu interagieren
  • Listet die entsprechenden ARIA-Attribute (Rollen, Zustände und Eigenschaften) auf, die mit jeder Komponente verwendet werden sollen, um die Bedeutung und den Zweck der Komponente zu vermitteln
  • Bietet voll funktionsfähige Beispiele zum Lernen und Testen mit Hilfstechnologien

Wenn Sie eine benutzerdefinierte Komponente erstellen, beziehen Sie sich auf diesen Leitfaden, um sicherzustellen, dass das, was Sie produzieren, für ein möglichst breites Publikum zugänglich und verwendbar ist.

Komponenten der Live-Region

Eine weitere einzigartige Funktion, die ARIA hinzufügt, ist die Möglichkeit, eine Live-Region zu erstellen. Mit einer Live-Region können Sie gegebenenfalls eine hörbare Nachricht an Benutzer von Bildschirmleseprogrammen senden, um sie über eine Statusänderung bei einer Interaktion oder eine zeitgesteuerte Nachricht zu informieren.

 <div role="status" aria-live="polite">5 minutes remaining.</div>

Zum Beispiel:

  • Beim Senden oder Löschen einer E-Mail aus einer Liste wäre es ideal, den Benutzer darüber zu informieren, wann die Nachricht entweder gesendet oder aus seinem Posteingang entfernt wurde.
  • Wenn Sie einen Artikel zu einem Warenkorb hinzufügen, machen Sie den Benutzer auf das erfolgreiche Hinzufügen aufmerksam.
  • Wenn jemand nur eine begrenzte Zeit hat, um eine Aufgabe zu erledigen, geben Sie die verbleibende Zeit in halbjährlichen Abständen bekannt.
  • Wenn sich eine App derzeit in einem Ladezustand befindet und eine Ladeanimation anzeigt, schließen Sie auch Screenreader-Benutzer ein, die sich dieses Kontexts bewusst sind.

Der Zweck einer Live-Region besteht darin, denjenigen, die die von uns erstellten Benutzeroberflächen nicht sehen können, ein gleichwertiges Benutzererlebnis zu bieten und sicherzustellen, dass sie auf den aktuellen Kontext aufmerksam gemacht werden.

Die erste Regel der ARIA-Nutzung

Es ist wichtig, auf die 5 Regeln zur Verwendung von ARIA hinzuweisen. Dies sind Regeln, die die W3 und die WAI-Gruppe erstellt haben, um eine übermäßige Nutzung oder einen Missbrauch von ARIA zu vermeiden. Es ist möglich, dass aria-* Attribute falsch verwendet werden und ein schlechtes Benutzererlebnis schaffen.

Lassen Sie uns die erste Regel der ARIA-Nutzung hervorheben:

„Wenn Sie ein natives HTML-Element oder -Attribut mit der Semantik und dem Verhalten verwenden können, die Sie bereits integriert haben, anstatt ein Element umzufunktionieren und eine ARIA-Rolle, einen Status oder eine Eigenschaft hinzuzufügen, um es zugänglich zu machen, dann tun Sie dies.“

Mit anderen Worten, verwenden Sie ARIA nicht, wenn Sie es vermeiden können. Verwenden Sie stattdessen natives HTML.

Ressourcen:

Zurück zum Blog