ARIA: list Rolle
Die ARIA list
-Rolle kann verwendet werden, um eine Liste von Elementen zu identifizieren. Sie wird normalerweise in Verbindung mit der listitem
-Rolle verwendet, die ein Listenelement innerhalb der Liste identifiziert.
<div role="list">
<div role="listitem">List item 1</div>
<div role="listitem">List item 2</div>
<div role="listitem">List item 3</div>
</div>
Beschreibung
Jeder Inhalt, der aus einem äußeren Container mit einer Liste von Elementen darin besteht, kann für unterstützende Technologien mit den Containern list
und listitem
identifiziert werden. Eine list
kann nur null oder mehr listitem
-Kinder enthalten.
Es gibt keine festen Regeln, welche Elemente Sie zum Markieren der Liste und der Listenelemente verwenden sollten, aber Sie sollten sicherstellen, dass die Listenelemente im Kontext einer Liste sinnvoll sind, z.B. eine Einkaufsliste, Rezeptschritte, Wegbeschreibungen.
Hinweis: Best Practices legen nahe, die entsprechenden semantischen HTML-Elemente anstelle von ARIA-Rollen zu verwenden, um Listen und Listenelemente zu markieren — <ul>
, <ol>
und <li>
. Siehe Best Practices für ein vollständiges Beispiel.
Zugehörige WAI-ARIA-Rollen, -Zustände und -Eigenschaften
listitem
Rolle-
Ein einzelnes Element in einer Liste. Elemente mit der Rolle
listitem
können nur in einem Element mit der Rollelist
gefunden werden.
Best Practices
Verwenden Sie role="list"
und role="listitem"
nur, wenn es unbedingt nötig ist – zum Beispiel, wenn Sie keine Kontrolle über Ihr HTML haben, aber dennoch die Barrierefreiheit mit JavaScript nachträglich dynamisch verbessern können.
Im Gegensatz zu den HTML-Elementen <ol>
und <ul>
unterscheidet die ARIA list
-Rolle nicht zwischen geordneten und ungeordneten Listen. Wenn möglich, sollten Sie die entsprechenden semantischen HTML-Elemente verwenden, um eine Liste (<ol>
und <ul>
) und Listenelemente (<li>
) zu markieren. Zum Beispiel sollte unser obiges Beispiel wie folgt umgeschrieben werden:
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
oder verwenden Sie eine geordnete Liste, wenn die Reihenfolge der Listenelemente wichtig ist:
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
Hinweis: Die ARIA list
/ listitem
Rollen unterscheiden nicht zwischen geordneten und ungeordneten Listen.
Nebenbei bemerkt, beachten Sie, dass wenn Sie die semantischen HTML-Elemente von <ol>
oder <ul>
verwenden und eine Rolle presentation
anwenden, jedes <li>
-Kindelement die presentation
-Rolle erbt, da ARIA verlangt, dass die listitem
-Elemente das übergeordnete list
-Element haben. So werden die <li>
-Elemente nicht an unterstützende Technologien weitergegeben, aber Elemente innerhalb dieser <li>
-Elemente, einschließlich verschachtelter Listen, sind für unterstützende Technologien sichtbar.
Spezifikationen
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA) # list |
Siehe auch
- Das
<ul>
-Element - Das
<ol>
-Element - Das
<li>
-Element - ARIA: listitem Rolle
- ARIA Lists Beispiele — von Scott O'Hara
- Accessibility Object Model
- ARIA in HTML