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

React Nativeでアクセシビリティテストを始めましょう

Not for use with personal data

モバイルアナライザーの使用

axe DevTools Mobile Analyzerを使用すれば、ソースコードにアクセスせずにどんなアプリでもアクセシビリティをテストできます。React Nativeで書かれたアプリの場合、実機またはシミュレーター/エミュレーターを使用してアクセシビリティスキャンを実行できます。クロスプラットフォームのモバイルアプリの最も包括的なアクセシビリティテストを行うには、iOS版とAndroid版の両方でスキャンを実行する必要があります。

axe DevTools Mobile Analyzerの使用について詳しく知るには次のリンクを参照してください：

自動化テスト

React Nativeアプリケーションのアクセシビリティテストは、axe DevTools Mobileを使って2つの異なるUIテスト方法でサポートされています：AppiumとNative。それぞれに利点がありますが、主に今日のテスト状況やUIテストの実施に関するチームの慣れによります。

オプション1: Appium

既にAppiumを使用してモバイルアプリケーションをテストしている場合、またはクロスプラットフォームでテストを行うためのソリューションを探している場合、axe DevTools Mobileプラグインを使ったAppiumの統合は、迅速にアクセシビリティをテストするための解決策を提供します。

axe DevTools Mobile for Appiumのガイドを始めるに従ってください。

オプション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に従ってすぐにスキャンの実行を始めましょう。 ExampleEndToEndAccessibilityTest.kt ファイルを開き、axe DevTools for Androidの自動テストの完全な例を確認してください。このアプリケーションは、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の完全なドキュメントを参照してください：

notes

Axe Linterにアクセスするには、ライセンスを割り当てるためにサポートに連絡する必要があります。リクエストを次のアドレスに送信してください: helpdesk@deque.com。

リンターと自動テストの両方が必要ですか？

その通りです。React Nativeは1つのコードベースを取り、2つの異なるプラットフォームに移植します。これにより、各プラットフォームでプロパティとビューがどのように動作するかについて多くの微妙な点やエッジケースが生じます。

例えば、React Nativeは多くのコンポーネントにアクセシビリティの役割を自動的に追加しないことがわかっています。このため、支援技術がコンポーネントを適切に解釈する方法を理解できず、アプリケーションを使用する人にとっては完全に使えない状態になる可能性があります。axe Linterを使用することで、どこにその役割を追加するべきかをガイドし、コンポーネントが支援技術に利用可能であることを確認できます。コンポーネントが適切な役割を持って検出されるようになったら、axe DevTools Mobileがさらに詳細に調査し、他のアクセシビリティプロパティが障害を持つオーディエンスに対して存在し、正確で意味があることを確認します。