Skip to main content

Estados, interacción y accesibilidad

Un componente no existe en reposo​

Una interfaz no se usa en estado estático. Se usa interactuando.

Un componente real existe como un conjunto de estados:

  • Antes de la interacción
  • Durante la interacción
  • Después de la interacción
  • Cuando algo falla
  • Cuando no está disponible

Diseñar solo el estado “normal” equivale a diseñar solo una captura.

Una UI se evalúa cuando algo cambia, no cuando todo está quieto.

Estados como parte del diseño, no como añadidos​

Estados mínimos que todo componente interactivo debe contemplar:

  • default
  • hover
  • focus
  • active
  • disabled

Estos estados no son decorativos. Comunican:

  • Qué es interactivo
  • Qué está ocurriendo
  • Qué se puede hacer
  • Qué no se puede hacer

Error frecuente:

  • Añadir hover “porque queda bien”.
  • Eliminar focus “porque se ve feo”.
  • No diferenciar disabled de enabled.

Hover no es interacción universal​

hover funciona con ratón.

No funciona con:

  • Pantallas táctiles
  • Teclado
  • Lectores de pantalla

Por eso:

  • Hover nunca debe ser el único feedback.
  • Información crítica no puede depender de hover.
  • Hover debe reforzar, no revelar.

Si algo solo se entiende con hover, no es accesible.

Focus es un contrato de accesibilidad​

focus no es opcional.

Es la única forma de orientación para:

  • Navegación por teclado
  • Usuarios con movilidad reducida
  • Lectores de pantalla

Eliminar el focus rompe la interfaz para una parte real de los usuarios.

En Tailwind, el foco debe ser:

  • Visible
  • Coherente
  • Consistente entre componentes

Error común:

  • Quitar outline sin sustituirlo por nada.
  • Usar focus distinto en cada componente.

Estados activos y feedback inmediato​

El estado active y los estados de transición indican respuesta inmediata.

Sirven para:

  • Confirmar que la acción ha sido registrada
  • Reducir incertidumbre
  • Aumentar sensación de control

Problemas habituales:

  • Click sin feedback.
  • Acciones que “no parece que hagan nada”.
  • Latencia sin indicación visual.

Disabled no es invisibilidad​

Un elemento deshabilitado:

  • Sigue siendo parte de la interfaz
  • Debe entenderse como tal
  • No debe parecer roto

Buenas prácticas:

  • Menor contraste, no desaparición
  • Cursor adecuado
  • Texto explicativo cuando sea necesario

Un botón disabled sin contexto genera frustración.

Accesibilidad como base, no como capa extra​

Accesibilidad no es cumplir una checklist. Es no romper comportamientos básicos del navegador.

Principios mínimos:

  • HTML semántico antes que divs
  • Estados visibles
  • Texto suficiente
  • Contraste funcional
  • Interacción posible sin ratón

Tailwind no añade accesibilidad automáticamente. Pero no la impide si se usa bien.

Focus-visible y reducción de ruido visual​

No todo foco debe verse siempre. Por eso existe focus-visible.

Regla práctica:

  • Ratón → no mostrar foco
  • Teclado → mostrar foco claramente

Esto evita:

  • Interfaces llenas de outlines innecesarios
  • Eliminación completa del focus

Color y accesibilidad: relación, no estética​

El color no puede ser el único canal de información.

Errores frecuentes:

  • Error solo en rojo sin texto
  • Estado activo solo por color
  • Contrastes insuficientes

Buenas prácticas:

  • Color + texto
  • Color + icono
  • Color + cambio estructural (borde, fondo)

Estados compuestos y coherencia​

Los estados se combinan:

  • hover + focus
  • disabled + focus
  • active + loading

Un sistema sólido define qué pasa en cada combinación, no solo en aislamiento.

Problema típico:

  • Estados que se contradicen visualmente.
  • Componentes que “parpadean” al interactuar.

Errores frecuentes al empezar con estados y accesibilidad​

  • Pensar que accesibilidad es “para otros”.
  • Diseñar primero y “arreglar luego”.
  • Quitar focus porque “molesta”.
  • Usar hover como solución universal.
  • No probar con teclado nunca.

Este módulo introduce el cuarto pilar del sistema: una interfaz no es solo visible, es usable por personas reales en condiciones reales.