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

Lintern mit axe Linter

Die axe Accessibility Linter VSCode Extension und der axe Linter Server unterstützen jetzt React Native.

Erkennen Sie Barrierefreiheitsprobleme beim Erstellen neuer Funktionen oder beim Beheben von Fehlern mit axe Linter und verwenden Sie dann axe DevTools Mobile, um mit plattformspezifischen, automatisierten Tests tiefer in die Barrierefreiheitsprüfung einzutauchen.

Die Funktionen umfassen derzeit 6 Regeln, die auf React Native-Dateien (.js, .jsx, .ts und .tsx) ausgeführt werden. Weitere Informationen dazu, was die einzelnen Regeln testen und wie Sie die von ihnen erkannten Probleme beheben können, finden Sie unter den folgenden Links oder in der vollständigen Axe-Linter-Dokumentation :

Automatisiertes Testen

Barrierefreiheitstests mit axe DevTools Mobile für React Native-Anwendungen werden in zwei verschiedenen UI-Testmethoden unterstützt: Appium oder Native. Beide haben ihre Vorteile, hängen aber hauptsächlich davon ab, wie Ihre Tests heute ablaufen und wie vertraut Ihr Team mit der Implementierung von UI-Tests ist.

Option 1: Appium

Wenn Sie Appium bereits zum Testen Ihrer mobilen Anwendung verwenden oder nach einer Lösung zum plattformübergreifenden Testen suchen, bietet das axe DevTools Mobile-Plugin für Appium eine Integration zum schnellen Testen der Accessibility.

Befolgen Sie die Anleitung zum Einstieg mit axe DevTools Mobile für Appium.

Option 2: UI-Tests mit nativen Test-Suites

Verwenden Sie axe DevTools für iOS und Android, um durch automatisierte Tests schnell Zugänglichkeitsprobleme in Ihrer React Native-Anwendung zu finden, bevor diese in die Produktion gelangen.

Warum zwei Frameworks?

Die Plattformen zwischen iOS und Android sind einfach unterschiedlich. Da die Produkte von unterschiedlichen Unternehmen hergestellt werden, verspricht keines davon, irgendwelchen gemeinsamen Standards oder Erwartungen zu entsprechen. Dies ist ein Rezept, um sicherzustellen, dass das Endbenutzererlebnis auf jeder Plattform anders ist. Durch UI-Tests können wir die Barrierefreiheit Ihrer mobilen Anwendung automatisch testen und dabei die tatsächliche Erfahrung von Menschen mit Behinderungen möglichst genau nachvollziehen.

Android

Das Testen der Barrierefreiheit unter Android wird durch Espresso-Tests unterstützt. Wählen Sie den Ordner android in Ihrem React Native-Projekt aus und ziehen Sie ihn in Android Studio, um das Projekt zu öffnen. Sobald Android Studio den Import abgeschlossen hat, folgen Sie der Anleitung für die ersten Schritte.

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

iOS und iPadOS

Das Testen der Barrierefreiheit auf der Apple-Plattform wird in unserem axeDevToolsXCUI-Framework unterstützt. Öffnen Sie in Ihrem React Native-Projekt den Ordner ios und suchen Sie den Arbeitsbereich Ihres Projekts, der auf .xcworkspace endet. Doppelklicken Sie, um den Arbeitsbereich in Xcode zu öffnen. Jetzt können Sie unserer Anleitung für Erste Schritte mit dem axeDevToolsXCUI.xcframework folgen.

Wenn Sie bei der Einrichtung zusätzliche Referenzen benötigen, haben wir eine Beispielanwendung auf GitHub. Fügen Sie Ihre Deque-Anmeldeinformationen hinzu und folgen Sie der README-Datei, um sofort mit dem Ausführen von Scans zu beginnen. Das zum Testen von React Native erforderliche Beispiel ist im Ordner axe-devtools-ios-sample-appUITests verfügbar und trägt den Namen SampleUITests-XCUI.swift. Diese Anwendung ist nicht barrierefrei, um die Implementierungsschritte von Axe DevTools Mobile und die Problemerkennung zu demonstrieren.

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

Absolut. React Native nimmt eine Codebasis und portiert sie auf zwei verschiedene Plattformen, was viele Nuancen und Sonderfälle hinsichtlich des Verhaltens von Eigenschaften und Ansichten auf den einzelnen Plattformen mit sich bringt.

Hier ein Beispiel: Wir haben festgestellt, dass React Native die Barrierefreiheitsrolle nicht automatisch zu vielen Komponenten hinzufügen kann. Dies kann dazu führen, dass die unterstützende Technologie nicht versteht, wie sie die Komponenten für den Benutzer Ihrer Anwendung richtig interpretieren soll. Das bedeutet, dass die Anwendung für einige kritische Kundenerfolgspfade völlig unbrauchbar sein könnte. Mit dem Linter werden Sie angeleitet, wo Sie diese Rollen hinzufügen müssen, um sicherzustellen, dass die Komponente für die unterstützende Technologie verfügbar ist. Sobald die Komponenten die richtigen Rollen haben, um erkannt zu werden, kann axe DevTools Mobile genauer untersuchen, um sicherzustellen, dass andere Barrierefreiheitseigenschaften vorhanden, genau und für Ihr Publikum mit Behinderungen sinnvoll sind.