React Native

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

Introducción a las pruebas de accesibilidad en React Native.

Not for use with personal data

Uso del Analizador Móvil

Con Axe DevTools Mobile Analyzer, puedes probar cualquier aplicación para verificar su accesibilidad sin acceso al código fuente. Para las aplicaciones escritas en React Native, puedes realizar exámenes de accesibilidad en un dispositivo físico o utilizando un simulador/emulador. Para unas pruebas de accesibilidad realmente completas de tu aplicación móvil multiplataforma, deberías realizar exámenes para las versiones de iOS y Android.

Obtén más información sobre cómo usar el Axe DevTools Mobile Analyzer:

Pruebas Automatizadas

Las pruebas de accesibilidad con Axe DevTools Mobile para aplicaciones React Native cuentan con soporte en dos métodos diferentes de prueba de UI: Appium o Nativo. Ambos tienen sus ventajas, pero se relacionan principalmente con cómo se realizan tus pruebas actualmente y el nivel de comodidad de tu equipo para implementar pruebas de UI.

Opción 1: Appium

Si ya estás utilizando Appium para probar tu aplicación móvil, o estás buscando una solución para probar en multiplataforma, los drivers de Appium de Axe DevTools Mobile ofrecen una integración para probar rápidamente la accesibilidad.

Después de la instalación simple, configura tu suite de pruebas automatizadas para escanear problemas de accesibilidad. Los drivers soportan dos modos de uso:

Para un inicio rápido, usa Auto Scan para identificar automáticamente problemas de accesibilidad mientras se ejecuta tu suite de pruebas existente:
- Auto Scan con el Driver UIAutomator2
- Auto Scan con el Driver XCUITest
Para obtener un control más detallado y personalización en tus pruebas, configúralas para Pruebas Dirigidas.

Opción 2: Pruebas de UI con Suites de Pruebas Nativas

Usa Axe DevTools para iOS y Android para encontrar rápidamente problemas de accesibilidad en tu aplicación React Native a través de pruebas automatizadas antes de que lleguen a producción.

¿Por qué dos frameworks?

Las plataformas entre iOS y Android son simplemente diferentes. Fabricadas por diferentes compañías, ninguna promete conformarse a estándares o expectativas compartidas. Esto garantiza que la experiencia del usuario final será diferente en cada plataforma. A través de las pruebas de UI, podemos probar automáticamente la accesibilidad de tu aplicación móvil lo más cerca posible de la experiencia real de una persona con discapacidades.

Android

Las pruebas de accesibilidad en Android se soportan a través de pruebas con Espresso. Desde tu proyecto React Native, selecciona la carpeta android y arrástrala a Android Studio para abrir el proyecto. Una vez que Android Studio termine de importar, sigue la guía de inicio.

Si necesitas referencias adicionales para configurarte, tenemos una aplicación de ejemplo en GitHub. Agrega tus credenciales de Deque y sigue el README para comenzar a ejecutar exámenes de inmediato. Abre el archivo ExampleEndToEndAccessibilityTest.kt para ver un ejemplo completo de pruebas automatizadas con Axe DevTools para Android. Esta aplicación es inaccesible para mostrar los pasos de implementación de Axe DevTools Mobile y su detección de problemas.

iOS e iPadOS

Las pruebas de accesibilidad en la plataforma de Apple se soportan en nuestro framework axeDevToolsXCUI. Desde tu proyecto React Native, abre la carpeta ios y encuentra el espacio de trabajo de tu proyecto, que termina en .xcworkspace. Haz doble clic para abrir el espacio de trabajo en Xcode. Ahora puedes seguir nuestra guía para comenzar con el axeDevToolsXCUI.xcframework.

Si necesitas referencias adicionales para configurarte, tenemos una aplicación de ejemplo en GitHub. Agrega tus credenciales de Deque y sigue el README para comenzar a ejecutar exámenes de inmediato. El ejemplo necesario para las pruebas en React Native está disponible en la carpeta axe-devtools-ios-sample-appUITests y se llama SampleUITests-XCUI.swift. Esta aplicación es inaccesible para mostrar los pasos de implementación de Axe DevTools Mobile y su detección de problemas.

Linting con Axe Linter

La extensión Axe Accessibility Linter de VSCode y el servidor de Axe Linter ofrecen soporte para React Native.

Detecta problemas de accesibilidad mientras construyes nuevas funcionalidades o corriges errores con Axe Linter, luego usa Axe DevTools Mobile para profundizar más en las pruebas de accesibilidad con pruebas automatizadas dirigidas a plataformas específicas.

La característica actualmente incluye seis reglas que se ejecutan en archivos de React Native (.js, .jsx, .ts y .tsx). Por favor, consulta los siguientes enlaces o la documentación completa de Axe Linter para aprender más sobre qué prueba cada regla y cómo solucionar los problemas detectados por ellas:

notes

Para acceder a Axe Linter, debes contactar al soporte para que se asignen las licencias. Envía tu solicitud a helpdesk@deque.com.

¿Necesito tanto un linter como pruebas automatizadas?

Absolutamente. React Native toma una base de código y la porta a dos plataformas diferentes, lo cual introduce muchos matices y casos especiales en cómo se comportan las propiedades y vistas para cada plataforma.

Aquí tienes un ejemplo: encontramos que React Native no añade automáticamente el rol de accesibilidad a muchos componentes, lo que puede resultar en que la tecnología asistida no entienda cómo interpretar correctamente los componentes para la persona que usa tu aplicación. Eso significa que la aplicación podría ser completamente inutilizable para algunos caminos críticos de éxito del cliente. Con Axe Linter serás guiado sobre dónde agregar esos roles, para asegurar que el componente esté disponible para la tecnología asistida. Una vez que los componentes tengan los roles adecuados para ser detectados, Axe DevTools Mobile puede profundizar para asegurar que otras propiedades de accesibilidad estén presentes, sean precisas y significativas para tu audiencia con discapacidades.