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

Introduzione ai test di accessibilità in React Native.

Not for use with personal data

Utilizzo del Mobile Analyzer

Con Axe DevTools Mobile Analyzer, puoi testare qualsiasi app per l'accessibilità senza accesso al codice sorgente. Per le app scritte in React Native, puoi eseguire scansioni di accessibilità su un dispositivo fisico o utilizzando un simulatore/emulatore. Per il test di accessibilità più completo della tua app mobile cross-platform, dovresti eseguire scansioni sia per le versioni iOS che Android.

Scopri di più sull'utilizzo di Axe DevTools Mobile Analyzer:

Test Automatizzati

Il test di accessibilità con Axe DevTools Mobile per applicazioni React Native è supportato in due diversi metodi di test UI: Appium o Native. Entrambi hanno i loro vantaggi, ma si riferiscono principalmente al modo in cui si svolgono i tuoi test attuali e al livello di comfort del tuo team nell'implementare test UI.

Opzione 1: Appium

Se stai già usando Appium per testare la tua applicazione mobile, o stai cercando una soluzione unica per testare cross-platform, i driver Appium di Axe DevTools Mobile offrono un'integrazione per testare rapidamente l'accessibilità.

Dopo l'installazione semplice, configura la tua suite di test automatizzati per scansionare i problemi di accessibilità. I driver supportano due modalità di utilizzo:

Per un avvio rapido, utilizza Auto Scan per identificare automaticamente i problemi di accessibilità mentre la tua suite di test esistente è in esecuzione:
- Auto Scan con il driver UIAutomator2
- Auto Scan con il driver XCUITest
Per un controllo più granulare e personalizzazione nei tuoi test, configura per Test Mirati.

Opzione 2: Test UI con Suite di Test Native

Usa Axe DevTools per iOS e Android per trovare rapidamente problemi di accessibilità nella tua applicazione React Native tramite test automatizzati prima che entrino in produzione.

Perché due framework?

Le piattaforme tra iOS e Android sono semplicemente diverse. Prodotte da aziende diverse, nessuna promette di conformarsi a standard o aspettative comuni. Questa è una ricetta per garantire che l'esperienza utente finale sia diversa per ciascuna piattaforma. Attraverso i test UI, possiamo testare automaticamente l'accessibilità della tua applicazione mobile il più vicino possibile all'esperienza reale di una persona con disabilità.

Android

Il test per l'accessibilità su Android è supportato tramite il test Espresso. Dal tuo progetto React Native, seleziona la cartella android e trascinala su Android Studio per aprire il progetto. Una volta che Android Studio ha terminato l'importazione, segui la guida introduttiva.

Se hai bisogno di ulteriori riferimenti per configurarvi, abbiamo una applicazione di esempio su GitHub. Aggiungi le tue credenziali Deque e segui il README per iniziare subito a eseguire le scansioni. Apri il file ExampleEndToEndAccessibilityTest.kt per vedere un esempio completo di test automatizzato con Axe DevTools per Android. Questa applicazione è inaccessibile per mostrare i passaggi di implementazione di Axe DevTools Mobile e il rilevamento dei problemi.

iOS e iPadOS

Il test per l'accessibilità sulla piattaforma Apple è supportato nel nostro framework axeDevToolsXCUI. Dal tuo progetto React Native, apri la cartella ios e trova il workspace del tuo progetto, che termina in .xcworkspace. Fai doppio clic per aprire il workspace in Xcode. Ora puoi seguire la nostra guida per iniziare con l'axeDevToolsXCUI.xcframework.

Se hai bisogno di ulteriori riferimenti per configurarvi, abbiamo una applicazione di esempio su GitHub. Aggiungi le tue credenziali Deque e segui il README per iniziare subito a eseguire le scansioni. L'esempio necessario per i test React Native è disponibile nella cartella axe-devtools-ios-sample-appUITests e si chiama SampleUITests-XCUI.swift. Questa applicazione è inaccessibile per mostrare i passaggi di implementazione di Axe DevTools Mobile e il rilevamento dei problemi.

Linting con Axe Linter

L'estensione Axe Accessibility Linter per VSCode e il Axe Linter Server offrono entrambi supporto per React Native.

Individua i problemi di accessibilità mentre costruisci nuove funzionalità o correggi bug con Axe Linter, quindi usa Axe DevTools Mobile per approfondire i test di accessibilità con test automatizzati mirati alla piattaforma.

La funzionalità attualmente include sei regole che vengono eseguite sui file React Native (.js, .jsx, .ts e .tsx). Consulta i seguenti collegamenti o la documentazione completa di Axe Linter per saperne di più su cosa testa ciascuna regola e su come correggere i problemi rilevati da queste regole:

notes

Per accedere all'Axe Linter, devi contattare il supporto per far assegnare le licenze. Invia la tua richiesta a helpdesk@deque.com.

Ho bisogno sia di un linter che di test automatizzati?

Assolutamente sì. React Native utilizza un'unica base di codice e la trasferisce in due piattaforme diverse, il che comporta molte sfumature e casi limite su come le proprietà e le viste si comportano su ciascuna piattaforma.

Ecco un esempio: abbiamo scoperto che React Native non aggiunge automaticamente il ruolo di accessibilità a molti componenti, il che può causare che la tecnologia assistiva non comprenda correttamente come interpretare i componenti per l'utente che utilizza l'applicazione. Ciò significa che l'applicazione potrebbe essere completamente inutilizzabile per alcuni percorsi critici di successo del cliente. Con Axe Linter sarai guidato su dove aggiungere quei ruoli, per garantire che il componente sia disponibile per la tecnologia assistiva. Una volta che i componenti hanno i ruoli adeguati per essere rilevati, Axe DevTools Mobile può approfondire per garantire che altre proprietà di accessibilità siano presenti, accurate e significative per il tuo pubblico con disabilità.