React Native
Aan de slag met toegankelijkheidstesten in React Native
De Mobile Analyzer gebruiken
Met axe DevTools Mobile Analyzer kunt u elke app testen op toegankelijkheid zonder toegang tot de broncode. Voor apps geschreven in React Native, kunt u toegankelijkheidsscans uitvoeren op een fysiek apparaat of met behulp van een simulator/emulator. Voor de meest uitgebreide toegankelijkheidstests van uw cross-platform mobiele app, moet u scans uitvoeren voor zowel de iOS- als Android-versies.
Meer informatie over het gebruik van de axe DevTools Mobile Analyzer:
Geautomatiseerd testen
Toegankelijkheidstesten met axe DevTools Mobile voor React Native applicaties wordt ondersteund in twee verschillende UI-testmethoden: Appium of Native. Beide hebben hun voordelen, maar zijn vooral gerelateerd aan hoe uw testen vandaag plaatsvinden en het comfortniveau van uw team met het implementeren van UI-tests.
Optie 1: Appium
Als u al Appium gebruikt om uw mobiele applicatie te testen, of als u op zoek bent naar één oplossing om cross-platform te testen, biedt de axe DevTools Mobile plugin voor Appium een integratie voor snel testen van toegankelijkheid.
Volg de gids om aan de slag te gaan met axe DevTools Mobile voor Appium.
Optie 2: UI-testen met Native Test Suites
Gebruik axe DevTools voor iOS en Android om snel toegankelijkheidsproblemen in uw React Native applicatie te vinden via geautomatiseerde testen voordat ze in productie komen.
Waarom twee frameworks?
De platforms tussen iOS en Android zijn simpelweg anders. Gemaakt door verschillende bedrijven, belooft geen van beide te voldoen aan gedeelde standaarden of verwachtingen. Dit is een recept om te garanderen dat de eindgebruikerservaring anders is voor elk platform. Door UI-testen kunnen we automatisch de toegankelijkheid van uw mobiele applicatie testen zo dicht mogelijk bij de echte ervaring van iemand met een handicap.
Android
Testen op toegankelijkheid op Android wordt ondersteund via Espresso-testen. Selecteer vanuit uw React Native-project de android map en sleep deze naar Android Studio om het project te openen. Zodra Android Studio het importeren heeft afgerond, volgt u de gids om aan de slag te gaan.
Als u aanvullende referenties nodig heeft voor het opzetten, hebben we een voorbeeldapplicatie op GitHub. Voeg uw Deque-referenties toe en volg de README om direct te beginnen met het uitvoeren van scans. Open het ExampleEndToEndAccessibilityTest.kt bestand om een volledig voorbeeld van geautomatiseerd testen met axe DevTools voor Android te zien. Deze applicatie is ontoegankelijk om de implementatiestappen van axe DevTools Mobile en probleemdetectie te laten zien.
iOS en iPadOS
Toegangstesten op het Apple-platform wordt ondersteund in ons axeDevToolsXCUI framework. Vanuit uw React Native-project opent u de ios map en zoekt u de werkruimte van uw project, eindigend op .xcworkspace. Dubbelklik om de werkruimte in Xcode te openen. Nu kunt u onze gids volgen voor aan de slag gaan met de axeDevToolsXCUI.xcframework.
Als u aanvullende referenties nodig heeft voor het opzetten, hebben we een voorbeeldapplicatie op GitHub. Voeg uw Deque-referenties toe en volg de README om direct te beginnen met het uitvoeren van scans. Het benodigde voorbeeld voor React Native-testen is beschikbaar onder de axe-devtools-ios-sample-appUITests map en heet SampleUITests-XCUI.swift. Deze applicatie is ontoegankelijk om de implementatiestappen van axe DevTools Mobile en probleemdetectie te laten zien.
Linting met axe Linter
De axe Accessibility Linter VSCode-extensie en axe Linter Server bieden beide ondersteuning voor React Native.
Detecteer toegankelijkheidsproblemen tijdens het bouwen van nieuwe functies of het oplossen van bugs met axe Linter en gebruik vervolgens axe DevTools Mobile om dieper in toegankelijkheidstesten te duiken met platformgerichte, geautomatiseerde tests.
De functie omvat momenteel zes regels die worden uitgevoerd op React Native-bestanden (.js, .jsx, .ts en .tsx). Zie de volgende links of volledige axe Linter documentatie om meer te leren over wat elke regel test en hoe u de problemen die ze detecteren kunt oplossen:
- Heeft geldige toegankelijkheidsacties
- Heeft geldige toegankelijkheidsrol
- Heeft Geldige Toegankelijkheidsstatus
- Heeft Geldige Toegankelijkheidswaarde
- Afbeelding Heeft Toegankelijkheidslabel
- Heeft Toegankelijkheidsrol
Voor toegang tot Axe Linter moet je contact opnemen met de ondersteuning om licenties te laten toewijzen. Stuur je verzoek naar helpdesk@deque.com.
Heb ik zowel een linter als geautomatiseerde tests nodig?
Absoluut. React Native neemt één codebasis en brengt deze over naar twee verschillende platforms, wat veel nuances en randgevallen met zich meebrengt over hoe eigenschappen en weergaven zich gedragen voor elk platform.
Hier is een voorbeeld: we ontdekten dat React Native niet automatisch de toegankelijkheidsrol toevoegt aan veel componenten, wat kan resulteren in dat hulpmiddelen voor assistieve technologie niet begrijpen hoe ze componenten correct moeten interpreteren voor de persoon die je applicatie gebruikt. Dat betekent dat de applicatie volledig onbruikbaar kan zijn voor sommige belangrijke klantensuccespaden. Met axe Linter krijg je begeleiding waar je die rollen moet toevoegen, zodat het component beschikbaar is voor assistieve technologie. Zodra de componenten de juiste rollen hebben om gedetecteerd te worden, kan axe DevTools Mobile dieper ingaan om ervoor te zorgen dat andere toegankelijkheidseigenschappen aanwezig, nauwkeurig en betekenisvol zijn voor je publiek met een handicap.