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

Erste Schritte mit Zugänglichkeitstests in React Native.

Not for use with personal data

Verwendung des Mobile Analyzers

Mit dem Axe DevTools Mobile Analyzer können Sie jede App auf Barrierefreiheit testen, ohne Zugriff auf den Quellcode zu haben. Für Apps, die in React Native geschrieben sind, können Sie Barrierefreiheitsscans auf einem physischen Gerät oder mit einem Simulator/Emulator durchführen. Für die umfassendsten Barrierefreiheitstests Ihrer plattformübergreifenden mobilen App sollten Sie Scans sowohl für die iOS- als auch die Android-Version durchführen.

Erfahren Sie mehr über die Verwendung des Axe DevTools Mobile Analyzers:

Automatisierte Tests

Barrierefreiheitstests mit Axe DevTools Mobile für React Native-Anwendungen werden in zwei verschiedenen UI-Testing-Methoden unterstützt: Appium oder Native. Beide haben ihre Vorteile, hängen jedoch hauptsächlich davon ab, wie Ihre Tests derzeit durchgeführt werden und wie Ihr Team mit der Implementierung von UI-Tests vertraut ist.

Option 1: Appium

Wenn Sie bereits Appium verwenden, um Ihre mobile Anwendung zu testen, oder nach einer Lösung suchen, um plattformübergreifend zu testen, bieten die Axe DevTools Mobile Appium-Treiber eine Integration zum schnellen Testen der Barrierefreiheit.

Nach der einfache Installation konfigurieren Sie Ihre automatisierte Test-Suite, um auf Barrierefreiheitsprobleme zu scannen. Die Treiber unterstützen zwei Verwendungsmodi:

Für einen schnellen Einstieg verwenden Sie den Auto Scan, um Barrierefreiheitsprobleme automatisch zu identifizieren, während Ihre bestehende Test-Suite läuft:
- Auto Scan mit dem UIAutomator2-Treiber
- Auto Scan mit dem XCUITest-Treiber
Für eine feinere Kontrolle und Anpassung Ihrer Tests richten Sie sich für Gezielte Tests ein.

Option 2: UI-Tests mit nativen Test-Suiten

Verwenden Sie Axe DevTools für iOS und Android, um schnell Barrierefreiheitsprobleme in Ihrer React Native-Anwendung durch automatisierte Tests zu finden, bevor sie in die Produktion gelangen.

Warum zwei Frameworks?

Die Plattformen zwischen iOS und Android sind einfach unterschiedlich. Da sie von verschiedenen Unternehmen hergestellt werden, verspricht keiner, sich an gemeinsame Standards oder Erwartungen zu halten. Das ist ein Rezept dafür, dass die Benutzererfahrung für jede Plattform unterschiedlich ist. Durch UI-Tests können wir die Barrierefreiheit Ihrer mobilen Anwendung automatisch so nah wie möglich an die tatsächliche Erfahrung einer Person mit Behinderungen testen.

Android

Die Barrierefreiheitstests auf Android werden durch Espresso-Tests unterstützt. Wählen Sie in Ihrem React Native-Projekt den android Ordner aus und ziehen Sie ihn in Android Studio, um das Projekt zu öffnen. Sobald Android Studio den Import abgeschlossen hat, folgen Sie der Erste Schritte Anleitung.

Wenn Sie zusätzliche Referenzen für die Einrichtung benötigen, haben wir eine Beispielanwendung auf GitHub. Fügen Sie Ihre Deque-Anmeldedaten hinzu und folgen Sie der README, um sofort mit dem Scannen zu beginnen. Öffnen Sie die ExampleEndToEndAccessibilityTest.kt Datei, um ein vollständiges Beispiel für automatisierte Tests mit Axe DevTools für Android zu sehen. Diese Anwendung ist nicht zugänglich, um die Implementierungsschritte von Axe DevTools Mobile und deren Problemerkennung zu demonstrieren.

iOS und iPadOS

Die Barrierefreiheitstests auf Apples Plattform werden in unserem axeDevToolsXCUI-Framework unterstützt. Öffnen Sie aus Ihrem React Native-Projekt den ios Ordner und finden Sie den Arbeitsbereich Ihres Projekts, der mit .xcworkspace endet. Doppelklicken Sie, um den Arbeitsbereich in Xcode zu öffnen. Jetzt können Sie unserem Leitfaden für ersten Schritte mit dem axeDevToolsXCUI.xcframework folgen.

Wenn Sie zusätzliche Referenzen für die Einrichtung benötigen, haben wir eine Beispielanwendung auf GitHub. Fügen Sie Ihre Deque-Anmeldedaten hinzu und folgen Sie der README, um sofort mit dem Scannen zu beginnen. Das benötigte Beispiel für React Native-Tests ist im axe-devtools-ios-sample-appUITests Ordner verfügbar und trägt den Namen SampleUITests-XCUI.swift. Diese Anwendung ist nicht zugänglich, um die Implementierungsschritte von Axe DevTools Mobile und deren Problemerkennung zu demonstrieren.

Linting mit Axe Linter

Die Axe Accessibility Linter VSCode Erweiterung und der Axe Linter Server bieten beide Unterstützung für React Native.

Fangen Sie Barrierefreiheitsprobleme während der Entwicklung neuer Funktionen oder der Behebung von Fehlern mit Axe Linter ab und verwenden Sie dann Axe DevTools Mobile, um einen tieferen Einblick in Barrierefreiheitstests mit plattformzielgerichteten, automatisierten Tests zu erhalten.

Die Funktion umfasst derzeit sechs Regeln, die auf React Native-Dateien (.js, .jsx, .ts und .tsx) ausgeführt werden. Bitte sehen Sie sich die folgenden Links oder die vollständige Axe Linter-Dokumentation an, um mehr darüber zu erfahren, welche Regeln auf was testen und wie die von ihnen erkannten Probleme gelöst werden können:

notes

Um Zugang zum Axe Linter zu erhalten, müssen Sie den Support kontaktieren, um Lizenzen zuzuweisen. Senden Sie Ihre Anfrage an helpdesk@deque.com.

Benötige ich sowohl einen Linter als auch automatisierte Tests?

Absolut. React Native basiert auf einer Codebasis und transportiert sie in zwei verschiedene Plattformen, was viele Nuancen und Randfälle mit sich bringt, wie Eigenschaften und Ansichten für jede Plattform funktionieren.

Hier ist ein Beispiel: Wir haben festgestellt, dass React Native die Barrierefreiheitsrolle nicht automatisch zu vielen Komponenten hinzufügt, was dazu führen kann, dass unterstützende Technologien nicht verstehen, wie Komponenten ordnungsgemäß für die Person, die Ihre Anwendung verwendet, interpretiert werden sollen. Das bedeutet, dass die Anwendung für einige kritische Erfolgspfade des Kunden vollständig unbrauchbar sein könnte. Mit Axe Linter werden Sie geführt, wo Sie diese Rollen hinzufügen müssen, um sicherzustellen, dass die Komponente für unterstützende Technologien verfügbar ist. Sobald die Komponenten die richtigen Rollen haben, um erkannt zu werden, kann Axe DevTools Mobile tiefer gehen, um sicherzustellen, dass andere Barrierefreiheitseigenschaften vorhanden, genau und bedeutungsvoll für Ihr Publikum mit Behinderungen sind.