La accesibilidad web garantiza que los sitios web sean utilizables por personas con discapacidades — incluyendo impedimentos visuales, auditivos, motores y cognitivos. Más allá de ser lo correcto, la accesibilidad es cada vez más un requisito legal y mejora indirectamente el SEO.

El Marco WCAG

WCAG (Pautas de Accesibilidad para el Contenido Web) está organizado en torno a cuatro principios conocidos como POUR:

Perceptible — La información debe presentarse a los usuarios de formas que puedan percibir
Operable — Los componentes de la interfaz deben ser operables
Comprensible — La información y el funcionamiento de la UI deben ser comprensibles
Robusto — El contenido debe ser suficientemente robusto para ser interpretado por agentes de usuario diversos

WCAG tiene tres niveles de conformidad: A (mínimo), AA (estándar del sector) y AAA (mejorado). La mayoría de las pautas de accesibilidad y requisitos legales apuntan al Nivel AA.

Los Fallos Más Comunes

1. Falta de Texto Alt (Imágenes)

El texto alt es leído por los lectores de pantalla en lugar de mostrar la imagen. Cada <img> necesita un atributo alt:

<!-- Imagen informativa -->
<img src="grafico.png" alt="Gráfico de barras mostrando un aumento del 40% en ingresos T1 2026" />

<!-- Imagen decorativa (ocultar de lectores de pantalla) -->
<img src="divisor.png" alt="" role="presentation" />

<!-- Botón con icono (describe la acción) -->
<button><img src="papelera.svg" alt="Eliminar elemento" /></button>

2. Contraste de Color Insuficiente

WCAG AA requiere:

Ratio de contraste de 4,5:1 para texto normal
3:1 para texto grande (18px+ o 14px+ en negrita)
3:1 para componentes de UI y elementos gráficos

Herramientas: WebAIM Contrast Checker, panel de accesibilidad en DevTools del navegador.

3. Etiquetas de Formulario Faltantes

Cada campo de formulario necesita una etiqueta asociada. No te bases únicamente en el texto del marcador de posición — desaparece cuando el usuario comienza a escribir:

<!-- Correcto -->
<label for="email">Correo electrónico</label>
<input id="email" type="email" name="email" />

<!-- También correcto (etiqueta oculta visualmente) -->
<label for="buscar" class="sr-only">Buscar</label>
<input id="buscar" type="search" placeholder="Buscar..." />

4. Navegación por Teclado

Todos los elementos interactivos deben ser accesibles y operables solo con teclado:

Tab/Mayús+Tab para navegar
Enter/Espacio para activar botones y enlaces
Teclas de flecha para menús y componentes
Escape para cerrar diálogos

Prueba desconectando el ratón y navegando por tu sitio solo con Tab.

5. Indicadores de Foco

El estilo :focus debe ser visible. Nunca hagas *:focus { outline: none } sin proporcionar un indicador de foco alternativo:

/* Anillo de foco personalizado que respeta las preferencias del usuario */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

6. Regiones de Referencia Faltantes

Usa landmarks HTML semánticos para que los usuarios de lectores de pantalla puedan navegar por región:

<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

7. Uso Incorrecto de ARIA

ARIA (Accessible Rich Internet Applications) debe mejorar la accesibilidad, no crear confusión. Reglas clave:

Ningún ARIA es mejor que un ARIA malo
Nunca uses ARIA para reemplazar HTML semántico
Los roles ARIA interactivos necesitan soporte de teclado

<!-- Incorrecto: ARIA en un elemento no interactivo -->
<div role="button" onclick="...">Haz clic aquí</div>

<!-- Correcto: Usa el elemento nativo -->
<button onclick="...">Haz clic aquí</button>

8. Saltar Contenido

Proporciona enlaces "saltar al contenido principal" para que los usuarios de teclado no tengan que tabular por toda la navegación en cada página:

<a href="#contenido-principal" class="sr-only focus:not-sr-only">
  Saltar al contenido principal
</a>

Consideraciones Legales

Las demandas por accesibilidad están en aumento. En España y la Unión Europea:

El Real Decreto 1112/2018 transpone la Directiva Europea de Accesibilidad Web
La norma europea EN 301 549 hace referencia a WCAG 2.1 AA
Los organismos del sector público están obligados a cumplir la accesibilidad WCAG 2.1 AA

Soluciones Rápidas (Menos de una Hora Cada Una)

Añade texto alt a todas las imágenes (Krokanti Audit te indica exactamente cuáles faltan)
Corrige tus estilos de foco
Añade elementos <label> a todos los campos de formulario
Comprueba tus ratios de contraste de color
Asegúrate de que tu sitio funciona con navegación solo por teclado

Krokanti Audit verifica automáticamente más de 20 reglas de accesibilidad — incluyendo cobertura de texto alt, ratios de contraste, uso de ARIA, etiquetado de formularios y patrones de accesibilidad de teclado. Ejecuta una auditoría gratuita para ver dónde estás.