Componentes · Accesibilidad

Componentes accesibles

Botones, iconos, toggles, alertas, modales y tabs con roles claros, foco visible y patrones que se adaptan bien a tendencias visuales sin romper AA.

Qué cubren estos patrones

La idea es que puedas copiar la estructura de cada componente y adaptarla al estilo visual que quieras (glass, neobrutalismo, corporativo…) sin perder accesibilidad.

Un componente accesible combina tres cosas: rol correcto (lo que es), comportamiento predecible (cómo se usa con ratón y teclado) y feedback visible (foco, estado y mensaje).

Aquí tienes ejemplos mínimos de botones, icon buttons, toggles, alertas, modales y tabs, pensados para que puedas aplicarlos sobre cualquier estética: glassmorphism, minimal, neobrutalista o corporativa.

Botones e icon buttons

Siempre con <button> o <a role="button">, foco visible y texto comprensible. El icono nunca va solo.

Patrón base de botón

El botón principal debe dejar claro qué ocurrirá al pulsarlo. El texto es la acción: “Guardar cambios”, “Enviar formulario”, “Descargar informe”.

  • Usa <button> para acciones y <a> para enlaces reales.
  • En icon buttons, añade siempre aria-label descriptivo.
  • Evita textos vagos como “Ok” o “Aquí”.

Toggles y switches

Mejor implementados como checkbox con estilo visual de interruptor. Estados claros: activado / desactivado.

Switch accesible

El componente se basa en un <input type="checkbox"> oculto visualmente, pero presente para lector de pantalla y teclado. El track y el thumb son solo presentación.

  • Se activa con clic, barra espaciadora y Enter.
  • Usa textos que indiquen el efecto: “Recibir avisos por email”.
  • Si el contexto no es evidente, añade aria-describedby.

Alertas y mensajes de estado

Sirven para avisar de errores, éxitos o información importante. No son decoración: comunican algo concreto al usuario.

Alertas informativa y de error

Cambios guardados

Tu configuración se ha actualizado correctamente.

  • role="status" para avisos neutrales o de éxito.
  • role="alert" para errores que requieren atención inmediata.
  • Usa color + texto, no solo color.

Se usan con moderación. Al mostrarse, el foco entra en el modal y vuelve al disparador al cerrarse.

Estructura mínima de un modal

Necesita título, texto, botones y un cierre claro. Aunque aquí se muestra de forma estática, la estructura es válida como base.

Tienes cambios sin guardar en este formulario. Si sales ahora, se perderán.

  • Asocia el título con aria-labelledby en el contenedor del modal.
  • Al abrirlo, mueve el foco al primer elemento relevante.
  • Permite cerrar con el botón, clic fuera (si procede) y tecla Esc.

Tabs y paneles de contenido

Útiles para agrupar ajustes o secciones relacionadas. Con teclado se navega por las pestañas y se muestra el panel activo.

Tabs accesibles (estructura base)

Este ejemplo es estático, pero muestra cómo organizar roles y relaciones. El tab activo lleva aria-selected="true" y el panel indica con aria-labelledby qué pestaña lo controla.

Panel activo de ejemplo. Aquí irían los ajustes generales: nombre, email, idioma y otras preferencias básicas.

  • Las pestañas comparten role="tab" dentro de un contenedor con role="tablist".
  • Cada panel tiene role="tabpanel" y referencia la pestaña con aria-labelledby.
  • Con teclado se navega con flechas y se activa con Enter o espacio.