React Native

Linting con axe Linter

La extensión VSCode de axe Accessibility Linter y el servidor Linter de axe ahora incluyen compatibilidad con React Native.

Detecte problemas de accesibilidad mientras crea nuevas funciones o corrige errores con axe Linter, luego use axe DevTools Mobile para profundizar en las pruebas de accesibilidad con pruebas automatizadas específicas para la plataforma.

La función actualmente incluye 6 reglas que se ejecutan en archivos React Native (.js, .jsx, .ts y .tsx). Consulte los siguientes enlaces o la documentación completa del axe Linter para obtener más información sobre qué prueba cada regla y cómo solucionar los problemas detectados por ellas:

• Tiene acciones de accesibilidad válidas
• Tiene un rol de accesibilidad válido
• Tiene un estado de accesibilidad válido
• Tiene un valor de accesibilidad válido
• La imagen tiene etiqueta de accesibilidad
• Tiene rol de accesibilidad

Pruebas automatizadas

Las pruebas de accesibilidad con axe DevTools Mobile para aplicaciones React Native se admiten en dos métodos de prueba de interfaz de usuario diferentes: Appium o Native. Ambos tienen sus ventajas, pero principalmente se relacionan con cómo se están realizando tus pruebas actualmente y el nivel de comodidad de tu equipo con la implementación de pruebas de interfaz de usuario.

Opción 1: Appium

Si ya está utilizando Appium para probar su aplicación móvil o está buscando una solución para probar entre plataformas, el complemento axe DevTools Mobile para Appium ofrece una integración para probar la accesibilidad rápidamente.

Siga la guía de introducción a axe DevTools Mobile para Appium.

Opción 2: Pruebas de IU con conjuntos de pruebas nativos

Utilice axe DevTools para iOS y Android para encontrar rápidamente problemas de accesibilidad en su 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. Fabricados por diferentes empresas, ninguno de ellos promete cumplir con estándares o expectativas compartidas. Esta es una receta para garantizar que la experiencia del usuario final sea diferente para cada plataforma. A través de las pruebas de UI, podemos probar automáticamente la accesibilidad de su aplicación móvil lo más cerca posible de la experiencia real de alguien con discapacidades.

Android

Las pruebas de accesibilidad en Android se apoyan a través de las pruebas Espresso. Desde su proyecto React Native, seleccione la carpeta android y arrástrela a Android Studio para abrir el proyecto. Una vez que Android Studio termine de importar, siga la guía de inicio.

Si necesita referencias adicionales para la configuración, tenemos una aplicación de muestra en GitHub. Agregue sus credenciales de Deque y siga el archivo README para comenzar a ejecutar escaneos de inmediato. Abra el ExampleEndToEndAccessibilityTest.kt archivopara ver un ejemplo completo de pruebas automatizadas con axe DevTools para Android. Esta aplicación está diseñada con problemas de accesibilidad para mostrar los pasos de implementación de Axe DevTools Mobile y su detección de problemas.

iOS y iPadOS

Las pruebas de accesibilidad en la plataforma de Apple están respaldadas por nuestro marco axeDevToolsXCUI. Desde tu proyecto React Native, abre la ios carpeta y busca el espacio de trabajo de tu proyecto, .xcworkspaceque termina en. Haz doble clic para abrir el espacio de trabajo en Xcode. Ahora puedes seguir nuestra guía para comenzar a utilizar axeDevToolsXCUI.xcframework.

Si necesitas referencias adicionales para la configuración, tenemos una aplicación de muestra en GitHub. Agregue sus credenciales de Deque y siga el archivo README para comenzar a ejecutar escaneos de inmediato. El ejemplo necesario para las pruebas de React Native está disponible en la carpeta axe-devtools-ios-sample-appUITests y se llama SampleUITests-XCUI.swift. Esta aplicación está diseñada con problemas de accesibilidad para mostrar los pasos de implementación de Axe DevTools Mobile y su detección de problemas.

¿Necesito un linter y pruebas automatizadas?

Absolutamente. React Native toma una base de código y la traslada a dos plataformas diferentes, lo que aporta muchos matices y casos extremos a cómo se comportan las propiedades y las vistas para cada plataforma.

Aquí hay un ejemplo: descubrimos que React Native no agrega el rol de accesibilidad automáticamente a muchos componentes, lo que puede provocar que la tecnología de asistencia no entienda cómo interpretar correctamente los componentes para la persona que usa su aplicación. Esto significa que la aplicación podría resultar completamente inutilizable para algunas rutas críticas de éxito del cliente. Con el linter, se le indicará dónde agregar esos roles para garantizar que el componente esté disponible para la tecnología de asistencia. Una vez que los componentes tienen los roles adecuados para ser detectados, axe DevTools Mobile puede profundizar para garantizar que otras propiedades de accesibilidad estén presentes, sean precisas y significativas para su audiencia con discapacidades.