Accesibilidad para diseñadores: Crear diseño visual e interactivo inclusivo

Un sitio web accesible comienza con un diseño accesible. Muchos de los fallos de accesibilidad más comunes — contraste de color insuficiente, navegación poco clara, diseños confusos, indicadores de foco ausentes — se originan en decisiones tomadas durante la fase de diseño. Para cuando se escribe el código, estos problemas están incorporados, y solucionarlos requiere rediseñar en lugar de simplemente ajustar código.

Como diseñador, tienes más influencia sobre la accesibilidad que casi cualquier otra persona del equipo. Las decisiones que tomes sobre color, tipografía, espaciado, patrones de navegación y modelos de interacción determinan si millones de usuarios podrán interactuar eficazmente con tu producto.

Contraste de color

El contraste de color insuficiente es uno de los problemas de accesibilidad más frecuentes en la web. WCAG exige un ratio de contraste mínimo de 4,5:1 entre el texto y su fondo para texto de tamaño normal, y de 3:1 para texto grande (definido como 18pt regular o 14pt negrita). En el Nivel AAA, el requisito aumenta a 7:1 para texto normal y 4,5:1 para texto grande.

Estos ratios existen porque las personas con baja visión, ojos envejecidos o deficiencias en la visión del color necesitan suficiente contraste para distinguir el texto de su fondo. El texto gris claro sobre fondo blanco puede verse elegante en una maqueta de diseño, pero resulta ilegible para un porcentaje significativo de usuarios.

Los elementos no textuales también tienen requisitos de contraste. Los componentes de la interfaz de usuario — botones, campos de formulario, iconos, indicadores de foco — y los objetos gráficos significativos deben mantener al menos un ratio de contraste de 3:1 con los colores adyacentes. Esto garantiza que los usuarios puedan identificar los elementos interactivos y comprender los gráficos informativos.

Utiliza herramientas de verificación de contraste a lo largo de todo tu proceso de diseño, no solo al final. Herramientas como el WebAIM Contrast Checker o el Colour Contrast Analyser te permiten verificar los ratios antes de comprometerte con una paleta de colores.

El color como información

El color nunca debe ser el único medio visual para transmitir información. Si utilizas rojo para indicar errores y verde para indicar aciertos, los usuarios daltónicos podrían no distinguir entre los dos estados. Complementa siempre el color con indicadores adicionales — iconos, etiquetas de texto, patrones o subrayados.

Esto también se aplica a los enlaces. Si los enlaces dentro de un bloque de texto se distinguen únicamente por el color, deben cumplir un ratio de contraste de 3:1 respecto al texto circundante o complementarse con otro indicador visual como un subrayado.

Tipografía y tamaño del texto

Todo el texto de tu sitio web debe poder redimensionarse hasta un 200 % sin pérdida de contenido ni funcionalidad. Esto implica diseñar con unidades flexibles y relativas en lugar de tamaños fijos en píxeles, y asegurar que tus diseños se adapten correctamente cuando el texto se amplía.

WCAG 2.2 también incluye requisitos de espaciado del texto. Los usuarios deben poder ajustar la altura de línea a al menos 1,5 veces el tamaño de la fuente, el espaciado entre párrafos a al menos 2 veces el tamaño de la fuente, el espaciado entre letras a 0,12 veces el tamaño de la fuente y el espaciado entre palabras a 0,16 veces el tamaño de la fuente — sin pérdida de contenido ni funcionalidad.

Diseño de enlaces

Los enlaces deben distinguirse visualmente del texto circundante. Deben ser descriptivos y concisos, indicando a los usuarios lo que encontrarán al seguir el enlace. Nunca utilices "haz clic aquí" o "leer más" como texto de enlace sin contexto adicional, ya que estas frases carecen de significado para los usuarios de lectores de pantalla que navegan mediante listas de enlaces.

Navegación y consistencia

La navegación debe ser consistente en todas las páginas de tu sitio. Los usuarios que dependen de la navegación por teclado o de lectores de pantalla construyen un modelo mental de la estructura del sitio, y los cambios inesperados alteran ese modelo. WCAG exige que los mecanismos de navegación que aparecen en múltiples páginas se presenten en el mismo orden relativo cada vez, y que los componentes con la misma funcionalidad se identifiquen de forma consistente.

Indicadores de foco

Cuando un usuario navega por tu sitio con el teclado, debe haber un indicador visible que muestre qué elemento tiene el foco actualmente. Este indicador de foco debe ser claramente visible — WCAG 2.2 exige que no quede oculto por otro contenido (SC 2.4.11) y, en el Nivel AAA, que el indicador de foco completo y el componente enfocado sean totalmente visibles (SC 2.4.12).

Diseña los indicadores de foco de forma intencionada. El contorno predeterminado del navegador a menudo es insuficiente o se elimina mediante resets CSS. Diseña un estilo de foco personalizado que tenga suficiente contraste y sea visualmente prominente.

Tamaño de los objetivos táctiles

Los elementos interactivos deben ser lo suficientemente grandes para poder activarse sin dificultad. WCAG 2.2 exige que los objetivos interactivos tengan al menos 24x24 píxeles CSS (SC 2.5.8), incluyendo cualquier espacio en blanco que rodee al objetivo. En el Nivel AAA, el requisito aumenta a 44x44 píxeles (SC 2.5.5). Esto beneficia a los usuarios con discapacidades motoras, temblores o destreza limitada, así como a cualquier persona que utilice un dispositivo móvil en un entorno con movimiento.

Diseño de formularios

Los formularios son una de las áreas más críticas para el diseño accesible. Cada control de formulario necesita una etiqueta claramente visible que indique al usuario qué información debe proporcionar. Los mensajes de error deben ser específicos, visibles y estar posicionados cerca del campo al que se refieren. Proporciona instrucciones cuando sea necesario y evita depender únicamente del texto placeholder como etiqueta — el texto placeholder desaparece cuando el usuario empieza a escribir y a menudo tiene un contraste insuficiente.

Diseña para la prevención de errores. Permite a los usuarios revisar y corregir la información antes del envío, especialmente para acciones con consecuencias significativas como transacciones financieras o acuerdos legales. Cuando se detecten errores, proporciona sugerencias claras sobre cómo solucionarlos.

Movimiento y animación

Algunos usuarios experimentan convulsiones, migrañas o vértigo con contenido animado o parpadeante. Nada en tu sitio web debería parpadear más de tres veces por segundo. Proporciona controles para pausar, detener u ocultar cualquier contenido que se mueva, parpadee o se desplace durante más de cinco segundos. Respeta la configuración del sistema operativo "prefers-reduced-motion" y ofrece alternativas con movimiento reducido para las animaciones.

Imágenes de texto

Evita utilizar imágenes de texto en tu sitio web. El texto real puede redimensionarse, reformatearse y ser leído por las tecnologías de asistencia. Las imágenes de texto no. Las únicas excepciones son los logotipos y las situaciones en las que una presentación visual particular del texto es esencial para la información que se transmite.

Lista de verificación de accesibilidad para diseñadores

Antes de entregar cualquier diseño para su desarrollo, verifica: los ratios de contraste cumplen los requisitos para todo el texto y los elementos interactivos; el color nunca es el único indicador de información; los estados de foco están diseñados para todos los elementos interactivos; los objetivos táctiles cumplen los requisitos de tamaño mínimo; la navegación es consistente en todas las páginas; los estados de error y los mensajes están diseñados claramente; el texto puede redimensionarse sin romper los diseños; las animaciones respetan las preferencias del usuario; y todo el contenido no textual tiene alternativas textuales planificadas.