Los 4 principios de accesibilidad en el diseño de prototipos

La accesibilidad es el diseño de productos o servicios, ya sean digitales o no, para que sean usados por la mayor cantidad de personas posible independientemente de sus capacidades y sin realizar adaptaciones específicas para diversidades existentes. 

Por ejemplo, aplicando diseño accesible, un producto digital podrá ser utilizado por una persona daltónica y una persona no daltónica por igual. 

Una buena parte de la accesibilidad parte del diseño, pero otra parte muy importante es exclusiva del desarrollo y depende de que se sigan buenas prácticas en el código y se usen las etiquetas adecuadas. En este artículo nos centraremos solamente en las partes que aplican al diseño.  

La WCAG, la organización que regula los estándares de accesibilidad, define 4 principios de una interfaz de usuario accesible: perceptible, operable, comprensible y robusto. 

Principio 1 de accesibilidad: Perceptible

La información y los componentes de la interfaz de usuario deben estar presentadas al usuario de manera que los pueda percibir. 

En este principio se engloban todos aquellos elementos visuales de la interfaz. Pondremos algunos ejemplos de los más relevantes. 

Colores 

En cuanto a los colores, es necesario hacer revisiones para asegurarse de que todos los elementos sean visibles por usuarios daltónicos, o con otras diversidades de la visión que tengan que ver con los colores.  

Es especialmente importante tener cuidado con los colores verde y rojo cuando van juntos.   

 

Accesibilidad-diseño-prototipos-Verde-Rojo-Itequia-Design

 

También es importante no utilizar el color como indicador único de una información, por ejemplo, en gráficos donde se visualicen datos.

 

Accesibilidad-diseño-prototipos-Graficos-Datos-Itequia-Design

 

El problema que se presenta en esta gráfica es que un usuario daltónico tendrá dificultades para identificar a qué barra corresponde cada año. Una solución podría ser, en vez de indicar el año por separado a través de recuadros de color, poner cerca de cada barra a qué año corresponde.

 

Accesibilidad-diseño-prototipos-Graficos-años-Itequia-Design

 

Otra solución interesante es la de superponer texturas o patrones a los colores para una mejor identificación:

 

Accesibilidad-diseño-prototipos-Texturas-Itequia-Design

 

Contraste

Otro punto importante que tiene también que ver con el color es el contraste. Consiste en que los textos puedan leerse correctamente cuando van sobre un fondo de color. En este ejemplo, vemos que el primer botón se lee bien, pero el segundo no.

 

Accesibilidad-diseño-prototipos-Contraste-Itequia-Design

 

Para comprobar si el contraste es el adecuado, podemos seguir las pautas de la WCAG, en las que indican que el mínimo de contraste para que los textos se puedan leer correctamente es de 4,5:1 (o 3:1 en titulares grandes y elementos similares). Esta es una medida que viene dada por unos parámetros de la luminancia de los colores y no tenemos por qué saber cómo calcularla; para hacer la verificación podemos usar herramientas que hacen la revisión. Por ejemplo, con plugins de Figma. 

Tamaño de texto 

Para asegurar una buena lectura, también es necesario que el texto tenga un tamaño adecuado. Si es demasiado pequeño, habrá muchas personas a las que le cueste leerlo, especialmente personas mayores o con problemas de visión. Muchos autores recomiendan que el tamaño mínimo para el texto de párrafo sea 16px, y que este tamaño aumente si el usuario hace zoom de la página. 

 

Accesibilidad-diseño-prototipos-Tamaño-Texto-Itequia-Design

 

Principio 2 de accesibilidad: Operable

Los componentes de la interfaz de usuario y la navegación deben ser operables.

Este principio se refiere a que se debe poder interactuar con los componentes de manera correcta. Por ejemplo, los usuarios deben saber qué es lo que hace un botón o enlace antes de hacer click, o los formularios deben poder navegarse solo con el teclado. 

Navegación 

La página web debe de ser fácil de navegar e identificar en qué sección estamos. Hay que tener en cuenta que el usuario no siempre llegará a la web a través de la home o página de inicio, por lo que es importante indicar siempre en qué sección se está (con un título claro), y una manera extra de orientarse y cambiar de sección en caso de necesitarlo (por ejemplo, mediante breadcrumbs o un menú de navegación). Los enlaces a las diferentes secciones deben ser cortos y descriptivos, para que el usuario sepa qué se va a encontrar al hacer click. 

 

Accesibilidad-diseño-prototipos-Navegación-Itequia-Design

 

Tiempo y animaciones 

En el caso de que la interfaz tenga interacciones basadas en movimiento, debemos considerar si son necesarias, si tienen el tiempo suficiente para que el usuario tome acción sobre ellas, y dar la opción de desactivar el movimiento en caso de no ser necesarias. Por ejemplo, que al borrar un elemento aparezca un mensaje indicando que se ha borrado y la opción para deshacer la acción, y que este mensaje no desaparezca hasta que el usuario lo haya leído y haya considerado si desea tomar acciones.  

 

Accesibilidad-diseño-prototipos-Tiempo-Itequia-Design

 

Principio 3 de accesibilidad: Comprensible

La información y la operación de la interfaz de usuario deben ser comprensibles.

En este principio hablamos de todo aquello que influye en la comprensión de la interfaz por parte del usuario, ya sea el idioma, el uso de palabras sencillas o complejas, una clara identificación de los elementos, mensajes de error y ayuda, etc. 

Formularios 

Los formularios tienen sus propias consideraciones de accesibilidad aparte de los principios perceptibles que ya hemos visto (color, contraste, tamaño del texto). Muchas páginas y productos optan por diseñar formularios modernos y originales, o quitar la etiqueta de los campos y ponerla dentro del propio campo (como placeholder) para ahorrar espacio o que quede visualmente más compacto. Pero esto puede provocar problemas. 

En formularios pequeños (por ejemplo, un inicio de sesión con correo y contraseña), no es tan problemático, pero en formularios más largos, al ir rellenando los campos el usuario puede sentirse perdido si tiene que volver atrás y el campo no está claramente identificado.  

Los placeholders también presentan varios problemas, siendo el primero de ellos el bajo contraste, ya que normalmente se utiliza un color más claro. El otro problema es que hay algunos casos en los que los usuarios puedan pensar que los campos ya están rellenados. 

 

Accesibilidad-diseño-prototipos-Placeholders-Itequia-Design

 

Mensajes de error 

La indicación de los errores debería hacerse de una manera clara y, si es posible, indicando la solución o dónde pueden encontrar ayuda. También es óptimo poner el código de error para una posible identificación del error exacto. 

 

Accesibilidad-diseño-prototipos-Mensaje-Error-Itequia-Design

 

En el caso específico de los formularios, lo óptimo es que el aviso esté junto al campo que está dando el error. Se puede usar el color como apoyo para indicar el error, pero siempre con otros elementos que ayuden a la identificación (como iconos y el propio texto de la alerta). 

 

Accesibilidad-diseño-prototipos-Mensaje-Error-Rojo-Itequia-Design

 

Principio 4 de accesibilidad: Robusto

El contenido debe ser lo suficientemente robusto como para poder ser interpretado por una gran cantidad de dispositivos, incluyendo tecnologías de asistencia.

Este principio tiene más que ver con el desarrollo que con el diseño, y se refiere a la creación de código de calidad siguiendo pautas y estándares. La interfaz debe verse correctamente independientemente del navegador (Chrome, Firefox, Safari…) y el dispositivo (ordenador, tablet, móvil…).  

Además, las interfaces deben ser compatibles con tecnologías de asistencia como lectores de pantalla. 

Para saber más sobre los estándares de accesibilidad puedes consultar la Guía de Accesibilidad de la WCAG. 

Suscríbete a la newsletter

    ¿En qué te podemos ayudar?