Accesibilidad web con Vue y Tailwind CSS

Introducción

Tu sitio web se ve increíble. Los colores son perfectos, las animaciones son fluidas y el diseño es impecable. Pero ¿y si un usuario no distingue los colores? ¿Y si no puede usar un ratón? La accesibilidad web no es un extra, es una responsabilidad. Construir para la web significa construir para todos.

No se trata solo de cumplir normas, se trata de empatía. Hoy te doy lo básico y algunos consejos prácticos para que tu trabajo no solo se vea bien, sino que además sea usable y justo para todo el mundo.

1. El abecé de la accesibilidad en HTML y Vue

Los problemas de accesibilidad suelen empezar en el HTML. Estos son algunos de los más comunes y cómo arreglarlos:

Atributo alt en las imágenes: añade siempre alt y sé descriptivo.
Mal: <img src="logo.png">
Bien: <img src="logo.png" alt="Logo de la empresa Acme, una A mayúscula con un círculo azul">
Texto de enlaces y botones: sé explícito en el texto.
Mal: <a href="/report">Haz clic aquí para descargar.</a>
Bien: <a href="/report">Descarga el informe anual de ventas</a>
v-for y key: además del rendimiento, también ayuda a la accesibilidad, porque Vue maneja los elementos de forma predecible.

2. Tailwind y accesibilidad: el poder de focus y sr-only

Tailwind te da herramientas potentes para mejorar la accesibilidad desde el primer momento.

El estado de foco (focus:): con Tailwind puedes dar estilo a los elementos cuando tienen el foco.
Ejemplo: <button class="... focus:ring-2 focus:ring-blue-500 focus:outline-none"></button>

La clase sr-only: oculta un elemento a la vista pero lo mantiene disponible para los lectores de pantalla.
Ejemplo:

<button class="p-2">
  <span class="sr-only">Buscar</span>
  <svg class="w-5 h-5" fill="none" stroke="currentColor">...</svg>
</button>

3. Herramientas y validadores

No tienes que hacerlo todo a mano. Apóyate en herramientas:

Vue A11y: extensión para tu editor que te avisa de problemas de accesibilidad.
ESLint-plugin-vuejs-a11y: plugin de ESLint que detecta errores de accesibilidad en tiempo real.
Lighthouse: auditoría de Chrome que genera un informe detallado de accesibilidad.

Conclusión

La accesibilidad web no es un obstáculo, es un acto de empatía. Demuestra que no eres solo un técnico, sino un profesional que construye para personas. Cualquier reclutador que vea que te importa esto sabrá que estás en el siguiente nivel del desarrollo.