12/09/2021

Guía para las pruebas de accesibilidad

COMPARTIR EN:

  • Linkedin Logo
  • Twitter Logo
  • Facebook Logo
  • Mail Logo

El objetivo de este post es hablar sobre accesibilidad y la importancia de realizar este tipo de pruebas en los sistemas, a su vez se mencionan y explican distintas herramientas y técnicas para poder llevarlas a cabo.

Cuando se habla de accesibilidad, ésta puede verse como la usabilidad para personas que se encuentran en situación de discapacidad, es decir, que un sistema sea posible de utilizar por cualquier persona sin importar en la situación que se encuentre.

 

Las personas en situación de discapacidad son aquellas que   presentan deficiencias en su salud física, visual, auditiva, del habla, cognitivas u otras, y que al interactuar con diversas barreras contextuales, presentan restricciones en su participación plena y activa en la sociedad.

Es necesario comprender que cualquier persona puede atravesar una situación de discapacidad, ya sea temporal o permanente, parcial o total.

Ejemplos de esto puede ser una persona que tras un accidente doméstico necesite utilizar temporalmente muletas para trasladarse; o una persona en situación de discapacidad visual que requiera de un lector de pantallas para interpretar adecuadamente un sistema.

 

Discapacidad permanente, temporal, situacional

 

Según un estudio del Instituto Nacional de Estadísticas, en Uruguay hay más de 500.000 personas que están atravesando una situación de discapacidad, casi  el 17% de la población Uruguaya.

A nivel mundial, más del 15% de la población (más de 1.000.000.000 personas), vive algún tipo de situación de discapacidad según la Organización Mundial de la Salud (OMS).

Como se puede observar, esto impacta sobre un público muy amplio, que tal vez no pueda acceder o utilizar adecuadamente un sistema porque no está diseñado desde la perspectiva de accesibilidad.

¿Qué son las pruebas de accesibilidad?

En pocas palabras, es aplicar procesos y técnicas de verificación a un producto de software para validar si este cumple o no con los requisitos y estándares de accesibilidad esperados.

Se puede entender que un sistema es accesible cuando está diseñado con el propósito de que todas las personas, sin importar la situación en la que se encuentren, puedan percibir, comprender, navegar e interactuar con él.

Este tipo de pruebas han tomado una gran relevancia en los últimos tiempos, dado que cada vez se utilizan más y más sistemas, tanto en el ámbito laboral como en las tareas cotidianas.

¿Qué son los estándares de accesibilidad?

Los estándares de accesibilidad, son lineamientos, reglas, controles y pautas de la industria que permiten comprender el grado de accesibilidad de un sistema. El estándar más utilizado en el mundo es el WCAG (Web Content Accessibility Guidelines) de la W3C (World Wide Web Consortium) la principal organización de estándares internacionales sin fines de lucro.

Además del estándar WCAG existen varios estándares y normas de accesibilidad que se utilizan en varias partes del mundo, como:

Ley de rehabilitación, sección 504 y sección 508: la sección 504 ayuda a proporcionar acceso a todas las personas en situación de discapacidad al lugar de trabajo, la educación y a otras organizaciones, y la sección 508 permite el acceso a la tecnología.

Ley de Estados Unidos con discapacidades (ADA): esta ley establece que todos los entes públicos, como escuelas y organizaciones, deben hacer que la tecnología sea accesible para todos. Esto incluye tanto sistemas accesibles como herramientas de asistencia.

Línea del tiempo WCAG

La WCAG es un estándar muy amplio que actualmente aplica para sistemas web y aplicaciones móviles,  el cual está constantemente en evolución.

Para entender y conocer más sobre su evolución, la primera versión de éste estándar (WCAG 1.0) surgió en mayo de 1999 con el fin de describir un principio general de diseño accesible. Luego, en diciembre de 2008 fue reemplazada por la versión WCAG 2.0 la cual cubre una amplia serie de recomendaciones para que el contenido web sea más accesible. En junio del 2018 se publicó la versión WCAG 2.1, que actualmente es la versión más estable.

En esta versión ya no solo se habla de contenidos web accesibles sino que también tienen en cuenta la accesibilidad en aplicaciones móviles.

Hoy en día, también se está trabajando en dos nuevos documentos. Por un lado, en la versión WCAG 2.2 donde se amplían las pautas de accesibilidad del contenido web 2.1.

Por otro lado, se encuentra en proceso el proyecto Silver (Ag) que a futuro sería la versión WCAG 3.0 que incluye pautas adicionales y diferentes mecanismos de puntuación, se espera que este proyecto sea el sucesor de la versión WCAG 2.2, pero no la sustituye ni será compatible con la WCAG 2.X, sino que será un conjunto de pautas alternativas.

 

Imagen de evolución de las pautas de accesibilidad de la WCAG

 

Estructura del estándar y niveles de conformidad

Para comprender sobre el estándar y su funcionamiento, las pautas actuales de accesibilidad de contenido web cuentan con cuatro principios de diseño (perceptible, operable, comprensible y robusto), repartidos en 13 lineamientos que evalúan distintas situaciones de discapacidad bajo 78 criterios. Estos  se agrupan en tres niveles de conformidad, que van desde el menos estricto A, medianamente estricto AA y al más estricto AAA.

 

Imagen explicativa de los criterios de conformidad A, AA y AAA

 

Los cuatro principios de diseño que se mencionan para que un contenido sea accesible son:

Perceptible: el contenido de un sitio web debe tener sentido desde la perspectiva de todos los usuarios.

Operable: un sitio es operativo cuando un usuario puede navegar por las páginas fácilmente.

Comprensible: todos los elementos de un sistema deben ser entendidos por cualquier persona, por lo que el lenguaje debe ser sencillo.

Robusto: el contenido del sitio debe ser compatible con cualquier tipo de tecnología y usuario.

Para comprender  mejor el alcance de la WCAG, estos lineamientos van desde situaciones muy técnicas y de muy bajo nivel, como por ejemplo que todas las imágenes en la web (Tags  en el código HTML) tengan el atributo alternativo (alt) para describir la imagen, a lineamientos de más alto nivel como por ejemplo, que todo el contenido multimedia contenga subtítulos y todos los audios su correspondiente traducción.

¿Qué son las herramientas de asistencia?

En el caso de que personas en situación de discapacidad física no puedan utilizar directamente un dispositivo, ya sea una computadora o un dispositivo móvil, necesitarán utilizar herramientas de asistencia que les ayuden a interactuar con los sistemas.

Algunas de las herramientas de asistencia son:

Teclado especial: especialmente diseñados para los usuarios que se encuentran en situación de discapacidad motriz.

Software de zoom de pantalla: desarrollado para ayudar a personas con baja visión, ampliando la pantalla y facilitando la lectura.

Lector de pantalla: este tipo de herramienta se utiliza para leer el texto que se muestra en pantalla.

Software de reconocimiento de voz: al reconocer la voz, cambia la palabra hablada a texto y funciona como una entrada para el sistema.

¿Cómo se llevan a cabo las pruebas de accesibilidad?

Las pruebas se realizan utilizando procedimientos y actividades que verifican si el sistema cumple o no con los estándares definidos.

Para ello se definen ciertos procedimientos que brindan una guía sobre cómo realizar estas pruebas.  Definen actividades y herramientas de apoyo que facilitan las tareas de verificación.

Herramientas y procedimientos para el test de accesibilidad

Ahora que se sabe que un sistema requiere ser accesible, veremos cómo se realizan las distintas pruebas mediante:

  1. Herramientas de pruebas de accesibilidad
  2. Pruebas de accesibilidad de usuario o manuales

Herramientas de pruebas de accesibilidad

Las herramientas de verificación o automáticas, son las que verifican los estándares de WCAG. Para realizar la verificación leen el código HTML de la aplicación web o móvil y rápidamente se obtiene un reporte en dónde se indican los lineamientos que se cumplen y los que no, basado en WCAG.

Es posible encontrar en el mercado muchas herramientas para evaluar la accesibilidad. En el siguiente link encontrarán una lista exhaustiva de herramientas.

En esta oportunidad presentaremos dos de ellas.

– Axe (Axe Accessibility) permite verificar que la estructura de la página web cumpla con los lineamientos del WCAG.

– CCA (Colour Contrast Analyzer) verifica el contraste de colores teniendo en cuenta los estándares mencionados.

Para comprender su funcionamiento, se presentan a continuación algunos breves ejemplos de su uso.

1. Axe (Axe DevTools)

Esta herramienta es de utilidad para inspeccionar la estructura de la página web y verificar si la misma cumple con todas las pautas de la WCAG y otros estándares existentes ya mencionados.

Por ejemplo, si se ejecutara Axe sobre una página web que no cumple con los lineamientos de accesibilidad relacionados con la estructura y orden de encabezados (headings), con esta herramienta es posible identificar estos aspectos rápidamente.

Para utilizarla en Google Chrome, simplemente se debe instalar la extensión desde el Chrome Web Store (link). Para ejecutarla se debe abrir la consola de desarrollador y seleccionar la pestaña “Axe DevTools”. La herramienta brinda distintas opciones de validación, es posible escanear y validar toda la página web o un elemento específico. Por ejemplo, si se selecciona la opción de validar toda una página, rápidamente se genera un reporte completo de todos los hallazgos de accesibilidad que contiene el sitio, categorizados en distintos niveles de criticidad.

Otro punto a destacar de Axe es que brinda una descripción del problema y sugerencias de cómo solucionar cada uno de estos errores, lo cual facilita mucho la comprensión y agiliza su corrección.

Ejemplo de prueba con la herramienta Axe

 

2. Colour Contrasr Analyser (CCA)

Las pruebas que se realizan utilizando la herramienta CCA son fundamentales para simular situaciones de personas con baja sensibilidad al contraste de colores. Esta condición puede presentarse en personas en situación de discapacidad visual como por ejemplo, algunas de las variantes del daltonismo. A su vez, este tipo de situación se vuelve más común en personas mayores de edad y puede verse empeorada con el pasar de los años.

El principal problema cuando se presentan colores con poco contraste es la dificultad en la navegación, lectura e interacción con el sistema, por lo que esta herramienta ayuda a verificar que haya suficiente contraste entre el color de frente (texto o imagen) y el color de fondo.

A modo de ejemplo, si se desea verificar el contraste de un botón en la web, basta con utilizar CCA para obtener el color de frente (el color del texto) y el color de fondo. CCA analizará automáticamente el ratio de contraste entre ambos colores.

Para utilizar la herramienta CCA luego de descargarla, la misma presenta diferentes maneras para seleccionar un color, en este caso se selecciona con el cuentagotas el color del primer plano y de la misma forma con el color de fondo. La herramienta inmediatamente muestra un resultado del contraste de color teniendo en cuenta los lineamientos de la WCAG.

Otra de las ventajas que tiene esta herramienta es que brinda una recomendación del ratio de contraste de color que debe de tener un texto según su tamaño.

Las recomendaciones que ofrece la herramienta son implementadas por las pautas de accesibilidad de la WCAG. Las mismas establecen 2 niveles de conformidad para este tipo de situación, contraste mínimo (Nivel AA) y contraste mejorado (Nivel AAA). El criterio de estas conformidades, establece que para el nivel AA un texto regular debe de tener un ratio de contraste de al menos 4.5 y para textos grandes un ratio de al menos 3.1, en este caso la WCAG se refiere a textos grandes a un tamaño de 18px o 14px en negrita.

Para nivel AAA, se exige un ratio de contraste de 7.1 para textos regulares, y de 4.5 para textos grandes.

Ejemplo de prueba con la herramienta CCA

Pruebas de accesibilidad de usuario (o manuales)

Para complementar las pruebas con herramientas de verificación, también se realizan pruebas de usuario o manuales que permiten enfocarse en el contenido y no tanto en la estructura de la web.

Por ejemplo, con las herramientas de verificación se asegura que todas las imágenes tengan el atributo alternativo (alt), pero con este tipo de pruebas se verifica que el texto alternativo esté acorde con la imagen que se visualiza.

Manzana

Manzana 2

La realización de este tipo de pruebas se establece según la situación de discapacidad./>

En este caso se plantean 5 categorías:

1. Pruebas de uso de colores
2.
Prueba de foco en los campos
3. Pruebas de navegación
4. Pruebas de “zooming”
5. Pruebas con lector de pantalla

1. Pruebas de uso de colores

El objetivo de estas pruebas es comprobar que el sistema no depende del uso de colores solamente para comprender lo que sucede con el mismo.

Por ejemplo, a continuación se presenta una situación en donde se compara la percepción de una persona con visión afectada (o en situación de daltonismo) con una sin daltonismo. Se observa cómo la persona con visión afectada no puede identificar si el ingreso de la información es correcta o no.

Ejemplo de una visión no afectada y visión afectada de un sistema que depende del uso del color

Una forma de solucionar esta situación es incorporando mensajes e iconos descriptivos, como se puede observar a continuación.

Ejemplo de una visión no afectada y visión afecta de un sistema con mensajes e iconos descriptivos

2. Prueba de foco en los campos

El objetivo de este tipo de pruebas es que las personas en situación de discapacidad motriz también puedan utilizar el sistema.

Las pruebas buscan verificar que el sistema tenga habilitado el indicador de enfoque de los navegadores y que esté contenido en todos los elementos de la web. De esta forma, el usuario podrá saber dónde se encuentra posicionado o que está seleccionado.

3. Pruebas de navegación

Este tipo de pruebas se realiza típicamente utilizando el teclado en lugar de interactuar con el ratón. Están relacionadas con las pruebas de foco de campos, ya que para realizarlas es necesario que los focos estén correctamente configurados para poder navegar con el teclado.

Al ejecutarlas se plantean una serie de preguntas:

Al navegar por la página utilizando la tecla “tab” para subir y “shift” +  “tab” para bajar, ¿éstas se ejecutan en orden?

¿Se puede navegar por toda la página de izquierda a derecha y de arriba hacia abajo accediendo a todas las secciones del sitio web?

¿Hay elementos o contenidos del sitio que no son alcanzados utilizando solo el teclado?

Este tipo de situaciones son las que se buscan validar al ejecutar las pruebas de navegación.

4. Pruebas de “zooming”

Son fundamentales para las personas que se encuentran en situación de baja visión. Este tipo de situación se vuelve cada día más común en personas de todo tipo de edades, por lo que se tornan cada vez más importantes.

La capacidad de hacer zoom no solo se encuentra en las recomendaciones de las pautas de accesibilidad WCAG, sino que también es una herramienta que simplifica la vida cotidiana de las personas.

A la hora de realizar este tipo de pruebas se comienza con una pregunta muy básica:

¿La aplicación se encuentra habilitada para utilizar la función del zoom?

En ocasiones, por temas técnicos o de diseño, no se encuentra habilitada la funcionalidad del zoom, dejando sin posibilidades de utilizarla a personas que puedan necesitarlo.

La segunda pregunta que debemos hacer es: ¿La aplicación funciona correctamente cuando se aplica el zoom?

Cuando la función del zoom se encuentra habilitada, es importante verificar que al aumentar el tamaño de la página, por ejemplo al 200%, es posible visualizar la información y operar el sistema correctamente.

Es común identificar problemas en este tipo de pruebas, porque existe información que se visualiza cortada, no se ajustan correctamente los elementos de la página y por lo tanto no se puede tener una buena interacción, entre otras situaciones que presentan problemas al usuario.

5. Pruebas utilizando el lector de pantalla

Por último, se encuentran las pruebas utilizando el lector de pantalla.

Esta herramienta convierte el código HTML en audio simplificado, es decir, lee y explica lo que se está visualizando en pantalla.

El objetivo principal de estas herramientas es ayudar a las personas en situación de discapacidad visual a navegar por cualquier sistema, independientemente de su situación.

Buscan verificar que el sistema sea accesible para las personas que navegan utilizando dicho lector de pantalla.

Existen muchos lectores de pantalla diferentes; algunos de ellos son aplicaciones de escritorio y otras extensiones de Chrome. Por ejemplo, NVDA, JAWS, Narrador de Windows, Screen Reader, entre otros.

Para realizar estas pruebas, primero se activa la herramienta y luego se navega manualmente por el sistema observando si lo que el lector interpreta es acorde con lo que se muestra en pantalla.

Por último, se hace un reporte detallando los errores de accesibilidad encontrados.

Existen distintos problemas que este tipo de herramientas permiten detectar; por ejemplo, si al pasar por un campo de ingreso en un formulario no se lee la etiqueta de dicho campo, esto presentaría un problema para una persona no vidente, ya que no podría comprender que dato deberá ingresar.

Ejemplos de accesibilidad de aplicaciones web

Ahora que se conoce lo que implica que una aplicación web sea accesible, se presentan algunos ejemplos que demuestran cuando un sistema cumple con los lineamientos de accesibilidad y cuando no los cumple.

1. Contraste de color adecuado

Las personas en situación de discapacidad visual pueden tener dificultades para leer sin un adecuado contraste con el color de fondo, ya sea un fondo simple o texto en imágenes.

Por ejemplo, los subtítulos de un video o texto impreso en una imagen.

Ejemplos de tipos de imágenes difíciles y fáciles de leer

2. Proporcionar etiquetas descriptivas para los campos de un formulario

Es común que se implementen formularios dónde las etiquetas se encuentran embebidas dentro de cada campo del formulario. Lo mejor es no hacerlo de esta forma, ya que los lectores de pantalla pueden pasar por alto estas descripciones. Además, los usuarios en situación de discapacidad cognitiva pueden perder la intención o referencia del campo.

Este es un ejemplo que no sigue las buenas prácticas:

Ejemplo incorrecto de utilización de etiquetas de los campos del formulario

Se recomienda implementarlo de la siguiente forma:

Ejemplo correcto de utilización de etiquetas de los campos del formulario

3. Títulos y espacios simples

Un buen diseño con una simple jerarquía de información ayuda a comprender la relación de los títulos con sus respectivos textos, espacios y ubicación de elementos. Además reduce el desorden y hace que el contenido sea más accesible.

Ejemplos de encabezados y espacios

4. Alternativas para el consumo de medios

Se recomienda disponibilizar el mismo contenido en diferentes formatos, ofreciendo a las personas en situación de discapacidad distintas formas de acceder al contenido.

A continuación se observa como se presenta un video y además el audio se encuentra transcripto para poder leerlo.

Ejemplo de enlaces a transcripciones y alternativas de audio

Conclusiones

La accesibilidad en los productos de software es un atributo que no se debe dejar de lado, ya que puede impactar en una gran cantidad de usuarios. Dependiendo de la situación de discapacidad en la que se encuentre cada persona, tendrá mayor o menor facilidad para operar el software, de acuerdo al grado de adopción de los lineamientos establecidos por estándares y buenas prácticas.

Como ventaja competitiva es importante pensar en la accesibilidad de los sistemas, ya que no solo aumenta la participación de usuarios, sino que a su vez mejora la capacidad de mantenimiento y eficiencia, satisface los requisitos legales existentes y futuros de diferentes países, por lo que también ayuda a la internacionalización.

Los estándares de accesibilidad como la WCAG proveen un excelente marco de referencia y buenas prácticas para hacer accesible los sistemas de información, y brindan una excelente guía para comenzar a transitar el camino hacia las pruebas de accesibilidad. A su vez, gracias a los tres niveles de conformidad del estándar, es posible medir el estado actual del sistema y planificar acciones para alcanzar nuevos niveles de manera incremental y con visión a futuro.

Existen distintas herramientas de soporte para la ejecución de pruebas de accesibilidad, herramientas como Axe, CCA, entre otras. Brindan muy buena capacidad de análisis que permite determinar rápidamente el estado general de los sistemas en términos de accesibilidad y brindan recomendaciones para la corrección de los errores detectados.

Complementando a estas herramientas, es importante considerar actividades de verificación y validación manuales, que permitan comprender otros aspectos de la accesibilidad que no se pueden obtener a través de los resultados de las herramientas.

Aplicando una estrategia que combina herramientas y pruebas manuales, es posible conocer el nivel de accesibilidad que brinda el sistema y detectar los puntos de mejora para alcanzar mayor madurez.