React Native
Aan de slag met toegankelijkheidstesten in React Native
De Mobile Analyzer gebruiken
Met de Axe DevTools Mobile Analyzer kun je elke app testen op toegankelijkheid zonder toegang te hebben tot de broncode. Voor apps geschreven in React Native kun je toegankelijkheidsscans uitvoeren op een fysiek apparaat of met behulp van een simulator/emulator. Voor de meest uitgebreide toegankelijkheidstests van je cross-platform mobiele app, moet je scans uitvoeren voor zowel de iOS- als de Android-versies.
Lees meer 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 ze hebben vooral te maken met hoe je testen momenteel worden uitgevoerd en het comfortniveau van je team met het implementeren van UI-tests.
Optie 1: Appium
Als je al Appium gebruikt om je mobiele applicatie te testen, of als je op zoek bent naar één oplossing om cross-platform te testen, bieden de Axe DevTools Mobile Appium-stuurprogramma's een integratie voor het snel testen van toegankelijkheid.
Na de eenvoudige installatie, configureer je je geautomatiseerde testsuite om te scannen op toegankelijkheidsproblemen. De stuurprogramma's ondersteunen twee gebruiksmodi:
- Voor een snelle start gebruik je Auto Scan om automatisch toegankelijkheidsproblemen te identificeren terwijl je bestaande testsuite draait:
- Voor meer gedetailleerde controle en aanpassing in je tests, stel je in voor Gericht testen.
Optie 2: UI-testen met Native Test Suites
Gebruik Axe DevTools voor iOS en Android om snel toegankelijkheidsproblemen in je React Native-applicatie te vinden via geautomatiseerde tests voordat ze in productie komen.
Waarom twee frameworks?
De platformen tussen iOS en Android zijn simpelweg verschillend. Ze zijn vervaardigd door verschillende bedrijven en geen van beide belooft aan gedeelde standaarden of verwachtingen te voldoen. Dit is een recept om te garanderen dat de eindgebruikerservaring voor elk platform anders is. Via UI-testen kunnen we automatisch de toegankelijkheid van je mobiele applicatie testen zodat deze zo dicht mogelijk bij de echte ervaring van iemand met een beperking komt.
Android
Toegankelijkheidstesten op Android wordt ondersteund via Espresso-testen. Selecteer vanuit je React Native-project de android map en sleep deze naar Android Studio om het project te openen. Zodra Android Studio klaar is met importeren, volg de gids om aan de slag te gaan.
Als je extra referenties nodig hebt om alles op te zetten, hebben we een voorbeeldapplicatie op GitHub. Voeg je Deque-gegevens toe en volg de README om direct te beginnen met het uitvoeren van scans. Open het ExampleEndToEndAccessibilityTest.kt bestand om een volledig voorbeeld te zien van geautomatiseerd testen met Axe DevTools voor Android. Deze applicatie is ongeschikt om de Axe DevTools Mobile implementatiestappen en het detecteren van problemen te laten zien.
iOS en iPadOS
Toegankelijkheidstesten op het Apple-platform wordt ondersteund in ons axeDevToolsXCUI-framework. Open vanuit je React Native-project de ios map en vind de workspace van je project, eindigend op .xcworkspace. Dubbelklik om de workspace in Xcode te openen. Nu kun je onze gids voor aan de slag gaan met de axeDevToolsXCUI.xcframework volgen.
Als je extra referenties nodig hebt om alles op te zetten, hebben we een voorbeeldapplicatie op GitHub. Voeg je Deque-gegevens toe en volg de README om direct te beginnen met het uitvoeren van scans. Het voorbeeld dat nodig is voor React Native testen is beschikbaar in de axe-devtools-ios-sample-appUITests map en heet SampleUITests-XCUI.swift. Deze applicatie is ongeschikt om de Axe DevTools Mobile implementatiestappen en het detecteren van problemen te laten zien.
Linten met Axe Linter
De Axe Accessibility Linter VSCode Extension en Axe Linter Server bieden beide ondersteuning voor React Native.
Vang toegankelijkheidsproblemen op terwijl je nieuwe functies bouwt of bugs oplost met Axe Linter, en gebruik dan Axe DevTools Mobile om dieper in toegankelijkheidstesten te duiken met platformgerichte, geautomatiseerde tests.
De functie bevat momenteel zes regels die draaien op React Native-bestanden (.js, .jsx, .ts en .tsx). Bekijk de volgende links of de volledige Axe Linter documentatie om meer te ontdekken over wat elke regel test en hoe je de door hen gedetecteerde problemen kunt oplossen:
- Heeft geldige toegankelijkheidsacties
- Heeft een geldige toegankelijkheidsrol
- Heeft een geldige toegankelijkheidstoestand
- Heeft een geldige toegankelijkheidswaarde
- Afbeelding heeft toegankelijkheidslabel
- Heeft toegankelijkheidsrol
Voor toegang tot Axe Linter moet je contact opnemen met de ondersteuning om licenties toegewezen te krijgen. 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 hebben ontdekt dat React Native niet automatisch de toegankelijkheidsrol toevoegt aan veel componenten, wat ertoe kan leiden dat ondersteunende technologieën niet goed begrijpen hoe ze componenten moeten interpreteren voor de persoon die je applicatie gebruikt. Dat betekent dat de applicatie volledig onbruikbaar kan zijn voor sommige kritieke klantenprocessen. Met Axe Linter krijg je begeleiding waar je die rollen moet toevoegen om ervoor te zorgen dat de component beschikbaar is voor ondersteunende technologie. Zodra de componenten de juiste rollen hebben om gedetecteerd te worden, kan Axe DevTools Mobile dieper duiken om te garanderen dat andere toegankelijkheidseigenschappen aanwezig, nauwkeurig en betekenisvol zijn voor je publiek met beperkingen.