Accesibilidad web: guía práctica de WCAG para diseñadores

Alrededor del 15% de la población mundial vive con alguna discapacidad. Diseñar accesible no es un favor: es alcanzar a más usuarios, cumplir normativa y, casi siempre, mejorar la experiencia para todos.

Los cuatro principios POUR

• Perceptible: la información debe poder percibirse por más de un sentido.
• Operable: todo debe funcionar con teclado y sin depender de gestos precisos.
• Comprensible: lenguaje claro, comportamiento predecible, errores explicados.
• Robusto: compatible con tecnologías de asistencia presentes y futuras.

Lo mínimo que debes cumplir (WCAG 2.2 AA)

• Contraste 4.5:1 en texto normal y 3:1 en texto grande y elementos de interfaz.
• Nunca comunicar solo con color: agrega icono o texto.
• Foco visible en todos los elementos interactivos.
• Área táctil mínima de 24x24 px (44x44 recomendado).
• Etiquetas persistentes en formularios, no solo placeholders.
• Textos alternativos descriptivos en imágenes con contenido.
• Jerarquía correcta de encabezados y estructura semántica.
• Respetar la preferencia de movimiento reducido.

Diseñar pensando en lectores de pantalla

Entrega a desarrollo el orden de lectura, las etiquetas accesibles de iconos, los estados dinámicos que deben anunciarse y el comportamiento del foco al abrir y cerrar modales. Si no lo especificas, no se implementa.

Herramientas

Stark y el plugin de contraste en Figma, axe DevTools y Lighthouse en navegador, VoiceOver en Mac/iOS y NVDA en Windows. Pero recuerda: las herramientas automáticas detectan cerca del 30% de los problemas; el resto requiere revisión manual y, sobre todo, testear con personas con discapacidad.

Beneficio colateral

Los subtítulos ayudan a quien viaja en bus, el alto contraste a quien usa el celular bajo el sol y el lenguaje claro a todos. La accesibilidad es diseño de calidad, no una capa extra.