list

Cuándo utilizarlo

Se debe usar <ul> para listas no ordenadas, <ol> para listas ordenadas y <dl> para listas de descripción. Cada uno de estos elementos expone automáticamente un rol de lista con el recuento correcto de ítems.

El único motivo práctico para establecer explícitamente role="list" en un <ul> es el comportamiento de «eliminación del rol de lista» de Safari: cuando se aplica list-style: none a un <ul>, WebKit elimina el rol de lista del árbol de accesibilidad bajo el supuesto de que es una lista puramente decorativa. Establecer explícitamente role="list" anula esa heurística.

No se debe confundir role="list" con role="listbox". Una lista es contenido estático; un listbox es un widget de selección interactivo. Mezclarlos induce a los lectores de pantalla a esperar una semántica de selección que no existe.

Errores frecuentes

• role="list" en contenedores <div> que contienen «ítems» <div> sin role="listitem". El rol de lista requiere que los hijos con rol listitem sean expuestos; sin ellos, el recuento es incorrecto.
• Usar role="list" para un menú de navegación en lugar de <nav> con <ul>. El landmark de navegación es más útil.
• Añadir role="list" a un <ul> que no tiene list-style: none. Es redundante; el rol nativo ya está presente.
• Usar role="list" cuando lo que se necesitaba era role="listbox".
• Anidar elementos <li> dentro de un padre que no es una lista (un <div>): los ítems quedan huérfanos.

Ejemplo

<!-- Opción preferida -->
<ul>
  <li>Lector de pantalla</li>
  <li>Control por interruptor</li>
  <li>Control por voz</li>
</ul>

<!-- Anular la eliminación del rol de lista en Safari -->
<ul role="list" style="list-style: none;">
  <li role="listitem">Lector de pantalla</li>
  <li role="listitem">Control por interruptor</li>
</ul>