Einführung in ARIA und nicht native HTML-Semantik
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.
![Die standardmäßige DOM-Barrierefreiheitsstruktur](https://web.dev/static/articles/semantics-aria/image/the-standard-dom-accessib-f1377436c8cbd.jpg?authuser=0&hl=de)
![Baumstruktur für erweiterte Barrierefreiheit von ARIA](https://web.dev/static/articles/semantics-aria/image/the-aria-augmented-access-a0705fd66fc51.jpg?authuser=0&hl=de)
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.
![Eine Liste aller verfügbaren ARIA-Rollen.](https://web.dev/static/articles/semantics-aria/image/a-list-all-available-ar-64bce9c9d6.jpg?authuser=0&hl=de)
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.