モバイル アプリのアクセシビリティ テスト 101: WCAG 準拠とベスト プラクティス

モバイル アプリのアクセシビリティ テストでは、アプリがすべてのユーザー、特に障害のあるユーザーにとってアクセス可能であることを確認します。このプロセスでは、アプリケーションの設計、コンテンツ、機能を評価し、次のことを確認します。

• WCAG (Web コンテンツ アクセシビリティ ガイドライン) アクセシビリティ標準に準拠しています。

• スクリーン リーダー、音声コントロール、代替入力方法などの支援技術と互換性があります。

  
  

モバイル アプリのアクセシビリティ テストが必要な理由は次のとおりです。

• 法令遵守: ADA や欧州アクセシビリティ法などのデジタル アクセシビリティ法を遵守することで、法的問題、罰金、評判の低下を防ぐことができます。

• インクルージョンと平等なアクセス: アクセシビリティ テストにより、障害のある人がモバイル アプリを使用できることが保証され、公平なアクセスとインクルージョンが促進されます。

• より幅広いユーザーへのリーチ: アクセシビリティの高いアプリは、何百万人もの障害を持つ人々を含むより幅広いユーザーを引き付け、ユーザー エクスペリエンスを向上させ、新しい市場機会を創出します。

• 強化されたユーザー エクスペリエンス: 明確なナビゲーションや直感的なデザインなどのアクセシビリティ機能により、全体的なユーザー満足度とアプリの評価が向上することがよくあります。

• 社会的責任: アクセシビリティへの取り組みは、企業が包括性と社会的責任に注力していることを反映しています。

• やり直しとコストの回避: 早期のアクセシビリティ テストにより、コストのかかる再設計や修正を回避し、顧客からの苦情やリリース後の問題を軽減できます。

モバイルアプリのアクセシビリティに関する WCAG 準拠

WCAG (Web コンテンツ アクセシビリティ ガイドライン) 準拠は、障害を持つ人々がモバイル アプリにアクセスできるようにする上で重要です。もともと Web コンテンツ用に作成されたものですが、WCAG の概念と基準はモバイル アプリにも適用できます。

Principles of WCAG Accessibility

WCAG 準拠がモバイル アプリのアクセシビリティに与える影響は次のとおりです。

1. 知覚できる

• 写真やアイコンなどのテキスト以外の項目については、認識可能なテキストの代替を提供します。たとえば、写真やアイコンのラベルに代替テキストを含めると、スクリーン リーダーが視覚障害のあるユーザーにこれらの項目を伝えることができるようになります。

  
  

• 情報を失うことなく、コンテンツをさまざまな形式 (よりシンプルなレイアウトなど) で配信できるようにします。モバイル アプリの場合、アクセス可能な横向きモードと縦向きモードを提供することも含まれます。

• テキストと背景色の間に十分なコントラストを確保し、アプリの操作を妨げることなくテキストのサイズと音量を変更する選択肢を提供することで、ユーザーが資料をより簡単に視聴および聴取できるようにします。

  
  

2. 操作可能

• すべてのプログラム機能は、運動障害のあるユーザー向けのスイッチなど、キーボードまたはキーボードのような入力を使用してアクセス可能である必要があります。これには、ナビゲーション コントロール、フォーム、およびインタラクティブ機能が含まれます。

• 画面が自動的に進んだり、セッションがすぐにタイムアウトしたりしないようにして、ユーザーがコンテンツを読んで消費するのに十分な時間を確保します。

• 明るい光や画面の急速な更新など、発作を引き起こす可能性のあるコンテンツは避けてください。

• ユーザーがアプリ内を移動したり、コンテンツを見つけたり、現在地を確認したりするためのオプションを提供します。これには、明確にラベル付けされたボタンや一貫したナビゲーション パターンが含まれます。

  
  

3. 理解できる

• 書かれた情報を読みやすく理解しやすいものにします。これには、基本的な言語を使用し、専門用語を避け、資料がスクリーン リーダーで読み取れることを確認することが含まれます。

• Web ページは予測可能な方法で表示および機能する必要があります。たとえば、ボタンはプログラム全体で一貫して動作し、コンテンツは予期せず変化してはなりません。

• ユーザーがエラーを防止し、修正できるように支援します。これには、明確なエラー通知と簡単にアクセスできる支援リソースが含まれます。

  
  

4. 堅牢

• アプリがスクリーン リーダー、音声制御、拡大鏡などの現在および将来の支援技術で動作することを確認します。

• 適切なコーディング手法を使用して、アプリがオペレーティング システム、ブラウザー、支援デバイスなどのさまざまなユーザー エージェントで動作することを確認します。

WCAG 準拠レベル

3 WCAG Conformance Levels

• レベル A:基本的な Web アクセシビリティ機能 (最低レベル)。最も重要なアクセシビリティ要件を達成するために不可欠です。

• レベル AA:障害のあるユーザーにとって最も大きく、最も一般的な障壁に対処します。一般向けのデジタル製品に適したレベルとよく考えられています。

• レベル AAA:最も高度で包括的なアクセシビリティのレベル。レベル AAA のすべての基準を満たすことが理想的ですが、すべての素材のジャンルで必ずしも実現可能であるとは限りません。

モバイルアプリのアクセシビリティテストの例

例1: スクリーンリーダーを使ったテスト

• プロセス: VoiceOver (iOS) や TalkBack (Android) などのスクリーン リーダーを使用して、アプリ内を移動します。テスターは、すべての要素が正しく読み上げられ、ナビゲーション フローが論理的で直感的であることを確認する必要があります。

• 目的:すべてのインタラクティブ要素 (ボタン、リンク、フォーム フィールド) に正しいラベルが付けられ、ユーザーに十分なコンテキストが提供されていることを確認します。

• 結果:一部のボタンに説明ラベルがないため、視覚障害のあるユーザーがボタンの目的を理解するのが難しい場合があります。

  
  

例2: 色のコントラストテスト

• プロセス:色コントラスト ツールを使用するか、目視検査によって、テキストと背景色のコントラスト比を手動で確認します。

• 目的:視覚障害のあるユーザー、特に色覚異常のあるユーザーがテキストを簡単に読めるようにします。

• 結果:特定のテキスト要素のコントラストが不十分で、読みにくい場合があります。

適切なモバイル アプリ アクセシビリティ ツールを見つけるにはどうすればよいでしょうか?

適切なツールを選択するためのステップバイステップのガイドを以下に示します。

• 以下に基づいてテストのニーズを理解します。

  • 視覚障害、聴覚障害、運動障害、認知障害などの障害の種類。

  • ツールがサポートするプラットフォーム (iOS、Android、またはその両方)。

    
    

• 使いやすさ:特にアクセシビリティを専門としていない開発者やテスターにとって、ツールはセットアップと使用が簡単である必要があります。

  
  

• 統合機能:ツールが既存の開発、CI/CD、テスト ワークフローと統合されるかどうかを確認します。

  
  

• レポートとドキュメント:ツールは明確で実用的なレポートを提供する必要があります。さまざまな形式でのレポートのエクスポート、問題追跡システムとの統合、問題の解決に関するドキュメントなどの機能を探してください。

  
  

• サポートとコミュニティ:優れたカスタマー サポート、トレーニング リソース、アクティブなユーザー コミュニティを備えたツールを検討してください。

  
  

• コスト:一部のツールは無料 (オープン ソース) ですが、サブスクリプションまたは 1 回限りの購入が必要なものもあります。予算と提供される機能に合わせて選択し、投資収益率 (ROI) のバランスをとってください。

  
  

• 無料トライアル:多くのツールでは無料トライアルまたはデモ版を提供しています。これらを使用して、テスト環境でのツールの有効性を評価します。

  
  

• 実際のテスト:アプリの小さなセクションでツールをテストし、実際のシナリオでどのように機能するかを確認します。

モバイルアプリのアクセシビリティテストツール

現在、市場では数多くの人気のモバイル アプリ アクセシビリティ ツールが使用されています。Android または iOS のどちらでも機能するものもあれば、クロスプラットフォームのものもあります。

Android アクセシビリティ テスト ツール

• Google ユーザー補助スキャナは、ラベルの欠落、タッチ ターゲットの小ささ、色のコントラストの問題など、一般的なユーザー補助の問題がないか Android アプリを自動的にスキャンします。Google から直接提供されるこのツールは無料で使いやすくなっていますが、基本的な問題の特定に限定されており、詳細なテスト機能はありません。

  
  

• TalkBack アクセシビリティ: TalkBack アクセシビリティを使用すると、ユーザーは Android デバイスでスクリーン リーダーを使用できます。これは組み込みですが、手動のプロセスであり、徹底的にテストするには時間がかかります。BrowserStack アプリ アクセシビリティ ツールを使用すると、実際の Android デバイスで TalkBack スクリーン リーダーにアクセスできます。

iOS アクセシビリティ テスト ツール

• Xcode アクセシビリティ インスペクター: iOS アプリのアクセシビリティ属性を検査およびテストするための Xcode の組み込みツールです。Xcode に統合されており、リアルタイムの検査とテストを提供しますが、iOS 開発環境に限定されており、自動テストはありません。

  
  

• VoiceOver:これは iOS デバイスのネイティブ スクリーン リーダーで、アプリがスクリーン リーダー ユーザーとどのように対話するかをテストするために使用されます。これは組み込みですが、手動プロセスであり、徹底的にテストするには時間がかかります。BrowserStack App Accessibility Tool は、実際の iOS デバイスで VoiceOver スクリーン リーダーへのアクセスを提供します。

クロスプラットフォーム（Android と iOS の両方）アクセシビリティ テスト ツール

• BrowserStack App Accessibility は、 Android および iOS フォンでクロスプラットフォームのアクセシビリティを備えたネイティブのような機能を提供します。BrowserStack App Accessibility ツールを使用して、スクリーン リーダー テストとともにアクセシビリティ スキャンを実行し、アクセシビリティを監視できます。主な機能は次のとおりです。

  
  

  • セットアップなしで実際の iOS および Android デバイスに即座にアクセスできます。

  • BrowserStack 独自のルール エンジンを搭載したワークフロー スキャナーにより、アクセシビリティ テストが 5 倍高速化されます。

  • TalkBack および VoiceOver スクリーン リーダーにワンクリックでアクセスでき、録音やスクリーンショットで問題をキャプチャできます。

  • 注釈付きのスクリーンショットを備えた集中レポート ダッシュボードにより、簡単に解決するための洞察と実用的な修復手順が提供されます。

    
    

Mobile App Accessibility Testing Checklist

モバイル アプリのアクセシビリティ テストを実行するにはどうすればよいでしょうか?

ステップ1. アクセシビリティ要件を計画する

• ガイドラインを理解する: Web コンテンツ アクセシビリティ ルール (WCAG) やプラットフォーム固有のルール (Apple のアクセシビリティ ガイドラインや Google のマテリアル デザイン アクセシビリティなど) などのアクセシビリティ標準について学習します。

  
  

• 対象ユーザーを特定する:視覚、聴覚、運動、認知の制限など、さまざまな障害を持つユーザーの要求を考慮します。

  
  

• テスト目標を設定する:スクリーン リーダーの互換性、色のコントラスト、タッチ ターゲットのサイズ、テキストの拡大など、テストするアクセシビリティ機能を決定します。

  
  

ステップ2. 適切なツールを選択する

• 手動テスト ツール: VoiceOver (iOS) や TalkBack (Android) などのスクリーン リーダーを使用して、視覚障害のあるユーザーがアプリをどのように操作するかを手動でテストします。

  
  

• 自動テスト ツール: BrowserStack App Accessibility や Google Accessibility Scanner などの自動ツールを使用して、一般的なアクセシビリティの問題を特定します。

  
  

• ユーザー テスト ツール:障害を持つ実際のユーザーを対象にテストを実行するには、UserZoom や Loop11 などのプラットフォームの使用を検討してください。

  
  

ステップ3. レポートを確認する

生成されたレポートを分析して、改善できる領域を見つけます。これらのレポートには、違反の種類、違反が発生した場所、修復の推奨事項に関する情報が含まれることがよくあります。

ステップ4. 障害を持つユーザーを巻き込む

• テスターを募集する:障害を持つ実際のユーザーを招待してアプリをテストしてもらいます。自動テストや手動テストでは得られない貴重な洞察が得られます。

  
  

• コメントを収集する:ユーザーがアプリをどのように利用しているかを観察し、使いやすさや直面している障害についてコメントを求めます。

  
  

ステップ5. 問題を確認して修正する

• 修正の優先順位付け:自動、手動、およびユーザー テストに基づいて、重要なアクセシビリティの障害に重点を置き、問題を優先順位付けします。

• 調整を実装する:開発者と協力して、アプリのアクセシビリティを向上するために必要な調整を実装します。

  
  

ステップ6. 再テストと検証

• 再テスト:変更を加えた後、アプリを再テストして、アクセシビリティの問題が修正されていることを確認します。

• 継続的な監視:アクセシビリティ テストは継続的なアクティビティである必要があります。新しいアップグレードと機能を定期的にテストして、それらが引き続き利用可能であることを確認します。

  
  

ステップ7. 文書化とレポート

特定されたすべての問題、それらを解決するために実行された方法、および最終結果の完全な記録を保持します。

モバイルアプリのアクセシビリティテストのベストプラクティス

モバイルアプリのアクセシビリティテストのチェックリスト

モバイルアプリのアクセシビリティを実現するための 5 ステップのチェックリスト

1. 一般的なガイドライン

• アプリのタイトルが明確であることを確認します。

• アプリ全体で適切な見出し階層を維持します。

ARIA ランドマーク ロール (検索、ナビゲーション、コンテンツ情報、補足、バナーなど) を活用して、アプリまたはページを効果的に構造化します。

タッチ イベントの場合は、次のいずれかの条件に従ってください。

• ダウンイベントでアクティビティを開始することは避けてください。
• アップイベントでアクションを開始し、完了前にアクションをキャンセルまたは元に戻すオプションがあります。
• ダウンイベントによって開始されたアクションを元に戻すには、アップイベントを使用します。
• ユーザーの意図が明確に示された後にのみアクションを開始します。
• タッチ ターゲットが簡単にタップできる大きさであることを確認します。

2. 色のコントラスト比

• 視覚障害のあるユーザーを支援するために、WCAG 2.1 AA レベルの色コントラスト要件に準拠します。
• 標準テキストに対して 4.5:1 のコントラスト比を実現します。
• 大きなテキストでは 3:1 のコントラスト比を維持します。
• 色ベースの情報が他の手段でもアクセス可能であることを確認します。

3. タッチジェスチャーと触覚フィードバック

• タッチ ジェスチャと触覚フィードバックを実装して、Android と iOS の両方でアプリの機能とユーザー エクスペリエンスを強化します。

• 基本的な操作はタッチ ジェスチャに依存しませんが、特に読解力が限られているユーザーにとって、アクセシビリティと魅力を向上させることができます。

4. 一貫したレイアウトとナビゲーション

• コンテンツ、レイアウト、ナビゲーションの一貫性を維持し、ユーザー エクスペリエンスを向上させます。

• 特に、Web ブラウザーよりもモバイル アプリを好む運動障害を持つユーザーのために、メニューを通じてユーザーを誘導する補助ナビゲーションを備えたモバイル アプリを設計します。

• 混乱を避け、アクセシビリティを向上させるために、レイアウトが適切に整理され、視覚的にバランスが取れていることを確認します。

5. アプリのコンテンツ/メディアを最適化する

• アプリのコンテンツとメディアを、小さい画面と大きい画面の両方で表示できるように調整します。

• 「クリック」オプションやショッピング カート機能などのインタラクティブな要素がユーザーフレンドリーでアクセスしやすいことを確認します。

• 読みやすいヘッダー タグを使用し、コンテンツ レイアウトを最適化して、認知障害を持つユーザーがアプリを理解して操作できるようにします。

• 視覚と聴覚に障害のあるユーザーのアクセシビリティをサポートするために、ビジュアルに明確なキャプションを提供します。

モバイル アプリ開発にアクセシビリティを組み込むことは、法的または倫理的な要件であるだけでなく、包括的なユーザー エクスペリエンスを提供するために必要な要素でもあります。確立された原則に従い、自動テストと手動テストの両方の方法を使用し、障害を持つ実際のユーザーを参加させることで、ソフトウェアがすべての人に利用可能であることを保証できます。タッチ ターゲット、色のコントラスト、情報表示はすべて、さまざまなユーザーの要求によりよく適合するように定期的に最適化できます。

BrowserStack のプラットフォームを使用すると、さまざまな実際のデバイスでアプリをテストして、さまざまな環境でアクセシビリティ機能が機能し、ユーザーフレンドリーであることを確認できます。この実践的なアプローチにより、より正確な評価が可能になり、自動化ツールだけでは見逃してしまう可能性のあるアクセシビリティの問題を特定して解決するのに役立ちます。