Rolle Dokumentstruktur

`list`

Kennzeichnet ein Element als Liste von Einträgen. Zuerst sollte <ul>, <ol> oder <dl> verwendet werden — native Elemente liefern Rolle, Anzahl und visuelles Aufzählungszeichen automatisch. role="list" kommt nur dann in Betracht, wenn CSS list-style: none Safaris Heuristik zur Entfernung der Listenrolle auslöst.

Verwendung

Für ungeordnete Listen empfiehlt sich <ul>, für geordnete Listen <ol> und für Beschreibungslisten <dl>. Jedes dieser Elemente wird automatisch als Liste mit korrekter Eintragsanzahl im Accessibility-Tree abgebildet.

Der einzige praktische Grund, role="list" explizit auf einem <ul> zu setzen, ist Safaris Verhalten zur „Entfernung der Listenrolle“: Wird auf ein <ul> list-style: none angewendet, entfernt WebKit die Listenrolle aus dem Accessibility-Tree in der Annahme, es handle sich um eine rein visuell gestaltete Liste. Das explizite Setzen von role="list" überschreibt diese Heuristik.

role="list" darf nicht mit role="listbox" verwechselt werden. Eine Liste ist statischer Inhalt; eine Listbox ist ein interaktives Auswahl-Widget. Eine Verwechslung führt dazu, dass Screenreader Auswahlsemantik erwarten, die nicht vorhanden ist.

Häufige Fehler

role="list" auf <div>-Containern, die <div>-„Einträge“ ohne role="listitem" enthalten. Die Listenrolle setzt voraus, dass Listeneinträge im Accessibility-Tree sichtbar sind; fehlen sie, ist die Anzahl falsch.
role="list" für ein Navigationsmenü verwenden, statt <nav> mit <ul>. Das Navigations-Landmark ist sinnvoller.
role="list" zu einem <ul> hinzufügen, das kein list-style: none hat. Das ist redundant; die native Rolle ist bereits vorhanden.
role="list" verwenden, wenn eigentlich role="listbox" gemeint war.
<li>-Elemente in einem nicht-Listen-Elternelement (einem <div>) verschachteln — die Listeneinträge werden zu verwaisten Knoten.

Beispiel

<!-- Bevorzugt -->
<ul>
  <li>Screenreader</li>
  <li>Schaltersteuerung</li>
  <li>Sprachsteuerung</li>
</ul>

<!-- Safaris Entfernung der Listenrolle überschreiben -->
<ul role="list" style="list-style: none;">
  <li role="listitem">Screenreader</li>
  <li role="listitem">Schaltersteuerung</li>
</ul>