ARIA: listitem-Rolle

Die ARIA listitem-Rolle kann verwendet werden, um ein Element innerhalb einer Liste von Elementen zu identifizieren. Sie wird normalerweise in Verbindung mit der list-Rolle verwendet, die einen Listencontainer identifiziert.

html
<section role="list">
  <div role="listitem">List item 1</div>
  <div role="listitem">List item 2</div>
  <div role="listitem">List item 3</div>
</section>

Beschreibung

Jeder Inhalt, der aus einem äußeren Container mit einer Liste von Elementen besteht, kann für unterstützende Technologien mit den Containern list und listitem identifiziert werden.

Es gibt keine strengen Regeln, welche Elemente Sie zur Markierung der Liste und Listenelemente verwenden sollten, aber Sie sollten sicherstellen, dass die Listenelemente im Kontext einer Liste sinnvoll sind, z.B. eine Einkaufsliste, Rezeptschritte, Wegbeschreibungen.

Hinweis: Wenn möglich, sollten Sie die entsprechenden semantischen HTML-Elemente verwenden, um eine Liste und ihre 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

list

Eine Liste von Elementen. Elemente mit der Rolle list müssen ein oder mehrere Elemente mit der Rolle listitem als Kinder haben oder ein oder mehrere Elemente mit der Rolle group, die ein oder mehrere listitem-Elemente als Kinder haben.

group

Eine Sammlung verwandter Objekte, die auf Listenelemente beschränkt ist, wenn sie in einer Liste verschachtelt sind, und nicht wichtig genug sind, um ihren eigenen Platz im Inhaltsverzeichnis einer Seite zu haben.

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 Barrierefreiheit nachträglich mit JavaScript dynamisch verbessern können.

Wenn möglich, sollten Sie die entsprechenden semantischen HTML-Elemente verwenden, um eine Liste und ihre Listenelemente zu markieren — <ol>, <ul> und <li>. 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.

Hinweis: Das Stylen einer Liste mit list-style: none; in CSS entfernt die Listensemantik. Das Hinzufügen von role="listitem" stellt die Semantik wieder her.

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

Spezifikationen

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

Siehe auch