Rolle Dokumentstruktur

`list`

Markerer et element som en liste. Brug <ul>, <ol> eller <dl> — de native elementer håndterer rolle, antal og markering. Brug kun role="list" når CSS list-style: none udløser Safaris sletning af listerollen.

Hvornår brug det

Brug <ul> til uordnede lister, <ol> til ordnede lister og <dl> til beskrivelseslister. Hvert element eksponeres som en liste med korrekt antal elementer automatisk.

Den ene praktiske grund til eksplicit at sætte role="list" på en <ul> er Safaris “list role removal”-adfærd: når en <ul> har list-style: none anvendt, fjerner WebKit listerollen fra tilgængelighedstræet ud fra den antagelse, at det er en rent visuel liste. Eksplicit angivelse af role="list" tilsidesætter denne heuristik.

Forveksl IKKE role="list" med role="listbox". En liste er statisk indhold; en listbox er et interaktivt udvalgselement. Forveksling af dem fører til, at skærmlæsere forventer udvalgssemantik, der ikke er til stede.

Typiske fejl

role="list" på <div>-containere med <div>-”elementer” uden role="listitem". Listerollen kræver listitem-børn for at antallet vises korrekt.
Brug af role="list" til et navigationsmenu i stedet for <nav> med <ul>. Navigationslandmærket er mere nyttigt.
Tilføjelse af role="list" til en <ul> uden list-style: none. Overflødig; den native rolle er allerede til stede.
Brug af role="list" når role="listbox" var det tilsigtede.
Indpakkning af <li>-elementer i en ikke-liste-forælder (en <div>) — listelementerne bliver forældreløse.

Eksempel

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

<!-- Tilsidesæt Safaris fjernelse af listerollen -->
<ul role="list" style="list-style: none;">
  <li role="listitem">Screen reader</li>
  <li role="listitem">Switch control</li>
</ul>