6 maneras simples de mejorar la accesibilidad web

Prácticamente todo el mundo sabe que la experiencia del usuario (UX) es una consideración importante al crear un sitio web o una aplicación. Nadie quiere usar una aplicación poco intuitiva con una interfaz de usuario (UI) terrible.

¿Pero qué pasa con la experiencia del usuario de las personas con discapacidades?

Desde principios de la década de 2000, el movimiento de accesibilidad web ha abogado por un diseño web que considere las necesidades de las personas con discapacidades. Algunas empresas han sido llevadas a los tribunales por mantener sitios web inaccesibles, con demandantes citando disposiciones de la Ley de Estadounidenses con Discapacidades.

La accesibilidad web está creciendo como un campo de estudio, y los profesionales están tomando nota. La accesibilidad web se está volviendo más importante para las empresas y los desarrolladores, y algunos diseñadores de UX han comenzado a incorporar el diseño accesible en su trabajo.

Sin embargo, la accesibilidad web y sus prácticas siguen siendo un misterio para la mayoría de las personas.

¿Cuáles son las prácticas de accesibilidad? ¿Cómo se construye un sitio web teniendo en cuenta la accesibilidad? ¿Qué tecnologías utilizan las personas con discapacidades para acceder a Internet y cómo podemos construir sitios web teniendo en cuenta esas tecnologías?

Cómo mejorar la accesibilidad web

Antes de trabajar en la accesibilidad de un sitio web, primero considera los tipos de discapacidad para los que estás optimizando. Normalmente, las consideraciones de accesibilidad están destinadas a abordar las necesidades de aquellos con lo siguiente:

• Discapacidades visuales (baja visión, ceguera parcial o total, daltonismo)
• Discapacidades auditivas (sordera, dificultades auditivas, tinnitus, hiperacusia)
• Discapacidades motoras o de destreza (parálisis, parálisis cerebral, lesiones por esfuerzo repetitivo como el síndrome del túnel carpiano)
• Discapacidades cognitivas que afectan las habilidades de resolución de problemas, memoria y atención, discapacidades del desarrollo o dificultades de aprendizaje como la dislexia

Hay una creciente conciencia cultural sobre la accesibilidad web. Sin embargo, todavía hay mucha ambigüedad en torno a la tecnología asistiva que ayuda a las personas con discapacidades a usar Internet.

Entender estas herramientas es clave para implementar estrategias de accesibilidad exitosas. ¿Cómo puedes crear prácticas efectivas si no conoces la tecnología alrededor de la cual estás construyendo e integrando?

En algunos casos, las personas con discapacidades no requieren ningún software o hardware específico para acceder efectivamente a Internet. En cambio, para que se satisfagan sus necesidades de accesibilidad, necesitan que los propietarios de sitios web o creadores de contenido proporcionen herramientas u otras consideraciones.

Tipos de tecnología asistiva

Tecnología asistiva es el término general para dispositivos y herramientas asistivas, adaptativas y rehabilitativas utilizadas por personas con discapacidades. En el contexto de la accesibilidad web, la tecnología asistiva es el software y hardware utilizado por personas con discapacidades para acceder y usar Internet.

Implementar la metodología de accesibilidad web se vuelve más fácil si consideras las necesidades específicas de las personas con discapacidades. No hay soluciones universales, y se deben tomar diferentes enfoques para proporcionar una experiencia de usuario óptima dependiendo de la discapacidad.

Tecnología asistiva para personas con discapacidades visuales

Las personas con discapacidades visuales como baja visión o ceguera pueden requerir software de lector de pantalla. El software de lector de pantalla traduce las pantallas de los sitios web en información no visual a través de convertidores de texto a voz, señales sonoras y pantallas Braille refrescables. El software de ampliación de pantalla es, como su nombre indica, un programa independiente que amplía las pantallas digitales para proporcionar una visualización más fácil para personas con baja visión.

Tecnología asistiva para personas con discapacidades motoras

Las discapacidades motoras o de destreza implican la pérdida parcial o total de la función de una parte del cuerpo, y pueden incluir la pérdida del control motor grueso o fino de una persona. Esto puede incluir parálisis, parálisis cerebral y lesiones por esfuerzo repetitivo como el síndrome del túnel carpiano.

Las personas con discapacidades motoras o de destreza pueden requerir un dispositivo de entrada alternativo, en lugar de un teclado y ratón tradicionales, para usar y navegar por una computadora. Los dispositivos de entrada alternativos incluyen dispositivos de seguimiento de movimiento o de ojos, punteros de cabeza y dispositivos de entrada de un solo interruptor. Más adelante, discutiremos las opciones de diseño que los propietarios de sitios web pueden hacer para facilitar la experiencia de las personas que utilizan estos dispositivos. 

Tecnología asistiva para personas con discapacidades cognitivas o dificultades de aprendizaje

A diferencia de las discapacidades visuales o motoras, las discapacidades cognitivas o de aprendizaje no suelen tenerse en cuenta en las técnicas y guías de accesibilidad web. Mientras que la mayoría de las herramientas para ayudar a las personas con discapacidades cognitivas o de aprendizaje se construyen del lado del desarrollador o diseñador web, las herramientas existentes pueden ayudar al desarrollo de tales programas personalizados.

Lectores de texto son programas de software que repiten el texto en una pantalla con una voz sintetizada. Para mayor claridad, algunas opciones resaltan la palabra que se está pronunciando. Sin embargo, los lectores de texto generalmente no son capaces de leer texto complicado (como menús) o elementos no textuales (como imágenes).

1. Usar correctamente el marcado HTML

Ya sea que un diseñador web ingrese manualmente HTML o no, es importante colocar los encabezados en un orden que tenga sentido. Los lectores de pantalla que articulan la información en una página web usan los encabezados como puntos de referencia.

Cortesía de Prototypr.io

Si el HTML de una página está desordenado o los encabezados no se usan correctamente, los usuarios que acceden a un sitio web con un lector de pantalla tendrán dificultades para navegar.

El elemento H1 debe usarse para las ideas principales de una página con encabezados subsecuentes (H2, H3, etc.) siguiendo un patrón lógico basado en temas. Esto ayuda a los usuarios a entender la página y la relación entre los elementos en ella.

Los enlaces también deben describir con precisión la página a la que los usuarios serán llevados. Los enlaces que simplemente dicen "Haga clic aquí" o "Leer más" no dicen nada a los usuarios sobre el contenido de la página web.

2. Incluir texto alternativo de imagen conciso y descriptivo

El texto alternativo a menudo se olvida cuando se agregan imágenes a las páginas web. Después de todo, la mayoría de las personas solo usan texto alternativo cuando buscan imágenes en un motor de búsqueda o realizan una búsqueda inversa de imágenes.

Pero para las personas que usan lectores de pantalla, el texto alternativo es todo lo que tienen para aprender sobre una imagen mostrada. Los usuarios pueden confundirse si el texto alternativo de una imagen no se cambia o no es necesariamente representativo de lo que la imagen muestra. Esto es especialmente perjudicial si la imagen es crítica para entender la página web.

Con eso en mente, es una buena práctica no usar imágenes como elementos de navegación o como el único contenido en un blog. Al escribir texto alternativo, asegúrate de que la descripción sea precisa pero no demasiado extensa. Esto también ayudará con la optimización para motores de búsqueda (SEO). Emplear HTML limpio y reflexivo ayuda tanto al SEO como a la accesibilidad web, por lo que puedes matar dos pájaros de un tiro.

3. Considerar opciones de CAPTCHA

Un completamente automatizado prueba de Turing pública para distinguir computadoras y humanos aparte, a menudo abreviado como CAPTCHA, es una herramienta acertadamente — si terriblemente — nombrada. Los CAPTCHAs son particularmente comunes en las pantallas de inicio de sesión para verificar que la persona que inicia sesión es de hecho un humano y no un bot de spam.

Los CAPTCHAs a menudo presentan a los usuarios una imagen de letras distorsionadas que deben escribirse en un cuadro de texto antes de permitir que los usuarios avancen. Por útiles que sean para prevenir el spam, plantean una serie de problemas para las personas con necesidades de accesibilidad.

Los CAPTCHAs pueden ser especialmente confusos para aquellos con dislexia o algunas dificultades cognitivas. Algunas imágenes de CAPTCHA no consideran a las personas con daltonismo, que pueden no ser capaces de diferenciar las letras del fondo. Las imágenes de CAPTCHA también son ilegibles por los lectores de pantalla, pero agregar la respuesta correcta al texto alternativo en la página podría derrotar el propósito de la prueba.

Si los CAPTCHAs son imprescindibles para tu sitio web, asegúrate de que tengan opciones accesibles como pruebas basadas en audio o reCAPTCHA v3 de Google, que permite a los usuarios pasar una prueba CAPTCHA simplemente haciendo clic en un cuadro.

4. Hacer accesible el contenido de video

Si bien las personas con discapacidad auditiva pueden usar Internet con pocas dificultades, los propietarios de sitios web deben considerar los obstáculos que esos usuarios encuentran. Por ejemplo, si un sitio web proporciona señales sonoras sin señales visuales acompañantes, los usuarios con discapacidad auditiva no podrán interactuar con el sitio.

Uno de los obstáculos más notables para las personas con discapacidad auditiva es la falta de subtítulos cerrados. Los videos sin subtítulos cerrados pueden ser completamente inaccesibles para aquellos con una deficiencia auditiva. Para aquellos que suben un video a una plataforma como YouTube o Facebook, puede ser fácil confiar en los subtítulos generados automáticamente, pero a menudo son inexactos y no proporcionan subtítulos contextuales para música o efectos de sonido.

Descripciones de audio también ayudan a los usuarios con discapacidad visual a seguir los videos sin audio y a mostrar personas que no tienen roles hablados. También es clave agregar transcripciones de videos para aquellos que usan lectores de pantalla o de texto.

5. Decidir sobre opciones de color accesibles

Normalmente, las opciones de color para sitios web involucran lo que está más de moda en UX. Esto generalmente significa una gran cantidad de azul no ofensivo, definitivamente original. Pero el color es una consideración importante en la accesibilidad web. En particular, los diseñadores pueden querer considerar las necesidades de los usuarios con daltonismo.

Para ayudarme a demostrar, echa un vistazo a esta imagen de Monty, el único de G2, disfrutando del horizonte de Chicago.

Los usuarios con daltonismo rojo-verde (deuteranopía) tendrán dificultad para distinguir rojos, verdes, marrones y naranjas. Si un diseñador decide poner texto rojo sobre un fondo marrón, los usuarios daltónicos probablemente no podrán leerlo.

Y la deuteranopía es solo un tipo de daltonismo. Aunque pueda parecer difícil tener en cuenta todos los tipos de daltonismo que existen, hay muchas herramientas gratuitas disponibles para que los creadores de sitios web prueben los colores en una página web. Otras herramientas pueden generar paletas de colores accesibles que pueden agilizar la toma de decisiones.

6. Asegurarse de que el sitio web pueda ser navegado usando solo el teclado

Para las personas que usan dispositivos de entrada alternativos, navegar por sitios web con desplazamiento infinito y diseños asimétricos puede ser una pesadilla. Aunque estas opciones de diseño están de moda, son increíblemente inaccesibles para aquellos que dependen de dispositivos de entrada alternativos o usan solo un teclado.

Las opciones de diseño de moda incluyen barras de navegación u opciones que solo aparecen cuando un cursor se desplaza sobre un determinado botón. A menudo, resaltar un botón desplegable designado usando el teclado aún no es suficiente para activar el desplegable. Esto significa que los usuarios que solo usan el teclado no tienen forma de acceder a esas opciones de página web.

Agregar enlaces de salto al principio de una página web también puede permitir a los usuarios que solo usan el teclado y a los usuarios con lectores de pantalla saltar contenido sin navegar por una página web completa cada vez.

Haciendo tu sitio web más accesible

Agregar mejoras de accesibilidad no siempre es fácil, especialmente cuando se equilibran con prácticas de diseño modernas y técnicas de UX para personas sin discapacidades. Sin embargo, UX y accesibilidad web ciertamente no son incompatibles.

Los diseñadores tienen muchas opciones creativas para proporcionar excelentes experiencias a los usuarios con o sin discapacidades. Siempre que la accesibilidad sea una consideración desde el principio, implementar prácticas de accesibilidad puede ser fácil y no tiene que ser perjudicial para el proceso general de diseño de UX.