Rol Documentstructuur

`list`

Markeert een element als een lijst van items. Gebruik bij voorkeur <ul>, <ol> of <dl> — het native element regelt de rol, het aantal en de visuele markering. Gebruik role="list" alleen als CSS list-style: none Safari's heuristiek voor het verwijderen van de lijstrol activeert.

Wanneer te gebruiken

Gebruik <ul> voor ongeordende lijsten, <ol> voor geordende lijsten en <dl> voor beschrijvingslijsten. Elk element wordt automatisch blootgesteld als een lijst met een correct aantal items.

De enige praktische reden om role="list" expliciet in te stellen op een <ul> is het gedrag van Safari voor “verwijdering van lijstrol”: wanneer op een <ul> list-style: none is toegepast, verwijdert WebKit de lijstrol uit de toegankelijkheidsstructuur, omdat het ervan uitgaat dat de lijst alleen voor styling wordt gebruikt. Door expliciet role="list" in te stellen, wordt die heuristiek overschreven.

Verwar role="list" NIET met role="listbox". Een lijst is statische inhoud; een listbox is een interactieve selectiewidget. Door ze door elkaar te halen, verwachten schermlezers selectiesemantiek die niet aanwezig is.

Veelvoorkomende fouten

role="list" op <div>-containers met <div>-”items” zonder role="listitem". De lijstrol vereist dat listitem-kinderen worden blootgesteld; zonder hen klopt het aantal niet.
role="list" gebruiken voor een navigatiemenu in plaats van <nav> met <ul>. Het navigatie-landmark is nuttiger.
role="list" toevoegen aan een <ul> zonder list-style: none. Redundant; de native rol is al aanwezig.
role="list" gebruiken wanneer role="listbox" de bedoeling was.
<li>-elementen omhullen in een niet-lijst-ouder (een <div>) — de listitems worden wezen.

Voorbeeld

<!-- Aanbevolen -->
<ul>
  <li>Schermlezer</li>
  <li>Schakelaarbesturing</li>
  <li>Stembesturing</li>
</ul>

<!-- Overschrijf Safari's verwijdering van lijstrol -->
<ul role="list" style="list-style: none;">
  <li role="listitem">Schermlezer</li>
  <li role="listitem">Schakelaarbesturing</li>
</ul>