tablist

Cuándo utilizarlo

Alrededor de la fila (o columna) de elementos role="tab" en una interfaz con pestañas. El tablist DEBE tener un nombre accesible mediante aria-label o aria-labelledby — sin él, un usuario de lector de pantalla que escucha «lista de pestañas» no puede identificar a cuál de los tablists de la página corresponde.

Las barras de pestañas verticales necesitan aria-orientation="vertical". El valor predeterminado es horizontal, por lo que el atributo puede omitirse en ese caso.

Si las «pestañas» enlazan realmente a otras URL, conviene utilizar <nav> con enlaces <a> — el patrón de cambio de URL al hacer clic no se corresponde con la semántica de tablist.

Contrato de teclado y foco

Según el patrón de pestañas APG:

• Tab desplaza el foco al interior del tablist y lo sitúa sobre la pestaña seleccionada; otro Tab mueve el foco FUERA, normalmente hacia el tabpanel activo.
• Las teclas de dirección Izquierda/Derecha mueven el foco entre pestañas (Arriba/Abajo en tablists verticales). El retorno al inicio es opcional, pero convencional.
• Inicio / Fin saltan a la primera / última pestaña.
• Activación: en el modo automático, las teclas de dirección tanto mueven el foco como seleccionan la pestaña. En el modo manual (recomendado cuando la activación es costosa), Espacio o Intro selecciona la pestaña enfocada.

El propio tablist no gestiona el foco — este recae sobre la pestaña, no sobre el contenedor tablist.

Errores habituales

• Tablist sin nombre accesible. Cuando hay varios tablists en una misma página, resultan indistinguibles entre sí.
• Todas las pestañas con tabindex="0". El patrón emplea un único punto de parada de teclado; solo la pestaña seleccionada tiene tabindex="0".
• Falta aria-orientation="vertical" en un tablist vertical — el lector de pantalla indica a los usuarios que utilicen Izquierda/Derecha cuando la disposición visual exige Arriba/Abajo.
• role="tablist" envolviendo enlaces (<a href="#section">) en lugar de botones. El desplazamiento de anclaje provoca un salto en la página y rompe el botón atrás.
• Tabpanel ocultado con display: none Y el atributo hidden simultáneamente, cuando basta con uno de los dos.

Ejemplo

<div role="tablist" aria-label="Project sections" aria-orientation="horizontal">
  <button role="tab" id="t-overview" aria-selected="true"  aria-controls="p-overview" tabindex="0">Overview</button>
  <button role="tab" id="t-files"    aria-selected="false" aria-controls="p-files"    tabindex="-1">Files</button>
  <button role="tab" id="t-team"     aria-selected="false" aria-controls="p-team"     tabindex="-1">Team</button>
</div>