Accesibilidad web

La accesibilidad web es la práctica de diseñar y desarrollar sitios y aplicaciones que puedan ser usados por el mayor número posible de personas, incluidas aquellas con discapacidades visuales, auditivas, motrices o cognitivas. No es una característica opcional: afecta a más del 15 % de la población mundial según la OMS, y su ausencia puede significar tanto exclusión de usuarios como riesgo legal.

Los cuatro principios WCAG (POUR)

Las pautas WCAG se organizan en torno a cuatro principios que todo contenido debe cumplir:

Contraste de color: el error más frecuente

El 81 % de las webs analizadas por WebAIM en 2024 no superan el ratio mínimo de contraste WCAG. Los requisitos para el nivel AA son:

• Texto normal (< 18 pt, o < 14 pt en negrita): ratio mínimo 4,5:1
• Texto grande (≥ 18 pt, o ≥ 14 pt en negrita): ratio mínimo 3:1
• Componentes de UI e iconos: ratio mínimo 3:1

Ejemplos de pares que fallan: gris claro #999 sobre blanco (ratio 2,9:1), texto azul de enlace sin suficiente luminosidad sobre fondo azul claro, o texto blanco sobre amarillo (ratio 1,07:1 en el peor caso).

La elección de colores CSS debe hacerse siempre con la verificación del ratio en paralelo, no como paso de revisión final.

Texto alternativo en imágenes

Todo elemento <img> debe tener un atributo alt descriptivo:

<!-- Correcto: describe lo que aporta la imagen -->
<img src="grafico-ventas-2025.png" alt="Gráfico de barras: ventas mensuales 2025, pico en diciembre (2.400 €)">

<!-- Imagen decorativa: alt vacío para que los lectores de pantalla la ignoren -->
<img src="decoracion.svg" alt="">

<!-- Incorrecto: sin alt -->
<img src="grafico.png">

Un lector de pantalla (como NVDA o VoiceOver) lee el alt en voz alta. Sin él, lee el nombre del archivo, que raramente es útil.

Formularios accesibles

Los campos de formulario sin etiqueta son el tercer error más común. Cada <input> debe tener un <label> asociado mediante for/id, no solo un placeholder:

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

<!-- Incorrecto: placeholder no es un sustituto del label -->
<input type="email" placeholder="Correo electrónico">

El placeholder desaparece al escribir y no es anunciado como etiqueta por todos los lectores de pantalla.

Navegación por teclado

Todo usuario que no puede usar un ratón (por discapacidad motriz, por preferencia o en un entorno de accesibilidad) navega con el teclado. Los requisitos mínimos son:

1. Todos los elementos interactivos deben ser alcanzables con Tab.
2. El indicador de foco debe ser visible (no eliminar outline: none sin reemplazarlo).
3. No debe haber trampas de foco: el usuario debe poder salir de cualquier componente con Esc o Tab.
4. Los menús, modales y carruseles deben seguir los patrones ARIA Authoring Practices.

HTML semántico y ARIA

El HTML semántico correcto es la base de la accesibilidad para tecnologías asistivas:

<!-- Semántico: el lector de pantalla anuncia "botón" -->
<button type="button">Enviar</button>

<!-- No semántico: requiere ARIA adicional -->
<div role="button" tabindex="0" onclick="...">Enviar</div>

ARIA (Accessible Rich Internet Applications) complementa el HTML cuando los elementos nativos no son suficientes, por ejemplo en componentes JavaScript personalizados. Sin embargo, la regla de oro es no usar ARIA si existe un elemento HTML nativo equivalente: role="button" en un <div> es peor que un <button> real.

Accesibilidad para daltonismo

Aproximadamente el 8 % de los hombres y el 0,5 % de las mujeres tienen algún tipo de daltonismo. Los errores más habituales:

• Usar solo el color rojo/verde para indicar error/éxito sin un icono o texto adicional.
• Gráficas con líneas diferenciadas únicamente por color.

La solución es no transmitir información solo mediante el color: acompaña siempre con formas, iconos, texturas o texto. Puedes verificar cómo ve tu diseño alguien con deuteranopia con las herramientas de simulación de daltonismo de Chrome DevTools (Rendering → Emulate vision deficiencies).

Cómo auditar la accesibilidad de una web

1. Axe o Lighthouse (automático): detecta errores obvios de contraste, imágenes sin alt, formularios sin label. Son rápidos pero cubren solo entre el 30-40 % de los problemas reales.
2. Navegación por teclado (manual): recorre toda la interfaz solo con Tab, Shift+Tab, Enter y Espacio. ¿Puedes completar todas las tareas principales?
3. Lector de pantalla (manual): prueba con NVDA (Windows, gratuito) o VoiceOver (Mac/iOS, integrado). ¿Tiene sentido el contenido leído en orden?
4. Zoom al 200 % (manual): el contenido debe ser legible y usable sin desplazamiento horizontal.

Esta información es orientativa y no constituye asesoramiento legal. Los requisitos exactos de accesibilidad pueden variar según la legislación de cada país y el tipo de organización.