Aprender sobre los aspectos básicos de las pruebas de accesibilidad

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

Reconocer la importancia de las pruebas de accesibilidad.
Resumir las ventajas y desventajas de automatizar las pruebas de accesibilidad.
Identificar herramientas que se pueden usar para automatizar las pruebas de accesibilidad.
Detallar estrategias para escribir sus propias pruebas de accesibilidad automatizadas.

¿Por qué realizamos pruebas de accesibilidad?

Las pruebas de accesibilidad ayudan a garantizar que todas las personas, incluidas las que tienen discapacidades, puedan usar los productos digitales, como sitios web y aplicaciones. Esto implica detectar y eliminar las barreras de accesibilidad, incluso antes de que los usuarios las encuentren. En teoría, nunca hay errores de accesibilidad, pero en la práctica sí se producen durante el desarrollo. Al desarrollar algo, su objetivo es garantizar que ninguno de esos errores llegue a los usuarios.

En un mundo ideal, las pruebas de accesibilidad se realizan durante todo el ciclo de vida del desarrollo, desde la fase de diseño, pasando por la etapa desarrollo e, incluso, después de esa etapa. Con este enfoque proactivo, garantiza que se considere y se integre la accesibilidad en cada etapa.

Realizar pruebas de accesibilidad ayudará a lograr lo siguiente:

Crear una experiencia digital inclusiva que ofrece acceso igualitario.
Cumplir requisitos legales y regulatorios.
Abarcar un rango de usuarios más amplio.
Mejorar la experiencia del usuario en general.

En este módulo, analizaremos las pruebas automatizadas y las manuales, ambas extremadamente importantes para ofrecer pruebas integrales de accesibilidad. Comencemos por analizar las pruebas de accesibilidad automatizadas.

Ventajas y desventajas de automatizar las pruebas de accesibilidad

Como seguramente ya sabe, las pruebas de accesibilidad automatizadas permiten evaluar con rapidez si un producto digital cumple los estándares de accesibilidad. Por ejemplo, un software de pruebas automatizadas puede analizar un sitio web e identificar una variedad de barreras de accesibilidad, desde la falta de texto alternativo hasta un contraste de color insuficiente o falta de encabezados. Si se automatiza el proceso de pruebas, es posible impulsar la eficacia, mejorar la consistencia y obtener una mayor escalabilidad.

Un desarrollador que realiza pruebas de accesibilidad automatizadas.

Aunque las pruebas automatizadas ofrecen muchas ventajas, es importante tener en cuenta que pueden pasar por alto problemas de accesibilidad significativos, al igual que barreras de accesibilidad sutiles que requieren contexto y comprensión humana. Por ejemplo, una prueba automatizada no marcará necesariamente imágenes de un texto que se usan como encabezados. Tampoco puede analizar el impacto en el mundo real de las barreras de accesibilidad para los usuarios. Para lograr una evaluación integral de la accesibilidad, siempre realice pruebas de accesibilidad manuales junto con las pruebas automatizadas.

Al automatizar sus propias pruebas de accesibilidad, utilice una combinación de utilidades de prueba predefinidas y casos de prueba de clientes para detectar regresiones de accesibilidad en sus interfaces de usuario. Los marcos de trabajo de prueba móviles para iOS y Android incluyen comprobaciones de accesibilidad básicas. Si desarrolla funciones a través de código nativo, agregue pruebas para realizar comprobaciones básicas que admitan los marcos de trabajo de pruebas. Para obtener más información sobre las pruebas móviles, consulte la sección Recursos al final de esta unidad.

Usar herramientas de pruebas de accesibilidad

Existen varias herramientas automatizadas y semiautomatizadas que puede usar para realizar pruebas de accesibilidad. La mayoría compara el contenido con las directrices de accesibilidad de contenido web (WCAG) e identifica barreras de accesibilidad. A continuación, presentamos un desglose de algunas herramientas útiles.

Herramienta	Qué es	Qué hace
Axe	Una herramienta de prueba de código abierto para sitios web y otras interfaces de usuario basadas en HTML que ofrece pruebas integrales de accesibilidad	Permite detectar errores de accesibilidad durante la codificación y se integra a su actual entorno de pruebas para poder automatizar las pruebas de accesibilidad
WAVE	Un conjunto gratuito de herramientas de evaluación que ayuda a identificar barreras comunes de accesibilidad, como poco contraste y falta de texto alternativo, que afectan a los usuarios con discapacidades	Utiliza íconos e indicadores para resaltar muchos problemas de accesibilidad y facilita la evaluación humana del contenido web
Google Lighthouse	Una herramienta automatizada de código abierto que realiza una auditoría de los problemas de accesibilidad, incluidas las infracciones de las directrices WCAG	Lleva a cabo auditorías de accesibilidad y asigna una puntuación de 0 a 100, que refleja el nivel de accesibilidad de una página
Linters	Herramientas automatizadas, como GitHub: infofarmer / eslint-plugin-jsx-a11y y GitHub: reactjs / react-a11y que se pueden integrar al ciclo de vida de desarrollo desde el principio para evitar infracciones y problemas de accesibilidad	Analiza el código fuente como HTML, CSS y JavaScript para detectar barreras de accesibilidad, por ejemplo, problemas de navegación del teclado y uso inadecuado de encabezados y puntos de referencia
sa11y	Un conjunto de bibliotecas JavaScript de código abierto creadas por Salesforce que ayuda a escribir pruebas de accesibilidad automatizadas	Permite detectar problemas de accesibilidad del DOM estáticos reconocibles por la máquina

Tenga en cuenta que las pruebas que se realizan con estas herramientas no abarcan todo. Incluso si su código pasa todas las pruebas, eso no garantiza que su producto sea totalmente accesible. Sin embargo, estas pruebas detectan los principales problemas de accesibilidad, y solucionarlos ayuda a garantizar que una regresión no afecte la accesibilidad de su código. Se recomienda realizar siempre pruebas manuales además de las automatizadas para asegurarse de hacer una evaluación integral de la accesibilidad. Obtenga más información sobre las pruebas manuales más adelante.

Escribir pruebas de accesibilidad propias

Si trabajó mucho para que un componente sea accesible, debe asegurarse de que se mantenga de ese modo. Puede escribir pruebas automatizadas para una variedad de inquietudes de accesibilidad, incluida la función esperada del teclado y los valores ARIA correctos para los elementos HTML.

Ejemplo: Probar un botón de Lightning

Este es un seudocódigo para la prueba de Jest de los componentes web Lightning (LWC) que crea un botón de Lightning y valida la accesibilidad de la estructura del componente.

registerSa11yMatcher();
const element = createButton({
    label: 'Submit',
    variant: 'brand-outline',
    title: 'This is a submit button',
});
const button = shadowQuerySelector(element, 'button');


return Promise.resolve().then(async () => {
    await expect(button).toBeAccessible();
});

En este código de muestra, primero registre sa11y para que pueda verificar los componentes de accesibilidad. A continuación, cree el botón con una etiqueta, una variante en particular y un título. Luego, al encontrar este botón, asígnelo a una variable. Por último, para agregar comprobaciones de accesibilidad, utilice una llamada de función asincrónica para verificar el botón de accesibilidad.

Cuando compruebe la accesibilidad de algún elemento en Jest, tome la estructura HTML del elemento que desea verificar y valídela con los estándares de WCAG. Esto incluye garantizar que todos los atributos aria sean correctos para el elemento que se muestra.

Estos son algunos aspectos básicos de las pruebas de accesibilidad. ¿Todo listo para poner estos principios en práctica? Siga leyendo para saber cómo se realizan las pruebas de teclado y lectores de pantalla.

Estimación de tiempo

Temas

¿Necesita ayuda?

Recursos de Salesforce Platform