Nueva generación de herramientas automáticas de validación de la accesibilidad gracias a la inteligencia artificial

Las herramientas automáticas para la validación de barreras de accesibilidad, aunque conocidas sus limitaciones, son indispensables para las personas que diseñan y desarrollan interfaces digitales. Es conocido que la mayoría de estas barreras sólo pueden evaluar menos del 40% de los criterios de éxito de WCAG y que, en su evaluación, tampoco hay una precisión demasiado elevada.

La Inteligencia Artificial al rescate

Gracias a los últimos avances en la creación de modelos expertos con IA hay empresas como Evinced, que apuestan por el desarrollo de mejores herramientas, hoy podemos decir que tenemos a nuestra disposición la siguiente generación de las herramientas automáticas para la validación de la accesibilidad.

En algunos casos la mejora parece bastante evidente como sucede con Site scanner, una herramienta para analizar las barreras de accesibilidad en un sitio web de forma global ofreciendo resultados agrupados por componentes o incluso zonas que requieran de un usuario y contraseña. Lo interesante de esta herramienta es que, según sus creadores, pueden validar el 80% de los criterios de éxito y los resultados son más fiables. Por ejemplo, que una imagen tenga una cadena de texto ya no es suficiente para validar ese criterio de éxito, la descripción también debe ser algo comprensible y no el nombre del fichero del archivo de imagen.

Otra diferencia importante es que pueden analizar el contenido y la funcionalidad del renderizado del DOM (Document Object Model) por lo que algunos problemas de accesibilidad no visibles para Wave o AXE debido al uso de ReactJS o Angular si son detectados por esta nueva generación de herramientas.

La accesibilidad no sólo es Web

Las Web Content Accessibility Guidelines (WCAG) también se aplican a las aplicaciones de los smartphones pero las herramientas de automatización de experiencias son pocas y casi ninguna incluye alguna herramienta de validación de la accesibilidad de forma fiable ya que, en muchos casos, el acceso al dispositivo móvil se realiza mediante capturas de pantalla, perdiendo el acceso a la capa semántica de las aplicaciones móviles.

  El Automation SDK de Evinced se integra con los tests automatizados de Selenium, Cypress, Playwright, XCUITest o Appium para dar ese extra para poder evaluar las posibles barreras de accesibilidad en una web o una app móvil.

Accesibilidad desde el diseño

Los diseñadores de contenidos o de experiencia de usuario, en muchos casos, utilizan aplicaciones como Figma para hacer ese diseño de experiencia de una web o una app móvil. Aunque este tipo de herramienta ofrecen algunos plugins relacionados con la accesibilidad, todos ellos son de ejecución manual y, cuando el frame de diseño de un proyecto es demasiado grande, hay muchas posibilidades de que haya componentes o flujos que se hayan quedado sin evaluar.

Con el plugin de Design Assistant para Figma se promete una evaluación automatizada de todos los elementos del proyecto y aplicando los evaluadores mejorados con IA se ofrece la detección y corrección de problemas de contraste de color, problemas de foco y zonas táctiles, flujos ARIA y otras validaciones de criterios de éxito de WCAG.

Además este plugin ofrece la posibilidad de incluir notas para los desarrolladores para que durante la implementación del diseño se incluyan las soluciones a las barreras de accesibilidad y ejemplos para diseñar tests unitarios.

Los desarrolladores también tienen más herramientas

Las herramientas de desarrollo de Google Chrome pueden mejorarse gracias a Debugger, una extensión para este navegador que usando IA mejora la detección de errores de contraste de color o de navegación por teclado y también mejora la detección de problemas con etiquetas de accesibilidad. Además proporciona ejemplos para solucionar los problemas detectados.

En el apartado para el CI/CD (Integración continua y distribución continua) Evinced ofrece Unit Tester, una herramienta automática para crear tests para la validación de criterios de éxito WCAG 2.1 nivel AA para problemas de roles, teclado y lectores de pantalla.

Se puede integrar de forma sencilla en los pipelines de Jenkins, Travis o CircleCI.

Conclusiones y realidades

Esta empresa ofrece otras herramientas para el apoyo de diseñadores, testers, desarrolladores y analistas. Todo enfocado en la detección y solución de barreras de accesibilidad.

Como con cualquier solución automática, no reemplaza la evaluación manual ni pruebas con usuarios reales con discapacidad. La experiencia final de un usuario es la única prueba que validará la accesibilidad al 100%. Estas herramientas ayudan a los profesionales a poder mejorar su trabajo y, de forma voluntaria o involuntaria, hacer que todo sea más accesible.

El desconocimiento de la accesibilidad es el primer problema que tiene el mundo de la accesibilidad digital. Muchos profesionales del diseño o el desarrollo usan sus herramientas de trabajo sin molestarse en comprender que hay elementos técnicos que se salen de su tecnología de trabajo. Gracias a estas herramientas esos profesionales tienen un contacto con la accesibilidad de forma más cómoda, guiada y no les exige un esfuerzo inicial de aprendizaje. Lo toman como algo a solucionar en su trabajo y siguen los consejos e indicaciones de la IA para solucionar ese problema de accesibilidad.

Estas herramientas siguen en desarrollo y están abiertas a mejora ya que todavía hay casos complejos de accesibilidad que la IA no sabe resolver. Además, por ahora, sólo se da soporte para contenidos en inglés.

Lo interesante de este conjunto de herramientas es que el enfoque se aplica a todos los sectores relacionados con un proyecto web o una app móvil. La responsabilidad de la accesibilidad no recae en un único profesional. Con estas herramientas todos los profesionales, desde el diseñador al desarrollador y el tester tienen contacto con la accesibilidad. Esto maximiza la posibilidad de que la mayor cantidad posible de barreras de accesibilidad sean detectadas y solucionadas antes de que el producto sea puesto a disposición de los usuarios. Un enfoque interesante y muy alineado con el concepto de que la accesibilidad debe aplicarse a todas las etapas de un proyecto.

Esperemos que pronto veamos que este tipo de herramientas automáticas mejoran el trabajo de muchos profesionales y facilitan que la accesibilidad sea parte real de los proyectos.

Code File Catcher: una herramienta para dar contexto a tus consultas a la IA

Muchas veces, cuando queremos pedir ayuda a una IA para depurar un fallo, revisar una estructura o mejorar un código, necesitamos enviar más que una simple función. Necesitamos compartir el contexto completo del proyecto: otros archivos, dependencias, configuraciones, etc.

Los entornos de desarrollo incluyen un navegador de archivos para moverte entre los distintos ficheros de un proyecto pero, en la mayoría de los casos, el navegador de archivos incluye alguna barrera de dificultad o la cantidad de ficheros es bastante grande lo que dificulta la tarea a los desarrolladores con discapacidad o con poca destreza a la hora de moverse en su entorno de desarrollo. Con Code File Catcher puedes hacer eso fácilmente.

Code File Catcher es una aplicación sencilla pero poderosa que te permite seleccionar una carpeta de tu disco, elegir los tipos de archivos de código que quieres incluir, y obtener automáticamente un texto con todo el contenido de esos archivos perfectamente organizado y listo para copiar o exportar.

Esto resulta especialmente útil si estás trabajando con asistentes de inteligencia artificial como ChatGPT, Gemini o similares, que requieren el contexto completo del código para ofrecer respuestas precisas y útiles.

Entre las distintas operaciones que puede realizar actualmente están: recopila todos los archivos fuente relevantes de un proyecto o carpeta, muestra un texto estructurado con el nombre del archivo y su contenido y puede copiar ese texto al portapapeles o exportarlo como archivo `.txt`.

El proyecto está disponible bajo una licencia libre en GitHub. Puedes consultarlo, usarlo, modificarlo y, si lo deseas, contribuir con mejoras o sugerencias. El proyecto está abierto a colaboraciones, especialmente si pueden ayudar a que la herramienta sea aún más útil para más personas.

Puedes encontrar el código del proyecto y participar en él en el repositorio de Code File Catcher en Github.

Cómo Utilizar Contrast Checker para Validar la accesibilidad en las combinaciones de colores

Una de las barreras de accesibilidad más habituales en contenidos de la Web es el bajo contraste de color entre el texto y el fondo.
Para solucionar estas barreras de accesibilidad existen herramientas como el Contrast Checker de WebAIM que permite comprobar si las combinaciones de colores cumplen con los estándares de accesibilidad establecidos por las Web Content Accessibility Guidelines (WCAG).

¿Qué es Contrast checker?

Contrast Checker es una herramienta en línea gratuita proporcionada por WebAIM (Web Accessibility in Mind) que permite verificar si una combinación de colores cumple con los niveles de contraste requeridos por las WCAG buscando que los textos sean legibles para personas con baja visión y daltonismo.

Este verificador evalúa la diferencia entre el color de primer plano (texto) y el color de fondo para determinar si cumple con los niveles de conformidad de AA y AAA definidos en las WCAG.

¿Cómo se utiliza Contrast checker?

La herramienta muestra un formulario con dos campos principales que representan el color del texto y el color de fondo. Estos colores son identificados como Foreground Color para el color en primer plano y background color para el color de fondo.

Se puede introducir el código hexadecimal de un color o utilizar la herramienta de selector de color para buscar el color en la paleta de colores del sistema.

Una vez ingresados los colores, la herramienta calculará automáticamente el ratio de contraste y mostrará los resultados en diferentes categorías.

  • Small Text (Texto pequeño): indica si la combinación de colores pasa los estándares para texto de tamaño normal.
  • Large Text (Texto grande): evalúa si la combinación cumple para textos de al menos 18px en regular o 14px en negrita.
  • Graphics and UI Components: verifica si los colores cumplen para elementos como botones o iconos.

El ratio de contraste se expresa como un número (ejemplo: 4.5:1). Para que la combinación de colores sea accesible, debe cumplir al menos con estos valores:

  • AA (Mínimo) ≥ 4.5:1 ≥ 3:1
  • AAA (Óptimo) ≥ 7:1 ≥ 4.5:1

Si la combinación de colores no pasa la prueba, se mostrará en rojo junto con un mensaje indicando que el contraste es insuficiente.

Detección de barreras de accesibilidad con TAW

El Test de Accesibilidad Web (TAW) es una herramienta en línea que ayuda a evaluar la accesibilidad de sitios web según las directrices del estándar WCAG (Web Content Accessibility Guidelines). Diseñada para identificar problemas de accesibilidad, TAW es especialmente útil para desarrolladores, diseñadores y responsables de contenido que desean crear experiencias inclusivas para todos los usuarios, incluidas personas con discapacidad.

Al igual que Wave, TAW es una herramienta de validación automática de barreras de accesibilidad web.

Esta herramienta evalúa criterios como:
• Texto alternativo en imágenes.
• Contraste de colores.
• Navegación mediante teclado.
• Uso correcto de etiquetas HTML y roles ARIA.

¿Cómo utilizar TAW?

Para utilizar TAW debemos visitar su sitio web oficial. Allí encontraremos un formulario en el que introducir la URL de la página que queremos revisar. Además, dentro de las opciones podremos elegir entre nivel A, nivel AA y nivel AAA. Tras introducir la dirección de la página que queremos evaluar debemos pulsar el botón analizar.

Tras unos segundos se nos cargará la página de resultados.

A diferencia de Wave y otras herramientas automáticas TAW no dispone de widget para revisar páginas en local. Además TAW utiliza WCAG 2.1 frente a otras herramientas que poco a poco van incorporando WCAG 2.2.

Comparando herramientas

Si realizamos una evaluación con TAW y Wave podremos comprobar que los informes de resultados son parecidos pero no exactamente iguales. Esto se debe a que los algoritmos de detección de barreras utilizados por TAW y Wave no son iguales aunque utilicen los criterios e interpretaciones definidos en WCAG.

TAW proporciona la información en español y portugués por lo que se hace más sencillo de consultar para personas que desarrollen o diseñen en estas lenguas.

Lo ideal es poder utilizar estas dos herramientas para procurar que todas las barreras posibles sean solucionadas. Siempre recordando que las herramientas automáticas de validación de barreras de accesibilidad no son 100% efectivas ni fiables.

Detección de barreras de accesibilidad con Wave

WAVE (Web Accessibility Evaluation Tool) es una herramienta en línea gratuita desarrollada por WebAIM (Web Accessibility In Mind). Su propósito es ayudar a identificar errores y áreas de mejora en sitios web para garantizar el cumplimiento de las directrices de accesibilidad, como las WCAG (Web Content Accessibility Guidelines). WAVE no solo resalta los problemas, sino que también proporciona sugerencias para corregirlos.

El acceso a WAVE es sencillo: basta con visitar la página de Wave, ingresar la URL del sitio web a evaluar, y recibir un análisis detallado sobre elementos clave de accesibilidad.

También podemos instalar el Widget de Wave para Chrome o Firefox. Esto nos permitirá evaluar contenido en local por lo que resulta indispensable para desarrolladores que están trabajando en contenidos aún no publicados.

Wave es una herramienta ideal para conocer el estado de accesibilidad de una página web y aunque la información que nos ofrece es muy valiosa no hay que olvidar los límites y realidades de las herramientas automáticas.

Detección y validación de barreras de accesibilidad con herramientas automáticas

La accesibilidad web es fundamental para garantizar que todas las personas, independientemente de sus habilidades o discapacidades, puedan acceder y utilizar los contenidos en línea.
Para los desarrolladores y diseñadores las herramientas automáticas de validación de la accesibilidad ofrecen una manera eficiente de identificar problemas de accesibilidad en sus sitios web. Sin embargo, este tipo de herramientas automáticas poseen ventajas y limitaciones que deben ser conocidas por estos diseñadores y desarrolladores.

Algunas cuestiones, como el significado contextual del contenido, la calidad de los textos alternativos o la utilidad de la navegación, requieren juicio humano. Esto implica que algunos criterios de éxito de WCAG deben ser validados por una persona ya que hoy por hoy las herramientas automáticas carecen del conocimiento y la identificación del contexto de un contenido para poder identificar si existe una barrera de accesibilidad o no. Por ejemplo, una herramienta automática puede dar por válida la siguiente descripción para una imagen que se utiliza como botón cancelar: ‘iconCancel12.jpg’, o indicar que hay problemas por usar ARIA aunque se esté utilizando de forma apropiada.

Estas herramientas tampoco pueden apreciar posibles problemas de usabilidad o inconsistencias entre los mecanismos de navegación de varias páginas.

Unido a todo esto se ha de indicar que muchas de las herramientas automáticas de validación de barreras de accesibilidad no detectan los cambios dinámicos realizados mediante Javascript en los contenidos por lo que en muchos casos de webApps desarrolladas con ReactJS o Angular pueden incorporar multitud de barreras de accesibilidad indetectables para este tipo de herramientas.

Los resultados de las evaluaciones realizadas por estas herramientas necesitan ser interpretados y aplicados por personas con conocimientos básicos en accesibilidad y desarrollo web. Sin este conocimiento, las correcciones pueden no ser efectivas o incluso empeorar la accesibilidad. Con esto se indica que es falsa la afirmación de que gracias a estas herramientas el desarrollador no requiere ningún conocimiento de accesibilidad web.

A pesar de todo esto las herramientas automáticas de validación de la accesibilidad son necesarias para ayudar a la detección temprana de muchas barreras de accesibilidad y deberían ser de uso obligatorio para los desarrolladores y diseñadores de contenido.