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

Linting con axe Linter

L' estensione VSCode di axe Accessibility Linter e il server di axe Linter ora supportano React Native.

Rileva i problemi di accessibilità durante la creazione di nuove funzionalità o la correzione di bug con axe Linter, quindi utilizza axe DevTools Mobile per approfondire i test di accessibilità con test automatizzati mirati alla piattaforma.

La funzionalità include attualmente 6 regole che vengono eseguite sui file React Native (.js, .jsx, .ts e .tsx). Si prega di consultare i seguenti link o la documentazione completa di axe Linter per saperne di più sui test eseguiti da ciascuna regola e su come risolvere i problemi da esse rilevati:

Test automatizzati

I test di accessibilità con axe DevTools Mobile per le applicazioni React Native sono supportati in due diversi metodi di test dell'interfaccia utente: Appium o Native. Entrambi hanno i loro vantaggi, ma dipendono principalmente dal modo in cui i vostri test sono attualmente condotti e dal livello di dimestichezza del team con l'implementazione dei test dell'interfaccia utente.

Opzione 1: Appium

Se stai già utilizzando Appium per testare la tua applicazione mobile o stai cercando una soluzione per testare applicazioni multipiattaforma, il plugin axe DevTools Mobile per Appium offre un'integrazione per testare rapidamente l'accessibilità.

Segui la guida introduttiva ad axe DevTools Mobile per Appium.

Opzione 2: test dell'interfaccia utente con suite di test native

Utilizza axe DevTools per iOS e Android per individuare rapidamente i problemi di accessibilità nella tua applicazione React Native tramite test automatizzati prima che vengano trasmessi in produzione.

Perché due framework?

Le piattaforme iOS e Android sono semplicemente diverse. Essendo prodotti da aziende diverse, nessuno dei due promette di conformarsi a standard o aspettative comuni. Questa è una ricetta per garantire che l'esperienza dell'utente finale sia diversa per ogni piattaforma. Grazie ai test dell'interfaccia utente, possiamo testare automaticamente l'accessibilità della tua applicazione mobile il più vicino possibile all'esperienza reale di una persona con disabilità.

Android

I test di accessibilità su Android sono supportati tramite i test Espresso. Dal tuo progetto React Native, seleziona android la cartella e trascinala su Android Studio per aprire il progetto. Una volta completata l'importazione da parte di Android Studio, segui la guida introduttiva.

Se hai bisogno di ulteriori riferimenti per la configurazione, abbiamo un esempio di applicazione 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 è resa inaccessibile intenzionalmente per mostrare i passaggi di implementazione di axe DevTools Mobile e il rilevamento dei problemi.

iOS e iPadOS

I test di accessibilità sulla piattaforma Apple sono supportati nel nostro framework axeDevToolsXCUI. Dal tuo progetto React Native, apri la cartella ios e trova l'area di lavoro del tuo progetto, che termina con .xcworkspace. Fare doppio clic per aprire l'area di lavoro in Xcode. Ora puoi seguire la nostra guida per iniziare a usare l'axeDevToolsXCUI.xcframework.

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

Ho bisogno sia di un linter che di test automatizzati?

Assolutamente. React Native prende una base di codice e la trasferisce su due piattaforme diverse, il che comporta numerose sfumature e casi limite nel comportamento delle proprietà e delle viste per ciascuna piattaforma.

Ecco un esempio: abbiamo scoperto che React Native non aggiunge automaticamente il ruolo di accessibilità a molti componenti, il che può comportare che la tecnologia assistiva non riesca a interpretare correttamente i componenti per la persona che utilizza l'applicazione. Ciò significa che l'applicazione potrebbe essere completamente inutilizzabile per alcuni percorsi critici di successo del cliente. Grazie al linter, sarai guidato su dove aggiungere tali ruoli per garantire che il componente sia disponibile per la tecnologia assistiva. Una volta che i componenti hanno i ruoli appropriati per essere rilevati, axe DevTools Mobile può effettuare un'analisi più approfondita per garantire che altre proprietà di accessibilità siano presenti, accurate e significative per il tuo pubblico con disabilità.