Roll Dokumentstruktur

`list`

Markerar ett element som en lista med poster. Använd <ul>, <ol> eller <dl> i första hand — det inbyggda elementet hanterar rollen, antalet poster och den visuella markeringen. Använd role="list" bara när CSS list-style: none utlöser Safaris borttagning av listrollen.

När du ska använda

Använd <ul> för osorterade listor, <ol> för sorterade listor och <dl> för beskrivningslistor. Varje element exponeras automatiskt som en lista med korrekt antal poster.

Det enda praktiska skälet att explicit sätta role="list" på en <ul> är Safaris beteende för borttagning av listrollen: när en <ul> har list-style: none tillämpat tar WebKit bort listrollen från tillgänglighetsträdet, under antagandet att det bara är en visuell lista. Att explicit sätta role="list" åsidosätter den heuristiken.

Blanda INTE ihop role="list" med role="listbox". En lista är statiskt innehåll; en listbox är en interaktiv valwidget. Att blanda ihop dem gör att skärmläsare förväntar sig urvalssemantik som inte finns.

Vanliga fel

role="list" på <div>-behållare som innehåller <div>-”poster” utan role="listitem". Listrollen kräver listitem-barn för att exponeras; utan dem är antalet fel.
Att använda role="list" för en navigeringsmeny i stället för <nav> med <ul>. Navigeringslandmärket är mer användbart.
Att lägga till role="list" på en <ul> som inte har list-style: none. Redundant; den inbyggda rollen finns redan.
Att använda role="list" när role="listbox" var avsikten.
Att omsluta <li>-element i ett icke-listparent (en <div>) — listposterna blir föräldralösa.

Exempel

<!-- Rekommenderat -->
<ul>
  <li>Screen reader</li>
  <li>Switch control</li>
  <li>Voice control</li>
</ul>

<!-- Åsidosätt Safaris borttagning av listrollen -->
<ul role="list" style="list-style: none;">
  <li role="listitem">Screen reader</li>
  <li role="listitem">Switch control</li>
</ul>