Artículo original escrito por Joseph Mawa
Artículo original React Accessibility Tools – How to Build More Accessible React Apps
Traducido y adaptado por Cristian Sulbaran
Hacer que un sitio web o una aplicación web sea accesible mejora la experiencia del usuario para las personas con discapacidades y también para todos los usuarios.
Dado que los desarrolladores se enfrentan a plazos ajustados y prioridades en conflicto, es fácil enviar accidentalmente problemas de accesibilidad no resueltos a producción. Y las cosas se vuelven aún más complejas cuando se trabaja con frameworks de JavaScript como React, que implica escribir JSX.
Pero, afortunadamente, existen herramientas que puedes aprovechar para eliminar o evaluar problemas comunes de accesibilidad en el editor de texto o el navegador.
Este artículo arrojará luz sobre estas herramientas de accesibilidad existentes y cómo puedes usarlas para crear aplicaciones React más accesibles.
¿Qué es la accesibilidad web?
Se dice que un sitio web o una aplicación web son accesibles si no excluyen a las personas con discapacidades de usarlos debido a su discapacidad.
Tener un sitio web accesible elimina las barreras y garantiza que tanto las personas discapacitadas como las no discapacitadas tengan el mismo acceso al contenido y la funcionalidad de la web.
Los beneficios de hacer que tu sitio web sea accesible para personas con discapacidades se extenderán a todos los usuarios, incluidas las personas sin discapacidades.
Por qué debería prestar atención a la accesibilidad
No se puede enfatizar lo suficiente la importancia de la accesibilidad. Si no prestas atención desde el comienzo de tu proyecto, corres el riesgo de convertir la accesibilidad en una carga, y una costosa, en el futuro si comienzas a modernizar.
Hacer que tu sitio sea accesible debe ser una parte integral de tu proyecto desde el principio. No debería ser una ocurrencia tardía.
A continuación, se ha destacado por qué se debe centrar en la accesibilidad desde el principio:
Sigue las mejores prácticas de SEO
Algunos de los requisitos básicos de accesibilidad, como el uso de elementos HTML semánticos, el uso adecuado de los elementos de encabezado y la adición de atributos alt descriptivos a las etiquetas img, también son las mejores prácticas de SEO.
Mejora la UX para todos los usuarios
Mejorar la accesibilidad para las personas con discapacidad mejorará la experiencia de todos tus usuarios.
Por ejemplo, agregar una relación de contraste suficiente no solo es útil para las personas con visión baja, daltonismo o deterioro cognitivo, sino que también es útil para las personas que trabajan en diferentes condiciones de iluminación.
De manera similar, agregar un atributo alt con el texto apropiado ayudará a las personas que usan lectores de pantalla, así como a aquellos con conexiones lentas a Internet, cuando la imagen no se carga o tarda demasiado en cargarse.
Es hacer lo correcto
Al hacer que tu sitio web sea accesible, estás haciendo lo correcto. Ellos también tienen derecho a acceder al servicio que ofreces y algunos son tus clientes. Además, no será bueno para ti o tu empresa si se les acusa de discriminación porque tu sitio es inaccesible para las personas con discapacidad. Dañará tu marca y reputación.
Evita problemas legales
Por último, es posible que te encuentres con requisitos legales de accesibilidad según el lugar donde vivas y trabajes. Algunos países tienen una legislación que exige que los sitios web sean accesibles para las personas con discapacidad.
Normas y pautas de accesibilidad
Hay varios estándares y pautas de accesibilidad diferentes. Los estándares más notables y reconocidos fueron desarrollados por el Consorcio World Wide Web (W3C) a través de su Iniciativa de Accesibilidad Web (WAI).
Han sido destacado algunos de estos estándares y pautas en las subsecciones siguientes.
Pautas de accesibilidad al contenido web (WCAG) 2.1
WCAG(Web Content Accessibility Guidelines) es uno de los estándares reconocidos internacionalmente para la accesibilidad del contenido web.
Fue desarrollado por W3C a través de un proceso participativo con aportes de una serie de partes interesadas individuales e institucionales de todo el mundo.
Este estándar explica cómo hacer que el contenido web sea más accesible para las personas con discapacidad. También ha sido aprobado por ISO.
Según W3C, WCAG se creó principalmente para servir como un estándar de referencia para individuos, organizaciones y gobiernos a nivel internacional en asuntos de accesibilidad al contenido web.
Pautas de accesibilidad para herramientas de autor (ATAG) 2.0
ATAG(Authoring Tools Accessibility Guidelines) es un conjunto de pautas de accesibilidad que puedes utilizar para diseñar herramientas para la creación de contenido web.
Esta guía ayuda a asegurarte de producir herramientas de autor que sean accesibles para personas con discapacidades. Las herramientas deberían, a su vez, ayudar a los autores a crear contenido web accesible.
Pautas de accesibilidad del agente de usuario (UAAG) 2.0
La UAAG(User Agent Accessibility Guidelines) 2.0 es una hermana de las WCAG. Este conjunto de pautas explica cómo puedes hacer que los navegadores, las extensiones del navegador, los reproductores multimedia y otros agentes de usuario sean accesibles para las personas con discapacidades.
Los proveedores de navegadores y los fabricantes de extensiones de navegadores lo utilizan para abordar ciertos problemas de accesibilidad, como la personalización del texto en el navegador.
En la siguiente sección, destacaremos un par de herramientas que pueden ayudarte a marcar problemas básicos de accesibilidad en tus aplicaciones React.
Herramientas de accesibilidad para tus aplicaciones React
Es fácil enviar involuntariamente problemas de accesibilidad a la producción, a pesar de tu esfuerzo para hacer lo contrario. En esta sección, arrojaremos luz sobre algunas herramientas que puedes usar para resaltar problemas comunes de accesibilidad.
Puede resultar tentador omitir determinadas funciones de accesibilidad si se trata de plazos ajustados. Por lo tanto, es útil tener herramientas de accesibilidad en tu configuración que te notifiquen los defectos de accesibilidad que podrías haber pasado por alto.
Esta no es de ninguna manera una lista exhaustiva de herramientas de accesibilidad. Si hay otras herramientas que crees que son útiles pero que no están incluidas aquí, ponte en contacto con Joseph en Twitter. Estará feliz de actualizar este artículo. Alguien podría encontrarlas útiles también.
Aunque estas herramientas detectarán algunos problemas comunes de accesibilidad que puedes medir programáticamente, no harán todo el trabajo por ti. Es tu responsabilidad hacer un esfuerzo deliberado para desarrollar productos digitales más accesibles e inclusivos desde la concepción del proyecto.
Se han categorizado las herramientas que vamos a cubrir en dos categorías, a saber:
- Herramientas de accesibilidad que puedes integrar en tu proyecto React que se han desarrollado con React en mente.
- Herramientas generales de auditoría de accesibilidad que puedes utilizar para auditar sitios creados con o sin React.
En las subsecciones a continuación, se destacarán las herramientas que puedes usar en tus proyectos de React. Se crean expresamente para su uso con React o JSX.
Herramientas de accesibilidad creadas para React
eslint-plugin-jsx-a11y
Puedes usar esta herramienta para identificar problemas de accesibilidad en elementos JSX en tus proyectos de React. Puedes usarlo junto con herramientas como eslint para vincular tu proyecto con estándares de accesibilidad directamente en el editor de texto.
Dado que se distribuye a través de npm, puedes instalarlo ejecutando el siguiente comando en tu proyecto:
# usando npm como administrador de paquetes
npm install eslint-plugin-jsx-a11y --save-dev
# usando yarn como administrador de paquetes
yarn add eslint-plugin-jsx-a11y --dev
Cualquier proyecto de React que hayas creado usando create-react-app viene con esta herramienta ya configurada, pero solo tiene un subconjunto de las reglas de accesibilidad configurables habilitadas de forma predeterminada.
Puedes habilitar reglas adicionales creando un archivo de configuración .eslintrc en tu proyecto y agregando el siguiente código:
{
"extends": ["react-app", "plugin:jsx-a11y/recommended"],
"plugins": ["jsx-a11y"]
}
Si deseas marcar problemas de accesibilidad en un proyecto React personalizado, debes instalar eslint y agregar "jsx-a11y" al campo de complementos del archivo de configuración .eslintrc.
Se marcarán los problemas de accesibilidad que puede identificar programáticamente, y te advertirá directamente en el editor de texto, según tu configuración.
{ "plugins": [ "jsx-a11y" ]}
Para obtener más información sobre cómo configurar esta herramienta de linting en un proyecto React personalizado, consulta el archivo README del proyecto en GitHub.
axe accessibility linter
El axe accessibility linter es una extensión de código de Visual Studio que puedes usar para enlazar React, HTML, Vue y Markdown con algunos defectos de accesibilidad comunes.
Comprueba si hay problemas de accesibilidad en archivos .js, .jsx, .ts, .tsx, .vue, .html, .htm, .md y .markdown.
No se necesita configuración para comenzar a usar el linter después de la instalación.
Lo instalas desde el marketplace de VSCode, y automáticamente comienza a enlazar archivos compatibles para detectar defectos de accesibilidad sin necesidad de configuración adicional.
Para obtener una lista completa de las reglas utilizadas por el linter, consulta la página de extensiones en el marketplace de VSCode.
También puedes continuar y configurar la herramienta si lo deseas, activando y desactivando algunas reglas, agregando el archivo de configuración ax-linter.yml en la raíz de tu proyecto.
Tienes la opción de deshabilitar las reglas de accesibilidad individualmente o en grupo usando el estándar WCAG. El uso de esta funcionalidad en tu proyecto garantizará que todos los miembros de tu equipo cumplan con el mismo estándar de accesibilidad.
Puedes agregar lo siguiente a tu archivo ax-linter.yml para habilitar o deshabilitar ciertas reglas individualmente. Para obtener una lista completa de reglas configurables, consulta la página de extensiones del linter en el marketplace de VSCode.
# Para habilitar/deshabilitar reglas a nivel individual:
accessibility-rule: false # deshabilita la regla
another-accessibility-rule: true # habilita la regla
Alternativamente, puedes agregar lo siguiente a tu archivo de configuración ax-linter.yml para deshabilitar las reglas como grupo usando estándares WCAG específicos.
Para obtener una lista completa de los estándares WCAG configurables, consulta la página de extensiones del linter en el marketplace de VSCode.
# Para habilitar/deshabilitar reglas a nivel de grupo según el estándar WCAG
tags:
- wcag2a # Deshabilita todas las reglas para WCAG 2.0 nivel A
- wcag21a # Deshabilita todas las reglas para WCAG 2.1 nivel A
axe-core-react
Esta herramienta de pruebas(testing) de accesibilidad es desarrollada y mantenida por Deque Labs, la misma gente detrás del axe accessibility linter.
axe-core-react se denominó originalmente react-axe. Puedes ejecutarlo en tu proyecto React en desarrollo y los defectos de accesibilidad se resaltan en la consola de Chrome DevTools cada vez que tu componente se actualiza.
Realmente puede ayudarte a detectar algunos problemas de accesibilidad al principio del desarrollo. Por el momento, axe-core-react funciona mejor con Google Chrome. A diferencia de los dos primeros, éste prueba la accesibilidad del DOM renderizado en lugar del elemento JSX que escribes en los componentes de React.
npm install @axe-core/react --save-dev
A continuación, puedes ejecutar el paquete en desarrollo después de la instalación.
El siguiente código ilustra cómo puedes ejecutar axe-core-react en tu aplicación React usando la configuración más básica. Hay opciones de configuración adicionales sobre las que puedes leer en el paquete README en GitHub
const React = require('react');
const ReactDOM = require('react-dom');
// Asegúrate de ejecutar @axe-core/react en desarrollo
if (process.env.NODE_ENV !== 'production') {
const axe = require('@axe-core/react');
axe(React, ReactDOM, 1000);
}
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Puedes usar las herramientas mencionadas anteriormente, directamente en tu aplicación React para detectar y solucionar problemas comunes de accesibilidad.
En la siguiente sección, veremos algunas otras herramientas de accesibilidad que no están directamente relacionadas con React pero que son útiles para identificar defectos básicos de accesibilidad en una aplicación React.
Otras herramientas de accesibilidad
Hay una serie de herramientas que puedes utilizar para detectar problemas de accesibilidad comunes en el navegador. Se han destacado un par de estas herramientas a continuación.
Extensión del navegador Axe DevTools
Esta es una extensión del navegador que puedes usar para realizar una auditoría simple de tu página web para problemas comunes de accesibilidad.
Tu aplicación debe estar alojada en algún lugar antes de usar esta extensión del navegador para verificar si hay problemas de accesibilidad. Clasifica los defectos de accesibilidad en críticos, graves, moderados y menores.
Extensión del navegador WAVE Evaluation Tool
Esta es otra extensión del navegador Chrome que puedes utilizar para identificar problemas de accesibilidad en tu sitio web.
Al igual que la extensión del navegador Chrome Axe DevTools, esta extensión requiere que alojes la aplicación antes de usarla para auditar tu aplicación web en busca de defectos de accesibilidad.
Lighthouse de Google en Chrome DevTools
Puedes utilizar Lighthouse Chrome DevTools de Google para auditar tu sitio web en busca de problemas de accesibilidad. Genera un informe que puedes utilizar para corregir defectos en su sitio web.
Existe una lista interminable de herramientas generales de evaluación de accesibilidad web. Puedes elegir la que se adapte a tus necesidades.
Para obtener una lista completa, puedes consultar la lista de herramientas de evaluación de accesibilidad web de W3C o las herramientas de accesibilidad de a11y project.
Conclusión
El uso de herramientas como eslint-plugin-jsx-a11y, axe accessibility linter, y axe-core-react en tu proyecto serán de gran ayuda para asistirte en desarrollar productos más accesibles e inclusivos utilizando React.
Aunque son útiles, las herramientas mencionadas aquí solo marcarán un cierto porcentaje de defectos de accesibilidad, principalmente aquellos que se pueden detectar mediante programación.
Por lo tanto, es realmente importante integrar pruebas automatizadas, pruebas manuales y pruebas de usuarios reales en el desarrollo, porque las pruebas automatizadas por sí solas pueden no detectar ni siquiera el 50 por ciento de los problemas de accesibilidad en tu proyecto.