Tabs y accordion accesibles

Diseño e implementación de patrones de pestañas y acordeones con navegación de teclado consistente.

¿Cuánto sabes de Accesibilidad Web?

📘 Teoría

Claves teóricas

Diferencias y reglas para construir tabs y acordeones robustos.

Tabs: navegación horizontal

Usa `role=tablist`, `role=tab` y `role=tabpanel` con asociación por id.

Accordion: secciones expandibles

Controla cada panel con botón y `aria-expanded` sincronizado.

Teclado en tabs

Flechas para moverse entre tabs, Enter/Espacio para activar.

Teclado en accordion

Tab para navegar entre encabezados y controles internos del panel abierto.

Estado claro

Debe verse y anunciarse qué panel está activo/expandido.

Error típico

Cambiar contenido visual sin actualizar `aria-selected` o `aria-expanded`.

Aplicación en proyectos reales

Cómo montar componentes compartidos sin duplicar lógica accesible.

Implementa primero comportamiento de teclado y estado; luego estilo visual.

Separa lógica del patrón (roles/estados) de contenido para reusar en distintas vistas.

Valida en casos con mucho contenido y paneles dinámicos cargados por API.

Crea utilidades para sincronizar atributos ARIA automáticamente.
Evita ocultar panel activo con CSS sin actualizar estado semántico.
Define pruebas unitarias para cambios de foco y selección.
Documenta API del componente para evitar mal uso en el equipo.

Patrón de código

Estructura mínima de tabs con relación explícita entre control y panel.

Tabs con roles ARIA

<div role="tablist" aria-label="Secciones">
  <button id="tab-resumen" role="tab" aria-selected="true" aria-controls="panel-resumen">Resumen</button>
  <button id="tab-detalle" role="tab" aria-selected="false" aria-controls="panel-detalle">Detalle</button>
</div>
<section id="panel-resumen" role="tabpanel" aria-labelledby="tab-resumen">Contenido resumen</section>