Guía de diseño accesible: principios WCAG explicados sin tecnicismos

Las Pautas de Accesibilidad para el Contenido Web (WCAG, por sus siglas en inglés) son el estándar internacional para el diseño accesible. Fueron desarrolladas por el World Wide Web Consortium (W3C) y son la referencia obligada para cualquier diseñador que quiera crear contenidos digitales que puedan ser usados por todas las personas, independientemente de sus capacidades.

El problema es que las WCAG están escritas para desarrolladores y auditores de accesibilidad, no para diseñadores. Su lenguaje es técnico, su estructura es compleja, y su lectura puede resultar intimidante para alguien que no tiene formación en tecnología. Esta guía busca traducir los principios más importantes de las WCAG a un lenguaje que los diseñadores puedan entender y aplicar.

Los cuatro principios fundamentales

Las WCAG se organizan en torno a cuatro principios que forman el acrónimo POUR:

Perceptible: La información y los componentes de la interfaz deben presentarse de formas que los usuarios puedan percibir. Esto significa, entre otras cosas, proporcionar texto alternativo para las imágenes, subtítulos para los videos, y suficiente contraste de color para que el texto sea legible.

Operable: Los componentes de la interfaz y la navegación deben ser operables. Esto significa que todo debe ser accesible con teclado (no solo con ratón), que los usuarios deben tener suficiente tiempo para leer y usar el contenido, y que no debe haber elementos que puedan causar convulsiones (como flashes rápidos).

Comprensible: La información y el funcionamiento de la interfaz deben ser comprensibles. Esto significa usar un lenguaje claro y simple, que las páginas funcionen de forma predecible, y que se ayude a los usuarios a evitar y corregir errores.

Robusto: El contenido debe ser suficientemente robusto para ser interpretado por una amplia variedad de agentes de usuario, incluidas las tecnologías de asistencia. Esto es principalmente una responsabilidad de los desarrolladores, pero los diseñadores pueden contribuir usando componentes estándar y estructuras semánticas correctas.

Las reglas de contraste

Una de las reglas más importantes —y más fáciles de aplicar— de las WCAG es la del contraste de color. Para texto normal (menos de 18pt o 14pt en negrita), el ratio mínimo de contraste entre el texto y el fondo debe ser 4.5:1. Para texto grande (18pt o más, o 14pt en negrita), el ratio mínimo es 3:1.

Existen herramientas gratuitas para verificar el contraste: el Colour Contrast Analyser, el WebAIM Contrast Checker, o el plugin de Figma "Contrast". Usarlas debería ser un hábito automático en cualquier proceso de diseño.

Texto alternativo: más que una descripción

El texto alternativo (atributo alt en HTML) es la descripción de una imagen que leen los lectores de pantalla para usuarios ciegos o con baja visión. Pero escribir buen texto alternativo es más complejo de lo que parece.

La regla básica es: describe la función de la imagen, no solo su apariencia. Si la imagen es decorativa (no aporta información), el alt debe estar vacío (alt=""). Si la imagen es informativa, describe lo que comunica. Si la imagen es un gráfico o una infografía, proporciona la información que contiene en el texto alternativo o en el cuerpo del texto.

Recursos para seguir aprendiendo

Para profundizar en accesibilidad, recomendamos: el curso gratuito "Introduction to Web Accessibility" de W3C en edX, el libro "A Web for Everyone" de Sarah Horton y Whitney Quesenbery, y el blog de Léonie Watson, una de las expertas en accesibilidad más influyentes del mundo.