React Native
React Nativeでアクセシビリティテストを始めましょう
モバイルアナライザーの使用
Axe DevTools Mobile Analyzerを使用すると、ソースコードにアクセスせずにどのアプリでもアクセシビリティをテストできます。React Nativeで書かれたアプリの場合、物理デバイス上またはシミュレーター/エミュレーターを使用してアクセシビリティスキャンを実行できます。クロスプラットフォームのモバイルアプリを最も包括的にアクセシビリティテストするには、iOSバージョンとAndroidバージョンの両方でスキャンを実行する必要があります。
Axe DevTools Mobile Analyzerの使用について詳しくはこちら:
自動化テスト
Axe DevTools Mobileを使用したReact Nativeアプリケーションのアクセシビリティテストは、Appiumまたはネイティブの2つの異なるUIテスト方法でサポートされています。どちらにも利点がありますが、主に現在のテストの進行状況とUIテストの実施におけるチームの快適さに関連しています。
オプション1: Appium
すでにAppiumを使用してモバイルアプリケーションをテストしている場合、またはクロスプラットフォームでのテストのための1つのソリューションを探している場合、Axe DevTools Mobile Appiumドライバーはアクセシビリティテストを迅速に統合するためのものです。
簡単なインストールの後、アクセシビリティ問題をスキャンするために自動テストスイートを設定します。ドライバーは2つの使用モードをサポートしています:
- クイックスタートのためには、既存のテストスイートが実行される際に自動的にアクセシビリティ問題を特定するAuto Scanを使用してください:
- より詳細な制御とテストのカスタマイズには、ターゲットテストの設定を行います。
オプション2: ネイティブテストスイートを使ったUIテスト
Axe DevToolsを使用すると、iOSとAndroidで自動テストを通じてReact Nativeアプリケーションのアクセシビリティ問題を迅速に発見し、本番環境に導入される前に対応できます。
なぜ2つのフレームワーク？
iOSとAndroidのプラットフォームは単に異なります。異なる企業によって製造されており、どちらも共有された標準や期待に準拠することを約束していません。このため、エンドユーザーの体験は各プラットフォームで異なることが保証されています。UIテストを通じて、障害を持つ人々の実際の体験にできるだけ近い形で、モバイルアプリケーションのアクセシビリティを自動的にテストすることができます。
Android
AndroidでのアクセシビリティテストはEspressoテストを通じてサポートされます。React Nativeプロジェクトから、androidフォルダーを選択し、Android Studioにドラッグしてプロジェクトを開きます。Android Studioがインポートを完了したら、ガイドを始めるに従って進めます。
セットアップ中にさらに参考が必要な場合、GitHub上のサンプルアプリケーションがあります。Dequeの認証情報を追加し、READMEに従ってすぐにスキャンを開始します。Axe DevTools for Androidによる自動テストの完全な例を見るためにExampleEndToEndAccessibilityTest.ktファイルを開いてください。このアプリケーションはAxe DevTools Mobileの実装ステップと問題検出を紹介するためにアクセシビリティが不足しています。
iOSおよびiPadOS
AppleのプラットフォームでのアクセシビリティテストはaxeDevToolsXCUIフレームワークでサポートされています。React Nativeプロジェクトからiosフォルダーを開き、.xcworkspaceで終わるプロジェクトのワークスペースを見つけます。ダブルクリックしてワークスペースをXcodeで開きます。これでaxeDevToolsXCUI.xcframeworkを始めるガイドに従うことができます。
セットアップ中にさらに参考が必要な場合、GitHub上のサンプルアプリケーションがあります。Dequeの認証情報を追加し、READMEに従ってすぐにスキャンを開始します。React Nativeテストに必要な例は、axe-devtools-ios-sample-appUITestsフォルダーの下にあり、名前はSampleUITests-XCUI.swiftです。このアプリケーションはAxe DevTools Mobileの実装ステップと問題検出を紹介するためにアクセシビリティが不足しています。
Axe Linterによるリンティング
Axe Accessibility Linter VSCode Extension と Axe Linter Server はどちらもReact Nativeをサポートしています。
新機能を構築したりバグを修正したりする際にAxe Linterでアクセシビリティ問題を発見し、その後Axe DevTools Mobileを使用して、プラットフォームをターゲットとした自動テストでアクセシビリティテストをさらに深く掘り下げます。
この機能は現在、React Nativeファイル（.js、.jsx、.ts、.tsx）で実行される6つのルールを含んでいます。各ルールが何をテストし、検出された問題をどのように修正するかについて詳しくは、次のリンクまたは完全なAxe Linterドキュメントをご覧ください。
Axe Linterへのアクセスには、ライセンスを割り当てるためにサポートに連絡する必要があります。helpdesk@deque.comにリクエストを送信してください。
リンターと自動テストの両方が必要ですか？
その通りです。React Nativeは1つのコードベースを取り、2つの異なるプラットフォームに移植します。これにより、各プラットフォームでプロパティとビューがどのように動作するかについて多くの微妙な点やエッジケースが生じます。
例として、React Nativeでは多くのコンポーネントに自動的にアクセシビリティロールが追加されないことが分かりました。これにより支援技術がコンポーネントを正しく解釈する方法がわからなくなる可能性があります。つまり、アプリケーションが重要な顧客成功までの経路にとって完全に使用不可能になる可能性があります。Axe Linterを使用すると、支援技術が利用できるようにするためにどこにロールを追加すべきかがガイドされます。コンポーネントに適切なロールを追加して検出可能になったら、Axe DevTools Mobileを使用して、他のアクセシビリティプロパティが正確かつ意味があり、障害を持つオーディエンスに対応できることを確認するためにさらなる深堀りを行います。