Einführung in ARIA

Einführung in ARIA und nicht native HTML-Semantik

Alice Boxhall

Dave Gash

Meggin Kearney

Bisher haben wir die Verwendung nativer HTML-Elemente empfohlen, da sie Ihnen mehr Konzentration, Tastaturunterstützung und eingebaute Semantik. Aber es kann auch vorkommen, das Layout und der native HTML-Code. Derzeit gibt es zum Beispiel Standardisiertes HTML-Element für ein sehr gängiges UI-Konstrukt, das Pop-up-Menü. Noch Gibt es ein HTML-Element, das eine semantische Eigenschaft wie damit Nutzende so schnell wie möglich darüber Bescheid wissen müssen.“

In dieser Lektion erfahren Sie dann, wie Sie eine Semantik ausdrücken, die HTML nicht kann. selbst auszudrücken.

Accessible Rich Internet Applications der Initiative für barrierefreie Internetnutzung Spezifikation (WAI-ARIA oder einfach ARIA) eignet sich gut für die Überbrückung von Bereichen mit Problemen mit der Barrierefreiheit, die nicht verwaltet werden können. mit nativem HTML-Code. Dabei können Sie Attribute angeben, die den wie ein Element in den Baum für Barrierefreiheit übersetzt wird. Sehen wir uns eine Beispiel.

Im folgenden Snippet wird ein Listenelement als eine Art benutzerdefiniertes Kontrollkästchen verwendet. Die CSS-Kästchen gibt dem Element die erforderlichen visuellen Eigenschaften an.

<li tabindex="0" class="checkbox" checked>
    Receive promotional offers
</li>

Dies funktioniert zwar gut für sehende Nutzende, ein Screenreader gibt jedoch keine Hinweise darauf. dass das Element ein Kontrollkästchen sein soll, sodass sehbehinderte Nutzer -Element vollständig.

Mithilfe von ARIA-Attributen können wir dem Element jedoch die fehlenden Informationen damit der Screenreader sie richtig interpretieren kann. Hier haben wir role und aria-checked-Attribute, um das Element explizit als Kästchen zu kennzeichnen, und , um anzugeben, dass es standardmäßig aktiviert ist. Der Listeneintrag wird nun Baumstruktur für Barrierefreiheit und ein Screenreader meldet dies korrekt als Kästchen.

<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
    Receive promotional offers
</li>

ARIA verändert und erweitert den standardmäßigen DOM-Zugriffsbaum.

Mit ARIA können wir die Zugänglichkeits- und Barrierefreiheitsfunktionen Baum für jedes Element auf der Seite. Dies ist das Einzige, was es ändert. ARIA Das inhärente Verhalten des Elements wird nicht verbessert. kann es nicht dazu kommen, fokussierbaren Element oder legen Sie Tastaturereignis-Listener fest. Das ist immer noch Teil unserer zu entwickeln.

Es ist wichtig zu verstehen, dass Standards nicht neu definiert werden müssen, Semantik. Unabhängig von der Verwendung kann ein Standard-HTML-<input type="checkbox"> -Element erfordert kein zusätzliches role="checkbox"-ARIA-Attribut, um richtig vorgelesen werden.

Es ist auch erwähnenswert, dass bestimmte HTML-Elemente Einschränkungen in Bezug darauf haben, welche ARIA- Rollen und Attributen verwendet werden. Auf ein Standardelement vom Typ <input type="text"> dürfen beispielsweise keine zusätzlichen Rollen/Attribute angewendet werden.

Weitere Informationen finden Sie in der Spezifikation „ARIA in HTML“. .

Sehen wir uns an, welche weiteren Funktionen ARIA bietet.

Was kann ARIA tun?

Wie Sie anhand des Kästchen-Beispiels gesehen haben, kann ARIA die Semantik der vorhandenen Elemente ändern oder Semantik zu Elementen hinzufügen, wenn keine native Semantik vorhanden ist. Es kann auch um semantische Muster auszudrücken, die es in HTML gar nicht gibt, z. B. ein Menü oder eine Tabulatortaste. . Häufig können wir mit ARIA Widget-Elemente erstellen, die nicht möglich wären, mit einfachem HTML-Code.

• ARIA kann beispielsweise zusätzlichen Label- und Beschreibungstext hinzufügen, der APIs von Hilfstechnologien ausgesetzt sind.
  

<button aria-label="screen reader only label"></button>

• ARIA kann semantische Beziehungen zwischen Elementen ausdrücken, die die Standardverbindung über-/untergeordnet, zum Beispiel eine benutzerdefinierte Bildlaufleiste, mit der ein in einer bestimmten Region.

    <div role="scrollbar" aria-controls="main"></div>
    <div id="main">
    . . .
    </div>

• Und ARIA kann Teile der Seite aktivieren, sodass sie sofort über Hilfstechnologien nutzen, wenn sie sich ändern.

    <div aria-live="polite">
      <span>GOOG: $400</span>
    </div>

Einer der Kernaspekte des ARIA-Systems ist die Sammlung von Rollen. Eine Rolle im Hinblick auf die Barrierefreiheit ist eine Abkürzung für eine bestimmte Benutzeroberfläche Muster zu ändern. ARIA bietet ein Vokabular für Muster, das wir über die role verwenden können in einem beliebigen HTML-Element.

Bei der Anwendung von role="checkbox" im vorherigen Beispiel Hilfstechnologien, dass das Element dem Kästchen folgen soll Muster zu ändern. Das wird garantiert, dass der Status „geprüft“ lautet (entweder „aktiviert“ oder aktiviert ist) und dass sich der Status mit der Maus oder Leertaste ein- und ausblenden lässt, wie bei einem standardmäßigen HTML-Kontrollkästchen.

Da Tastaturinteraktionen im Screenreader so hervorgehoben sind, ist es sehr wichtig, dass bei der Erstellung eines benutzerdefinierten Widgets Das Attribut „role“ wird immer an der gleichen Stelle angewendet wie das Attribut „tabindex“ Attribut; werden Tastaturereignisse richtig platziert und Der Fokus landet auf einem Element, dessen Rolle präzise vermittelt wird.

In der ARIA-Spezifikation wird Folgendes beschrieben: Taxonomie der möglichen Werte für das Attribut role und die zugehörige ARIA Attribute, die in Verbindung mit diesen Rollen verwendet werden können. Das ist das Beste Quelle für definitive Informationen zur Funktionsweise der ARIA-Rollen und -Attribute und wie sie von Browsern und Hilfstechnologien.

Die Spezifikationen sind jedoch sehr kompakt. ein verständlicherer Ausgangspunkt ist die ARIA Dokument mit Authoring-Practices , in dem Best Practices für die Verwendung der verfügbaren ARIA-Rollen und Eigenschaften.

ARIA bietet auch Orientierungspunkte, die die in HTML5 verfügbaren Optionen erweitern. Weitere Informationen finden Sie unter das Design der Funktion für Sehenswürdigkeiten Muster Spezifikation finden Sie weitere Informationen.