Guía para diseñar un producto digital para personas con discapacidad

La accesibilidad es fundamental para todos los usuarios

La accesibilidad es un tema de enorme importancia porque garantiza el acceso inclusivo a la web y a la tecnología para todas las personas, pero… ¿cómo garantizarla?

Datos actuales indican que más del 15% de la población mundial (mil millones de personas) experimenta algún tipo de discapacidad. Por eso, con el fin de crear soluciones para todos los usuarios, hoy es necesario incorporar una planificación y una auditoría de la accesibilidad en todos y cada uno de los procesos de diseño y desarrollo.

Y para que sepas por dónde empezar, ahora te explico cómo lograrlo.😉

¿Quiénes son las personas con discapacidad?

Primero es importante entender lo más básico de este tema.

Tal y como señala la Asamblea General de las Naciones Unidas, las personas con discapacidad son aquellas que tienen deficiencias físicas, mentales, intelectuales o sensoriales a largo plazo que, al interactuar con diversas barreras, impiden su participación plena y efectiva en la sociedad, en igualdad de condiciones con las demás.

Dicho esto, es momento de ir más allá.

¿Qué es la accesibilidad?

La accesibilidad es la práctica de eliminar barreras para que todas las personas accedan a donde necesitan.

Y en el mundo físico es fácil de identificar; un claro ejemplo de adaptación para accesibilidad es la creación rampas para que las personas de edad avanzada o en sillas de ruedas entren fácilmente a algún lugar.

Pues bien, lo mismo ocurre con los productos digitales y los sitios web. Debido a que existen usuarios que usan ampliadores y lectores de pantalla, y también quienes no pueden usar un mouse o trackpad, es necesario contar con elementos que les permitan aprovecharlos.

Todo el mundo, independientemente de sus discapacidades o limitaciones, debe poder acceder a ellos y consumirlos.

Accesibilidad y usabilidad: ¿son lo mismo?

La “accesibilidad” y la “usabilidad” son términos que se superponen.

Algunos estándares definen al primero como la usabilidad de un producto, servicio, entorno o instalación por parte de personas con la gama más amplia de capacidades. Lo que enfatiza que la accesibilidad implica tanto la facilidad de uso (que puede afectar la eficiencia de la tarea y la satisfacción del usuario) como el éxito del uso, es decir, la eficacia del sistema.

¿Por qué gastar tiempo y dinero en accesibilidad, especialmente si un porcentaje tan pequeño de mis usuarios potenciales lo requiere?

La respuesta corta es porque todos los usuarios se benefician de una buena accesibilidad y un diseño inclusivo, básicamente por estas razones:

• Es útil ante discapacidades temporales o situaciones especiales.
• Existen requisitos legales que deben cumplirse para poder implementar una buena accesibilidad en la web y en un software.
• Muchas de las características diseñadas para usuarios con discapacidades se desarrollan y luego son adoptadas por un público mucho más amplio. Por ejemplo: los subtítulos que aumentan la comprensión, la voz que se usa en los videos de redes sociales y la asistencia digital que ayuda a resolver problemas con agilidad.

¿Qué personas necesitan de la accesibilidad?

Las personas que comúnmente necesitan de la accesibilidad son aquellas con discapacidad motriz. Alguien con limitantes en sus brazos, por ejemplo, requiere un software de seguimiento ocular y estados de enfoque.

Asimismo, aquellas con discapacidades cognitivas y de aprendizaje, también la necesitan. Estas pueden representar dificultades temporales o permanentes en el uso de las funciones cognitivas, por ejemplo: aprendizaje, comunicación y lectura, memoria, atención, problemas visuales, lenguaje y pensamiento numérico.

Una navegación compleja en el diseño de una página, los textos largos sin imágenes y sin ningún otro soporte gráfico, contenido que se mueve, parpadea o titila, y audio de fondo que no se puede apagar, hace difícil el uso y la comprensión.

De igual manera, los usuarios con discapacidad visual, por ejemplo, personas con baja visión, daltónicos o ciegos, también necesitan de la accesibilidad.

Barreras como imágenes sin alternativas de texto, textos de página que no cambian de tamaño, textos e imágenes con contraste insuficiente entre las combinaciones de colores de primer plano y de fondo, y textos y navegadores sin combinaciones de colores personalizadas, también impiden el uso y la comprensión.

¿Cómo desarrollar una experiencia de usuario accesible?

Aunque para crear una experiencia de usuario accesible e inclusiva debes centrarte en 4 áreas: visual, auditiva, motora y cognitiva, para fines de este artículo solo te diré cómo enfocarte en lo visual.

Lo primero por hacer es brindar una lista de estándares que el diseño, la ingeniería y el contenido pueden seguir para ayudar a los usuarios con discapacidades visuales, auditivas, motoras y cognitivas. Para conseguirlo necesitas observar el diseño en sí, la jerarquía del contenido y la función.

Esto no solo es bueno para los usuarios, sino también para el negocio en general, ya que el SEO u optimización de motores de búsqueda, ahora considera los puntajes de accesibilidad al clasificar las páginas en Google.

Ahora, cuando se trata de accesibilidad visual, es necesario que te centres en 6 áreas, cada una con sus propias complejidades: color, contraste, jerarquía, fuente, formularios y movimiento. Y para que lo entiendas más, enseguida te explicaré en qué consiste cada una:

Color

En cuanto al color, es fácil suponer que todos pueden ver el mismo espectro de colores, pero esto no es así. Al diseñar, utiliza indicadores adicionales, además del color, para garantizar que el mensaje siempre se reciba correctamente; agrega un ícono simple alado o dentro del cuadro, por ejemplo.

Contraste

Por otro lado, por hacer combinaciones inadecuadas, el bajo contraste llega a convertirse en una infracción frecuente de las pautas de accesibilidad. Para evitarlo debes considerar el primer plano y el fondo.

Hoy existen muchas herramientas que determinan si un diseño cumple con los estándares de relación de contraste, y las Pautas de Accesibilidad para el Contenido Web (WCAG de aquí en adelante) brindan un rango de lo que se considera aceptable para estas relaciones. Lo ideal es proporcionar opciones de navegación claras y consistentes.

Jerarquía visual

Para atender esta área debes crear una jerarquía visual clara con una estrategia de contenido accesible, centrándote en una guía de recursos de contenido para todos los productos. Primero, haz un mapeo de todos los enlaces web y determina cómo encajan en la jerarquía general de tu sitio.

Un mapa de navegación disponible al pie de página de un sitio es la mejor práctica para la accesibilidad, cuantas más formas de navegar existan en un sitio o producto, mejor. Algunos usuarios pueden encontrarlo más fácil de usar, comparado con la navegación principal.

También te recomiendo usar encabezados y espacios para agrupar contenido relacionado. La clave es crear una relación clara entre cada título, subtítulo y contenido, tanto en el texto como las imágenes.

Cada encabezado debe ser descriptivo y seguir un orden de enfoque obvio (piensa en alguien que usa un lector de pantalla y toca el sitio). Por otro lado, igual implementa las diferentes etiquetas de encabezados (h1, h2, h3, etc.) para establecer una jerarquía clara en los temas y facilitar la lectura.

Fuente

De acuerdo con las WCAG, el texto de tu interfaz debe poder ampliarse un 200% más sin estropear nada.

La buena noticia es que hoy en día existen muchas herramientas excelentes que mejoran la accesibilidad para las personas con discapacidad visual, incluido el software de ampliación y la posibilidad de ajustar el tamaño del texto en la configuración del navegador.

De igual forma, hay varias maneras de garantizar que el usuario pueda cambiar el tamaño de la página con precisión, incluido el texto. Por ejemplo, establecer el tamaño de fuente del texto proporcionalmente a la escala de la fuente predeterminada.

La realidad es que es común usar una mezcla de unidades para diferentes propósitos. Lo más importante es que el texto pueda cambiar de tamaño sin superponerse con otros elementos o características, como estados de desplazamiento que podrían volverse demasiado grandes para leer o que cubren una gran cantidad de otro contenido.

Formularios

Los formularios están en todas partes y son una herramienta esencial para comunicarse en línea. Estos son los puntos principales a tener en cuenta:

• Deben tener controles de etiquetas: cada control de un formulario debe estar claramente etiquetado para describir su propósito. Las etiquetas generalmente se muestran como texto en o alado del control y permiten que la tecnología de asistencia, como lectores de pantalla, lean qué es cada elemento; sin ellas, a menudo se escucharía “botón uno, botón dos, entrada de texto uno”, algo que no sirve de nada.
• Debe proporcionar instrucciones muy claras: primero en la parte superior de la página y luego en todo el formulario, para que cualquier usuario pueda completarlo con éxito y facilidad. Un ejemplo de instrucciones en todo el formulario es cómo formatear una fecha.
• Es necesario dividir en páginas los formularios largos: lo mejor es dividirlos en páginas, con un botón de siguiente o continuar. Así es más fácil identificar errores cuando el usuario use una lupa de pantalla u otros controles de asistencia. Una buena regla general es no ir mucho más allá de la primera parte inferior del pliegue en el escritorio para evitar que el usuario se desplace hasta el final.
• Deben ser cortos: esto aumenta las posibilidades de respuesta y evita las desconexiones por inactividad.

Movimiento

Estos son algunos principios a considerar:

• Las ventanas emergentes o alertas deben ser claras y permanecer en la pantalla el tiempo suficiente para encontrarlas y leerlas.
• Si algo causa destellos, no deben ocurrir más de 3 veces por segundo. Esto para disminuir el riesgo de epilepsia.
• Cuando un elemento de desplazamiento inicie automáticamente, es importante asegúrese de que exista un control para detenerlo.
• El audio y video deben ser acompañados de subtítulos.
• Para los videos y audios, es fundamental proporcionar un enlace con la transcripción (que describa lo que ocurre en el video).
• Todo contenido de audio debe tener una alternativa basada en texto.

¿Cómo implementar un proceso de diseño accesible?

Debes saber que no necesitas ajustar todo tu proceso de diseño, al menos desde un nivel alto, solo debes reflexionar un poco más.

Este es el proceso de diseño típico a seguir:

1. Define tu producto: ¿qué es lo que van a construir a partir de las partes interesadas, el liderazgo o los clientes? Se requiere investigación, incluida la competitiva, entrevistas con las personas objetivo, analizar historias de usuario y crear un guion gráfico de las personas, tareas y trabajos a realizar.
2. Diseña: esboza una interfaz de usuario básica para convertirla en estructuras alámbricas y prototipos para la validación. Durante la validación, prueba usando herramientas como prototipos, encuestas y grupos focales, y determina qué funciona y qué no. El proceso de cada equipo variará, pero la tarea general siempre debe ser cierta. Con esta descripción general de alto nivel en mente, debes acercarte y estudiar diversos métodos de diseño para centrarlos en la accesibilidad.
3. Aplica un método de diseño que considere a los usuarios con discapacidades: a través de herramientas puedes simular la navegación en tu producto bajo la visión de alguien con daltonismo, por ejemplo. Realiza una auditoría web completa de accesibilidad para obtener un informe completo de lo que no cumple con los estándares WCAG y usa ajustadores de altura de línea y lectores de pantalla para conocer la experiencia.

De ser posible, prueba tus productos con personas con discapacidad para conocer los dispositivos de asistencia que usan, los problemas que enfrentan con frecuencia y así, puedas ajustar lo necesario.

A veces necesitarás ponerte creativo con los métodos de prueba. Por ejemplo, un colega puede ayudarte a leer cada elemento como si fuera un lector de pantalla para determinar si el usuario puede navegar correctamente de esa manera.

Recuerda, en lo visual, el color, el contraste, la jerarquía de contenido clara, la fuente, el peso y el tamaño, los formularios y el movimiento accesibles son importantes para todos sus usuarios, pero especialmente para aquellos con discapacidades. Asimismo, la jerarquía y el etiquetado del contenido son muy beneficiosos para que comprender y consumir contenido, pues para quienes usan dispositivos de asistencia, como lectores de pantalla, hacen una gran diferencia.

¿Qué tipos de tecnología de asistencia existen?

Existen tecnologías de asistencia como lectores de pantalla, software de ampliación de pantalla y seguimiento ocular, por lo que es importante que entiendas cómo funcionan para que las implementes de la mejor manera.

Aunque existan excelentes lectores de pantalla, software de ampliación de pantalla y software de entrada de pantalla, no debes descuidar la creación de un sitio web accesible, ya que aquél que no considera las WCAG genera una mala experiencia, incluso con el mejor lector de pantalla.

Ahora bien, ¿en qué consiste cada una? ¡Veamos!👇

• Software de ampliación de pantalla: tanto en dispositivos móviles como de escritorio, permite a los usuarios aumentar el tamaño de la fuente o simplemente hacer zoom en una página web o aplicación.
• Software de entrada de voz: traduce el dictado del usuario en palabras escritas. Es especialmente útil para usuarios con discapacidades para abrir y cerrar aplicaciones, enviar mensajes y escribir en documentos.
• Punteros de cabeza: son una combinación de hardware y software. Un usuario que generalmente no puede usar un mouse o un teclado tiene una banda o un casco con un puntero que apunta a una pantalla. A medida que su cabeza se mueve, también lo hace el punto o cursor en una pantalla, similar a usar un mouse físico.
• Seguimiento ocular: similar a los punteros de cabeza, solo requiere la cámara del teléfono o computadora portátil. Permite una navegación interpretando la mirada y parpadeos del usuario.

¿Sabías que parte de esta tecnología ahora es utilizada por todos los usuarios? Así es, herramientas como asistentes personales y software de entrada de voz fueron desarrollados originalmente para usuarios con discapacidades, pero hoy muchos las usan. De aquí la relevancia que han ganado.

¿En qué consisten los dispositivos de entrada alternativos?

No quiero terminar este artículo sin antes tocar este tema igual de importante. Así que te entregaré un poco más de información.

Aunque el reconocimiento de voz se puede utilizar mediante aplicaciones integradas en macOS, Windows, iOS o Android, hoy en día esto se hace en gran parte del lado del servidor. A medida que los chips se vuelven cada vez más rápidos, es posible hacer más y más, incluso sin conexión a Internet.

Lo bueno para los desarrolladores es que no necesitan crear su propio servicio de dictado para cada página web o aplicación, esto porque la mayoría de los usuarios ya tienen acceso a uno a través del sistema operativo que usan.

Por otra parte, el reconocimiento de voz también es excelente para interactuar con asistentes digitales en aplicaciones que pueden ayudar al usuario a navegar sin necesidad de interacción física. Por eso cada vez más empresas buscan integrar guías y otros servicios simples que se pueden usar con la voz del usuario en el sitio web, app o el servicio telefónico.

Un usuario puede abrir rápidamente su app bancaria, por ejemplo, para conocer su saldo actual o realizar una transacción usando solo su voz.

Si quieres saber cómo aprovecharlos mejor, te invito a probar distintos dispositivos de entrada para que tengas la oportunidad de experimentar de primera mano sus pros y contras, particularmente en un sitio web o app.

Considera todas las posibilidades en tu diseño

Si llegaste hasta aquí, te agradezco por leer mi artículo. Espero que te sea útil para establecer las bases de la accesibilidad UX y que pongas en práctica todas las recomendaciones al diseñar tu próximo proyecto.

Si tienes alguna pregunta, escríbeme a mi LinkedIn y conectemos.😁

¡Espero que nunca dejes de aprender!