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 dazu dient, ein Listenelement innerhalb der Liste zu identifizieren.

html
<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 besteht, kann mit den list- und listitem-Containern identifiziert werden, um unterstützende Technologien zu unterstützen. Eine list kann nur Null oder mehr listitem-Kinder enthalten.

Es gibt keine festen Regeln darüber, welche Elemente Sie verwenden sollten, um die Liste und Listenelemente zu markieren, aber Sie sollten sicherstellen, dass die Listenelemente im Kontext einer Liste sinnvoll sind, z.B. eine Einkaufsliste, Rezeptschritte, Wegbeschreibungen.

Hinweis: Best Practices empfehlen, die geeigneten semantischen HTML-Elemente statt 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 Rolle list gefunden werden.

Best Practices

Verwenden Sie role="list" und role="listitem" nur, wenn es unbedingt notwendig ist — zum Beispiel, wenn Sie keine Kontrolle über Ihr HTML haben, aber die Möglichkeit besteht, die Zugänglichkeit nachträglich dynamisch mit JavaScript zu verbessern.

Im Gegensatz zu den HTML-Elementen <ol> und <ul> unterscheidet die ARIA list-Rollen nicht zwischen geordneten und ungeordneten Listen. Wenn möglich, sollten Sie die geeigneten 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:

html
<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:

html
<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 <ol> oder <ul> verwenden und eine Rolle presentation anwenden, jedes Kind-<li>-Element die presentation-Rolle erbt, da ARIA erfordert, dass die listitem-Elemente das Eltern-list-Element haben. Daher sind die <li>-Elemente für unterstützende Technologien nicht sichtbar, aber innerhalb dieser <li>-Elemente enthaltene Elemente, einschließlich verschachtelter Listen, sind für unterstützende Technologien sichtbar.

Hinweis: Wenn Sie eine Liste von Elementen markieren, die als Registerkartenoberfläche fungieren soll, sollten Sie stattdessen die Rollen tab, tabpanel und tablist verwenden.

Spezifikationen

Specification
Accessible Rich Internet Applications (WAI-ARIA)
# list

Siehe auch