Una guía completa de herramientas de accesibilidad

Aprender a crear sitios web accesibles puede ser una tarea abrumadora para aquellos que recién comienzan a implementar prácticas accesibles. Hemos reunido una amplia gama de herramientas de accesibilidad, que van desde marcadores de un solo uso hasta aplicaciones completas, para ayudarlo a comenzar a crear sitios web más accesibles.

ARIA

La encuesta WebAIM Million encontró que las páginas de inicio con ARIA presente promediaron un 41 % más de errores detectables que aquellas sin ARIA. ARIA es una herramienta esencial para crear aplicaciones web complejas, pero la especificación es estricta y puede ser difícil de depurar para aquellos que no usan tecnología de asistencia con regularidad. Las herramientas pueden ayudarnos a garantizar que estamos usando ARIA correctamente y no introduciendo más errores en nuestras aplicaciones.

TPGi ha creado un bookmarklet WAI-ARIA que escanea su página para asegurarse de que todos los elementos y sus roles y atributos ARIA sean válidos. Al activar el bookmarklet, la página se escanea en busca de errores y se abrirá una nueva pestaña con los resultados. Los resultados incluyen el número total de roles válidos, cualquier error ARIA detectado y fragmentos de código de dónde se encontraron los errores para que pueda depurar fácilmente su página.

Una cosa que no se probó explícitamente en el bookmarklet anterior es la presencia de roles ARIA duplicados. Ciertos roles destacados tienen nombres que parecen aplicarse a varios elementos, pero solo deben usarse una vez por página, como banner o contentinfo . Adrian Roselli ha creado un bookmarklet simple basado en CSS para verificar si alguno de estos roles ARIA se ha duplicado. Activar el bookmarklet agregará un contorno rojo a cualquier elemento ofensivo.

NerdeRegion es una extensión de Chrome que registra toda la salida de cualquier región de aria-live. ¿No puede entender por qué su lector de pantalla anuncia algo inesperado? NerdeRegion puede permitirle realizar un seguimiento de los anuncios con marca de tiempo y el elemento de origen del que se originan, todo dentro de un panel en DevTools. Dado que puede haber errores e incoherencias en la forma en que se anuncian las regiones de aria-live con diferentes lectores de pantalla, NerdeRegion puede ser una gran herramienta para averiguar si un problema es potencialmente causado por su código o por la combinación de dispositivos.

Herramientas de prueba automática

El desarrollador o el probador pueden usar esta clase de herramientas para ejecutar pruebas automatizadas en la salida de su código, detectando errores que pueden no parecer obvios en el código fuente. Hay muchos servicios pagos de alta calidad y otras herramientas más allá de lo que hemos mencionado aquí, pero nos hemos centrado en herramientas con ofertas gratuitas completas para reducir las barreras de entrada. Todas las herramientas enumeradas se pueden ejecutar en páginas que no están en Internet pública, lo que les permite incorporarse más fácilmente en un flujo de desarrollo. Es importante tener en cuenta que las pruebas de accesibilidad son complicadas y siempre requieren pruebas manuales para comprender el contexto completo del sitio, pero estas herramientas de prueba automatizadas pueden brindarle una sólida ventaja.

Muchas herramientas usan núcleo de hacha debajo del capó, por lo que puede ser redundante usar una combinación de herramientas. En última instancia, el tipo de herramienta que elija depende más del tipo de interfaz de usuario que prefiera y del nivel de exhaustividad de los resultados. Por ejemplo, Lighthouse, la herramienta integrada en Google Chrome, utiliza una selección parcial de reglas de núcleo axe, por lo que si logra obtener un escaneo limpio con axe DevTools, no debería necesitar ejecutar un escaneo Lighthouse también.

Axe DevTools está disponible como una extensión de Chrome o una extensión de Firefox y aparece como un panel en las herramientas para desarrolladores. Puede probar una página completa o solo parte de una página, y todos los problemas detectados se ordenan por gravedad y vienen con fragmentos de código para facilitar la depuración. Axe también le permite detectar más errores que otras herramientas automatizadas con su función de pruebas guiadas inteligentes. Las pruebas guiadas inteligentes identifican áreas para probar y hacer todo el trabajo pesado posible, antes de hacer preguntas al probador para generar un resultado. Axe también le permite guardar y exportar resultados, lo cual es útil para corregir errores como parte de un proceso de desarrollo más largo y cooperativo.

Accessibility Insights también se ejecuta en axe-core, pero tiene varias características que lo diferencian de axe DevTools. Se puede ejecutar en varias plataformas, incluidas Android, Windows o como una extensión del navegador. Todas las versiones de Accessibility Insights cuentan con una herramienta similar a un inspector para buscar información de elementos individuales, así como una forma de ejecutar comprobaciones automáticas. La extensión web también contiene una función de Evaluación, que tiene una combinación de pruebas automatizadas, guiadas y manuales para permitirle generar un informe completo.

WAVE de WebAIM ha sido una parte integral de mi kit de herramientas. Disponible en forma de extensión, así como un servicio de prueba masiva y una API, considero que esta herramienta es la mejor para verificar mi trabajo a medida que desarrollo debido a su simplicidad y velocidad. Todo se carga como un panel al costado de su página, y puede obtener una vista holística de los errores desplazándose por la página. Si se muestra un error en el panel lateral pero no está seguro de dónde se encuentra en el DOM, puede desactivar los estilos para ubicarlo dentro del marcado. La función de encabezado y punto de referencia de WAVE es una de mis cosas favoritas, ya que garantiza que la semántica de mi documento sea correcta a medida que lo construyo.

SiteImprove tiene una extensión de Chrome gratuita además de sus ofertas de servicios pagos. Al igual que WAVE, ejecuta la extensión en una página y enumera los errores en un panel al costado de la página, incluidos filtros para cosas como el nivel de conformidad, la gravedad y la responsabilidad. El filtro de gravedad es especialmente útil ya que las pruebas automáticas siempre tienden a producir algunos falsos positivos.

¿Alguna vez ha considerado automatizar las pruebas de accesibilidad de su código fuente con GitHub Actions? No importa si aún no te has dado cuenta de GitHub Actions o simplemente necesitas un poco de ayuda para configurar un flujo de trabajo adecuado, el tutorial de Adrian Bolonio es para ti. Le muestra paso a paso cómo automatizar sus pruebas de accesibilidad con bibliotecas como axe, pa11y, Lighthouse y pruebas unitarias directamente en su repositorio de GitHub.

Aprenderá cómo configurar su repositorio para que las acciones de GitHub se ejecuten tan pronto como cree o actualice una solicitud de extracción en la rama principal. Si alguna de las acciones de GitHub encuentra vulnerabilidades de accesibilidad, la solicitud de extracción se bloqueará y deshabilitará la fusión hasta que haya resuelto los errores encontrados. Un pequeño detalle que hace una gran diferencia.

Colores

Se encontraron errores de texto de bajo contraste en la friolera de 86,4% de las páginas de inicio el año pasado. Los desarrolladores suelen tener un control limitado sobre una paleta de colores, por lo que es importante tratar de establecer una paleta de colores accesible lo antes posible en el proceso.

Cuando comienza a diseñar una paleta de colores, una herramienta de selección de colores en el navegador puede ser útil. Are My Colors Accessible es una herramienta que puede ayudarlo a descubrir una paleta de colores accesible. El modo básico calcula la relación de contraste entre dos colores cualesquiera. El tamaño de la fuente y el peso de la fuente de su texto pueden afectar la relación de contraste requerida según el nivel de conformidad, y esta herramienta presenta de manera útil todos los diferentes estándares que cumple. También cuenta con controles deslizantes de rango HSL para que pueda modificar cualquiera de los colores, y los resultados se actualizan automáticamente a medida que realiza los ajustes. El modo Paleta le permite comparar todos los colores de una paleta entre sí y muestra la relación de contraste y los estándares cumplidos, lo que es útil para determinar cómo puede combinar diferentes colores . Hacer cualquier ajuste de color también actualiza el enlace permanente, lo que le permite compartir fácilmente combinaciones de colores con su equipo. Si prefiere una interfaz diferente para seleccionar colores, Atul Varma ha creado una herramienta similar que utiliza un selector de color en lugar de controles deslizantes de rango HSL.

Geenes intenta hacerlo todo mediante la creación de gamas completas de tonos/tonos para cada grupo de colores que agregue, lo que le permite diseñar un sistema a todo color en lugar de una paleta limitada. Además de proporcionar relaciones de contraste, Geenes también le permite aplicar su paleta a varias maquetas y emular diferentes formas de daltonismo. Puede probar la mayoría de las funciones de forma gratuita y desbloquear múltiples paletas con una donación.

Ciertas herramientas pueden ayudarlo a resolver problemas específicos de accesibilidad relacionados con el color. Los botones en particular pueden ser complicados, ya que no solo debe preocuparse por el color del texto con el color de fondo, sino que también debe considerar el fondo del botón con el fondo de la página y el color del contorno de enfoque con ambos fondos. El proyecto ButtonBuddy de Stephanie Eckles explica estos requisitos en un lenguaje sencillo y le ayuda a elegir los colores para estas piezas individuales.

Algunas combinaciones de colores pueden cumplir técnicamente con los requisitos de contraste cuando las ven personas sin daltonismo, pero podrían plantear problemas para tipos específicos de daltonismo y baja visión. Who Can Use aplica un filtro visual para emular diferentes tipos de daltonismo y luego calcula una relación de contraste de color aproximada.

Si desea probar sus combinaciones de colores en el contexto de un sitio existente, Stark es una extensión de selección de colores para Chrome que le permite simular ciertos tipos de daltonismo. Además, Anna Monus ha creado un artículo útil sobre las herramientas para el daltonismo ya integradas en Chrome. Si bien este tipo de emulación nunca puede reemplazar por completo las pruebas con usuarios reales, puede ayudarnos a tomar mejores decisiones iniciales.

A veces, como desarrolladores, comenzamos a trabajar en un proyecto en el que es posible que necesitemos diseñar sobre la marcha y comenzamos a escribir código sin una paleta de marca completa y preestablecida. Una vez que ha comenzado el desarrollo, puede ser tedioso seguir importando paletas de colores de un lado a otro en herramientas externas. Hay muchas opciones para verificar el contraste de color dentro de un entorno de código . Alex Clapperton ha desarrollado una herramienta CLI en la que pasa en dos colores y genera la relación de contraste y los estándares de paso directamente en la terminal. La BBC ha publicado un verificador de contraste de color de JavaScript que toma dos colores y determina si cumple o no con el estándar deseado. Una herramienta como esta puede vivir en su base de código con sus pruebas, o implementarse en la biblioteca de su sistema de diseño como Storybook, PatternLab, etc.

A11y Color Tokens va un paso más allá y le permite generar automáticamente tokens de colores complementarios en CSS o SASS. Pase un color y una proporción deseada para generar un tono o matiz de ese color que cumpla con los requisitos. Si necesita verificar rápidamente la relación de contraste de algo, Chrome y Firefox ahora también muestran la información de contraste de color dentro de sus respectivos selectores de color de herramientas de desarrollador. Si ninguna de estas herramientas se adapta a sus gustos, Stephanie Walter ha cubierto muchas otras opciones de herramientas relacionadas con el color en su publicación de blog sobre accesibilidad del color.

Compatibilidad

Construir para tecnología de asistencia a menudo puede agregar otro nivel de complejidad cuando se trata de depurar. Debido a que la tecnología de asistencia es esencialmente otra capa de una interfaz sobre el navegador, ahora debemos preocuparnos por las combinaciones de navegador y tecnología de asistencia. Un error puede estar presente en el navegador o en la tecnología de asistencia, o puede estar presente solo en una combinación particular. Es una buena idea tener a mano esta lista de rastreadores de errores cuando intente solucionar un problema específico. Algunos de estos son públicos para que pueda ver si otros experimentan el error que tiene, pero otros solo ofrecen un medio para informar errores en privado.

No todas las combinaciones de navegadores y lectores de pantalla funcionan bien juntas, y no todas las funciones de accesibilidad se admiten por igual en todos los navegadores. Estas herramientas pueden ayudarlo a verificar si está experimentando un error en una combinación específica de dispositivos. La accesibilidad de HTML5 es una lista de las funciones HTML más nuevas y si la implementación predeterminada del navegador es compatible o no. De manera similar, el soporte de accesibilidad proporciona una lista de roles ARIA y su soporte en las combinaciones más populares de navegador y lector de pantalla.

Documentación de la accesibilidad

La accesibilidad sigue siendo una ocurrencia tardía en muchos equipos de diseño de UX. Una estrategia fácil pero muy eficiente para ayudarlo a adoptar una mentalidad de accesibilidad proviene de Elise Livingston y su equipo en Qualtrics . Comenzaron a agregar documentos de accesibilidad a todos los documentos de diseño antes de entregarlos a ingeniería. No solo para mejorar la accesibilidad del producto, sino también para ver posibles problemas de accesibilidad mucho antes en el proceso de diseño.

Elise sugiere abordar la documentación de accesibilidad en dos pasos: primero, definir el comportamiento del teclado, luego, especificar etiquetas semánticas que puedan ser entendidas por la tecnología de asistencia. Si quieres probarlo, Elise resumió todo lo que necesitas saber sobre el enfoque en un artículo. Una gran oportunidad para repensar su proceso actual.

Gestión de enfoque

Administrar el enfoque es una parte necesaria pero a menudo difícil de hacer accesibles las aplicaciones complejas. Debemos tener en cuenta que el orden de enfoque es lógico, que el enfoque se mueve correctamente en cualquier componente personalizado y que cada elemento interactuable tiene un estilo de enfoque claro.

Este bookmarklet de Level Access etiqueta cada elemento enfocable en la página, para que pueda verificar que el orden de enfoque coincida con el orden de lectura. Para los usuarios de Firefox, el Inspector de accesibilidad de Firefox ha agregado esta función desde la versión 84.

En bases de código complejas, donde los diferentes componentes o el código de terceros pueden estar cambiando el enfoque inesperadamente, este pequeño fragmento de Scott Vinkle puede ayudarlo a ver qué elemento tiene el foco actualmente. Si tengo problemas con otras partes de mi aplicación que mueven el foco, a veces también me gusta reemplazar console.log con console.trace para determinar exactamente qué función está moviendo el foco.

Para probar todos los estilos de enfoque en una página web, podemos usar el script de Scott O'Hara como punto de partida. Pasar a través de cada elemento puede volverse engorroso después de un tiempo, por lo que un script para rotar a través de cada elemento puede ayudarnos a asegurarnos de que nuestros estilos de enfoque se vean consistentes y funcionen dentro del contexto de la página.

Establecer un tabindex positivo para tratar de corregir el orden de enfoque es un problema de accesibilidad común. Los elementos que tienen un tabindex positivo forzarán al navegador a tabularlos primero. Si bien esto puede no ser técnicamente un error, a menudo es inesperado y puede causar más problemas de los que resuelve. El bookmarklet tabindex de Paul J. Adam le permite resaltar todos los elementos que tienen aplicado el atributo tabindex.

Usabilidad del diseño

El orden de lectura del documento a veces puede no estar sincronizado con lo que un espectador podría esperar si un diseño depende demasiado de la propiedad de orden CSS Grid o Flexbox. Adrian Roselli ha codificado un bookmarklet para realizar un seguimiento del orden de lectura para ayudarlo a asegurarse de que su sitio cumpla con la pauta de secuencia significativa.

Las WCAG contienen un criterio de espaciado de texto en el que todo el contenido debería seguir funcionando cuando se aplican determinadas configuraciones de texto. Para probar esto, Steve Faulkner ha creado un bookmarklet que aplica automáticamente la configuración de espaciado de texto requerida a todo el texto de una página. Evitar cosas como alturas fijas y permitir el desbordamiento no solo hace que su sitio sea más accesible, sino que garantiza que cualquier contenido que coloque en su sitio no rompa el diseño, algo por lo que sus editores de contenido se lo agradecerán.

Jared Smith creó un bookmarklet para convertir su cursor en un cuadro de 44 × 44 píxeles para que pueda pasar el cursor sobre sus controles para asegurarse de que cumplan con el criterio de tamaño de destino recomendado .

linters

Los linters son una clase de herramientas que detectan errores al escanear el código fuente antes de ejecutar o compilar la aplicación. Mediante el uso de linters, podemos corregir errores más pequeños incluso antes de ejecutar o compilar el código, lo que ahorra un valioso tiempo de control de calidad más adelante.

Muchos desarrolladores ya conocen y usan ESLint de alguna manera. En lugar de aprender nuevas herramientas, es posible obtener una ventaja inicial en sus pruebas de accesibilidad al incluir un nuevo complemento en su flujo de trabajo existente. Eslint-plugin-jsx-a11y es un complemento ESLint para sus elementos JSX, donde se mostrarán los errores a medida que escribe su código. Scott Vinkle ha escrito una guía útil para configurarlo.

Deque ha lanzado axe Linter, disponible como aplicación Github o VS Code Extension. Axe Linter verifica los archivos React, Vue, HTML y Markdown con las reglas básicas sin ninguna configuración, por lo que es fácil de poner en marcha, aunque puede pasar sus propias opciones. Una característica útil es que distingue entre WCAG 2 y WCAG 2.1, lo cual es útil si está tratando de cumplir con un estándar específico.

Margen

La web está diseñada para ser resistente. Si ha roto el marcado, el navegador hará todo lo posible para reparar cualquier error. Sin embargo, esto puede tener efectos secundarios no deseados, tanto desde la perspectiva del estilo como desde el punto de vista de la accesibilidad. Ejecutar su salida a través del validador W3C HTML puede ayudar a detectar cosas como etiquetas rotas, atributos que se aplican a elementos que no deberían tenerlos y otros errores de HTML. Deque ha creado un bookmarklet W3C HTML Validator basado en el mismo motor que le permite verificar el marcado en localhost o páginas protegidas con contraseña que el validador normal no puede alcanzar.

Si es más una persona visual, el proyecto a11y.css de Gael Poupard es una hoja de estilo que verifica posibles riesgos dentro de su marcado. Disponible en formato de extensión o bookmarklet, puede personalizar el idioma y el nivel de los consejos que se muestran. De manera similar, sa11y es una herramienta que puede instalarse como un bookmarklet o integrarse en su base de código. Sa11y está específicamente diseñado para mirar la salida del contenido CMS . Muestra cualquier advertencia en un lenguaje no técnico para que los editores de contenido puedan entender y hacer las correcciones necesarias.

Nivel de lectura

Un sitio accesible comienza con contenido accesible. La accesibilidad cognitiva ha sido un enfoque principal del borrador WCAG 3 en curso y actualmente se menciona en el Criterio de Conformidad 3.1.5, lo que sugiere que los autores buscan que el contenido sea comprensible para un nivel de lectura de secundaria inferior (grados 7-9).

El Editor Hemingway calcula el nivel de lectura de su contenido a medida que lo escribe, para que pueda editarlo y asegurarse de que sea fácilmente comprensible. El panel lateral ofrece sugerencias sobre cómo puede mejorar su contenido para que sea más legible. Si su sitio ya ha sido publicado, Juicy Studio ha producido una herramienta de legibilidad en la que pasa una URL al formulario proporcionado y el contenido de su sitio se analiza y califica utilizando tres algoritmos de nivel de lectura diferentes. También hay una explicación útil de lo que implica cada uno de estos puntajes. Sin embargo, una limitación de esta herramienta en particular es que tiene en cuenta todo el texto representado en la página, incluidos elementos como la navegación y el pie de página, que pueden sesgar los resultados.

Suites de prueba e integración continua

La desventaja de la mayoría de las herramientas de prueba automatizadas es que requieren que las personas las ejecuten en el navegador. Si está trabajando en una sola base de código grande, puede incorporar pruebas de accesibilidad en su proceso de prueba existente o como parte de su flujo de integración continua. Cuando escribe pruebas personalizadas, tiene un conocimiento de su aplicación que las herramientas de prueba automatizadas no tienen, lo que le permite realizar pruebas completas y personalizadas de una manera más escalable.

Una vez más, axe-core aparece como una biblioteca de código abierto que con frecuencia respalda la mayoría de estas herramientas, por lo que si una herramienta funciona o no para usted probablemente se basará en qué tan bien se integre con su código en lugar de las diferencias en los resultados de las pruebas. . Marcy Sutton ha publicado una guía independiente del marco para comenzar a escribir pruebas automatizadas de accesibilidad. Ella cubre la diferencia entre las pruebas unitarias y las pruebas de integración y por qué es posible que desee elegir una sobre la otra en diferentes escenarios.

Si ya tiene un marco de prueba que disfruta, es muy probable que ya haya una biblioteca que incorpore axe-core . Por ejemplo, Josh McClure ha escrito una guía que usa cypress-axe, y Nick Colley ha producido una versión con sabor a Jest en jest-axe.

Pa11y es una herramienta que proporciona una interfaz configurable en torno a las pruebas que también está disponible en una versión CI. Sus muchas opciones de configuración pueden permitirle resolver problemas complejos que pueden surgir con las pruebas. Por ejemplo, la función de acciones le permite pasar una serie de acciones antes de ejecutar las pruebas y puede ser útil para probar pantallas que requieren autenticación antes de acceder a la página.

Preferencias del usuario

Hay muchas nuevas consultas de medios para ayudar a detectar el sistema operativo del usuario y las preferencias del navegador. En estos días, los desarrolladores a menudo detectan estas configuraciones para establecer el valor predeterminado para cosas como las preferencias de movimiento y el modo oscuro, pero esto también puede generar errores que son difíciles de reproducir si no tiene la misma configuración.

Magica11y es un conjunto de funciones que te permite determinar las preferencias de tus usuarios. Envíe la página de documentación a evaluadores no técnicos o incorpórelos a su aplicación para que pueda reproducir los entornos de su usuario con mayor precisión.

Terminando

Se estima que las pruebas de accesibilidad automatizadas solo pueden detectar el 30 % de todos los errores de accesibilidad. A pesar de que las herramientas continúan mejorando, nunca reemplazarán la inclusión de personas discapacitadas en su proceso de diseño y desarrollo. Un proceso de accesibilidad sostenible y holístico podría implicar que todo el equipo use herramientas para detectar la mayor cantidad posible de estos errores al principio del proceso, en lugar de dejar que los evaluadores y los usuarios discapacitados encuentren e informen estos problemas más adelante.

¿Necesita aún más herramientas? ¡El Proyecto A11y y Stark han seleccionado listas de herramientas de accesibilidad adicionales para desarrolladores y usuarios! O siéntase libre de dejar cualquier sugerencia en los comentarios a continuación, nos encantaría saber qué herramientas incorpora en su flujo de trabajo.