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 zur Identifizierung eines Listenkontextes dient.

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

Beliebiger Inhalt, der aus einem äußeren Container mit einer Liste von Elementen darin besteht, kann mithilfe der list und listitem Container assistiven Technologien zugänglich gemacht werden.

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

Hinweis: Wenn möglich, sollten Sie die entsprechenden semantischen HTML-Elemente verwenden, um eine Liste und deren Listenelemente auszuzeichnen — <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 Elemente mit der Rolle listitem als Kinder haben.

group

Eine Sammlung verwandter Objekte, begrenzt auf Listenelemente, 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 notwendig ist — zum Beispiel, wenn Sie keine Kontrolle über Ihr HTML haben, aber die Barrierefreiheit im Nachhinein dynamisch mit JavaScript verbessern können.

Wenn möglich, sollten Sie die entsprechenden semantischen HTML-Elemente verwenden, um eine Liste und Listenelemente auszuzeichnen — <ol>, <ul> und <li>. Unser obiges Beispiel sollte beispielsweise wie folgt umgeschrieben werden:

html
<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

oder nutzen Sie eine geordnete Liste, wenn die Reihenfolge der Listenelemente von Bedeutung 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 Styling einer Liste mit list-style: none; in CSS entfernt die Listensemantik. Durch das Hinzufügen von role="listitem" wird die Semantik wiederhergestellt.

Hinweis: Wenn Sie eine Liste von Elementen auszeichnen, die als Tab-Interface fungiert, sollten Sie stattdessen die Rollen tab, tabpanel und tablist verwenden.

Spezifikationen

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

Siehe auch