（この頁はdocs.flutter.dev(https://docs.flutter.dev/ui/accessibility-and-internationalization/accessibility)のリファレンスブログです。）

１．概要

　アプリを広範なユーザ層に利用可能にすることは、高品質なアプリを構築するうえで非常に重要です。適切に設計されていないアプリは、年齢を問わず多くの人々にとって障壁となります。特に、国連の「障害者の権利に関する条約」では、情報システムへの普遍的なアクセスを保障する道徳的および法的な責任を強調しています。また、世界各国でアクセシビリティは法的要件として定められ、多くの企業が自社のサービスへのアクセスを最大化することによるビジネス上の利点を認識しています。

　Flutterでは、アプリをリリースする前に アクセシビリティチェックリスト を含めることを強く推奨しています。
これにより、幅広いユーザに対応したアプリを作成することが可能になります。

　Flutterは、アクセシビリティを向上させるために、以下のような包括的なサポートを提供しています。
これらは、Flutterフレームワークの機能だけでなく、基盤となるオペレーティングシステムの機能も活用しています。

1. Large fonts（大きなフォント）
   • テキストウィジェットをユーザー指定のフォントサイズでレンダリング可能。
     ユーザーの設定に応じてフォントサイズを調整することで、視覚的な可読性を向上させます。
     
2. Screen readers（スクリーンリーダー）
   • UIの内容を音声フィードバックで伝える機能。
     これにより、視覚に障害のあるユーザーでもアプリの内容を理解できます。
     
3. Sufficient contrast（十分なコントラスト）
   • 色のコントラストが十分に確保されたウィジェットをレンダリング可能。
     コントラスト比を適切に保つことで、視認性を向上させます。

　Flutterは、開発者がアプリをアクセシブルにするための支援を行うことに注力しています。
これにより、アプリが法的要件を満たすだけでなく、より多くのユーザーに使いやすいものとなります。アクセシビリティ機能の詳細は、引き続きドキュメントで説明されています。

２．アクセシビリティサポートの検査

　Flutterで開発したアプリがアクセシビリティ要件を満たしているかを確認するために、特定のテストだけでなく、自動アクセシビリティスキャナー を使用することが推奨されています。各プラットフォームで提供されるアクセシビリティスキャナーやインスペクタを使用することで、Flutter アプリのアクセシビリティ属性（テキストの読みやすさ、ラベルの適切性、タッチ領域のサイズなど）を包括的に検査できます。これにより、すべてのユーザが利用しやすいアプリを効率的に作成することができます。

　以下では、各プラットフォーム（Android、iOS、Web）ごとの確認方法を説明します。

２．１　Android の場合

（１）手順

1. Accessibility Scanner アプリのインストール
   • Google Play ストアから「Accessibility Scanner」をインストールします。
     
2. Accessibility Scanner の有効化
   • Android 設定メニューで「アクセシビリティ > Accessibility Scanner」を有効にします。
     
3. スキャンの開始
   • アクセシビリティスキャナーの「チェックボックス」アイコンをタップするとスキャンが開始されます。

（２）利点

　アクセシビリティ属性（色のコントラスト、タッチ領域のサイズなど）を自動的に評価し、改善点をレポート形式で提供します。

２．２　iOS の場合

（１）手順

1. Xcode でアプリを開く
   • Flutter アプリの ios フォルダを Xcode で開きます。
     
2. ターゲットの選択
   • ターゲットとして iOS シミュレーターを選択し、実行（Run）ボタンをクリックします。
     
3. Accessibility Inspector を開く
   • Xcode のメニューから「Xcode > Open Developer Tools > Accessibility Inspector」を選択します。
     
4. UI 要素の検査
   • Accessibility Inspector の「Inspection」メニューから「Enable Point to Inspect」を選択し、アプリのUI要素をクリックしてアクセシビリティ属性を確認します。
     
5. レポートの生成
   • ツールバーの「Audit」をクリックし、「Run Audit」を実行すると、潜在的な問題のレポートが生成されます。

（２）利点

　アクセシビリティの問題点（ラベルの不足、適切なコントロール説明の欠如など）を特定し、修正案を提示します。

２．３　Web の場合

（１）手順

1. Chrome DevTools を開く
   • Chrome（または同等のブラウザ）で DevTools を開きます。
     
2. ARIA 属性を確認
   • HTML ツリー内の ARIA 属性（Flutter が生成するアクセシビリティ情報）を検査します。
     
3. Accessibility タブの使用
   • Chrome DevTools の「Elements」タブにある「Accessibility」サブタブを使用すると、セマンティクスツリーにエクスポートされたデータを確認できます。

（２）利点

　ウェブアプリがスクリーンリーダーやその他の支援技術に適切に対応しているかを確認できます。

３．大きなフォント

　Android と iOS には、アプリ内で使用するフォントサイズをユーザが設定できるシステム機能があります。
Flutter のテキストウィジェットは、この OS 設定を尊重してフォントサイズを自動的に調整します。

　ただし、開発者としては、フォントサイズの変更によってレイアウトが崩れないよう、余裕のあるデザインを心がける必要があります。特に、大きなフォント設定で小型デバイスをテストすることは、アクセシビリティを考慮したアプリ開発において非常に重要です。

（１）フォントサイズの自動計算

• Flutter は、OS 設定に基づいて適切なフォントサイズを自動計算します。
• ユーザーがデバイスのフォントサイズを変更すると、アプリ内のテキストウィジェットもその設定に従ってサイズを変更します。

（２）開発者が注意すべき点

• レイアウトの十分なスペースを確保
  • フォントサイズの増加時に、レイアウトの全てのコンテンツが適切に表示される様、余裕を持たせる必要があります。
    特に、小型の画面（例：スマートフォン）では、大きなフォント設定に対応できない場合があります。
    
• テストの重要性
  • 小型デバイスでフォントサイズの最大設定時でも、アプリが正しく表示されることを確認します。
    これにより、ユーザーのフォント設定がどの様に影響するかを把握し、対応できます。

（３）利用シーン

• アクセシビリティの向上
  • 視覚に制約のあるユーザにとって、フォントサイズの変更機能は重要です。
  • Flutter の対応により、ユーザ設定に基づいたアクセシビリティを簡単に実現できます。

４．スクリーンリーダ

　スクリーンリーダ（TalkBack や VoiceOver）は、視覚に制約のあるユーザーが画面上のコンテンツについて音声フィードバックを受け取り、ジェスチャーやキーボードショートカットを使って UI と対話するためのツールです。これらは、モバイルデバイスだけでなく、デスクトップでも使用可能です。

　Flutter アプリがスクリーンリーダーに適切に対応しているかをテストし、すべてのユーザーがアプリを利用できるようにすることが、優れたアクセシビリティの実現に不可欠です。

４．１　スクリーンリーダの概要

• 役割
  • 画面の内容（テキスト、ボタン、リンクなど）を音声で読み上げる。
    ユーザがタッチやジェスチャー（モバイル）、またはキーボード（デスクトップ）を使用してアプリと対話することを可能にする。
• 代表的なツール
  • TalkBack（Android 用）
  • VoiceOver（iOS 用）
• 開発者がすべきこと
  • アプリでスクリーンリーダが適切に動作するかを確認するため、TalkBack や VoiceOver を有効にしてアプリを操作するテストを実施する。

４．２　Android デバイスで TalkBack を有効にする方法

1. 設定を開く
   • デバイスの「設定」アプリを開きます。
     
2. アクセシビリティを選択
   • 「アクセシビリティ」メニューを選びます。
     
3. TalkBack を有効にする
   • 「TalkBack」オプションを選択し、「TalkBack を使用」をオンにします。
     
4. 確認
   • 「OK」を選択して設定を保存します。

４．３　利用シーン

• 視覚に制約があるユーザ
  • アプリの内容を理解し、操作する際に音声フィードバックを活用します。
    例えば、ボタンのラベルや現在フォーカスしているテキストなどを読み上げます。
    
• デベロッパーのテスト
  • スクリーンリーダーを使用して、アプリのアクセシビリティラベルが適切に設定されているかを確認します。
  • ユーザーがアプリを問題なくナビゲートできるかを確認します。

４．４　注意点

• ラベルと説明の設定
  • ボタンや画像などのウィジェットに適切なラベル（例: semanticLabel プロパティ）を設定し、スクリーンリーダーが正確な説明を読み上げられるようにする必要があります。
    
• フォーカス管理
  • ユーザーが効率的にナビゲートできるよう、UI のフォーカス順序を意識した設計が必要です。

５．十分なコントラスト

　十分な色のコントラストは、テキストや画像を読みやすくするために重要です。これは、視覚的な障害を持つユーザにとって有益であるだけでなく、極端な照明条件（直射日光の下や低輝度の画面など）でデバイスを使用する際にも、すべてのユーザにとって役立ちます。

（１）W3C の推奨基準

　W3C（World Wide Web Consortium）は、Web アクセシビリティのためのガイドラインとして WCAG（Web Content Accessibility Guidelines） を策定しています。その中で、以下のコントラスト比を推奨しています：

1. 小さいテキスト（18 ポイント未満の通常テキスト、または 14 ポイント未満の太字テキスト）
   • コントラスト比は 4.5:1 以上 が必要です。
     
2. 大きいテキスト（18 ポイント以上の通常テキスト、または 14 ポイント以上の太字テキスト）
   • コントラスト比は 3.0:1 以上 が必要です。

（２）適用例

• 背景とテキスト
  • ボタンのラベルや見出しが背景に埋もれて読みにくくならないように、コントラスト比を確保する。
    
• 画像の上のテキスト
  • 背景画像の上に配置されるテキストに、十分なコントラストがあるか確認する。
    
• インターフェイス全体
  • UI 要素間（ボタン、リンク、カードなど）で視覚的な区別がはっきりするようにする。

（３）テストと確認

• ツールの活用
  • コントラスト比をチェックするためのオンラインツール（例: WebAIM Contrast Checker）を使用すると、指定された背景色と前景色のコントラスト比を計算できます。
• シミュレーション
  • 視覚的な制約があるユーザーを想定し、シミュレーションツールを使ってインターフェイスの見え方を確認します。

６．アクセシビリティを意識した構築

　すべての人が利用可能なアプリを作成するには、アクセシビリティを最初から設計に組み込むことが重要です。
これを実現するには、開発初期の段階でアクセシビリティを考慮する必要があります。ただし、一部のアプリではこれが容易ではない場合もあります。
　開発者としては、アクセシビリティを後から追加するのではなく、最初から設計に組み込むことが理想的です。動画の事例のように、アクセシビリティを意識することで、アプリの価値を大きく向上させることができます。

（１）アクセシビリティ改善のプロセス

① 現状の課題を確認

• 初期状態では、アクセシビリティが非常に不足しているアプリを提示。
• 具体的には、スクリーンリーダーの対応不足や、コントラストの欠如、操作が困難なインターフェイスなどが問題として挙げられます。

② Flutter の組み込みウィジェットを活用

• Flutter が提供する組み込みのアクセシビリティ機能やウィジェットを使用して、段階的に改善を行います。
• 例えば、以下のような対応が可能です。
  • セマンティクスラベル（semanticLabel）の追加
    　ボタンや画像に説明を追加し、スクリーンリーダーで内容を正確に伝える。
  • フォーカス管理の改善
    　ユーザーが効率的にナビゲートできるようにフォーカスの順序を調整する。
  • 色のコントラストの調整
    　視認性を高めるために十分なコントラスト比を確保する。

⓷ 改善後の状態を確認

• 改善されたアプリでは、スクリーンリーダーが正確に内容を読み上げ、ボタンやインタラクションがわかりやすくなり、すべてのユーザーにとって利用しやすいものに仕上がっています。

（２）アクセシビリティのメリット

• ユーザー体験の向上
  • アクセシビリティが向上することで、視覚や聴覚、運動能力に制約があるユーザも含め、多様なユーザー層に利用可能なアプリが実現します。
    
• 法的・倫理的な配慮
  • アクセシビリティ基準を満たすことで、法的要件に対応し、すべてのユーザへの公平なアクセスを保障します。
    
• ビジネスチャンスの拡大
  • 多くのユーザが利用可能なアプリは、より広い市場での成功につながります。

７．テスト（モバイル上のアクセシビリティ）

　Flutter の Accessibility Guideline API を使用して、アプリの UI が Flutter のアクセシビリティ推奨事項を満たしているかをテストできます。この API は、以下のアクセシビリティ要素に対応しています。

• テキストのコントラスト（読みやすさ）
• ターゲットサイズ（タップ可能な要素の大きさ）
• ターゲットラベル（ラベルが適切に設定されているか）

import 'package:flutter_test/flutter_test.dart';
import 'package:your_accessible_app/main.dart';

void main() {
  testWidgets('Follows a11y guidelines', (tester) async {
    //テストの初期化:
    //ensureSemantics()
    //( セマンティクスツリー（アクセシビリティ情報の構造）を初期化します。
    //  これにより、テスト中にアクセシビリティ属性（ラベルやコントラストなど）
    //  を確認できるようになります。 )
    final SemanticsHandle handle = tester.ensureSemantics();
    //アプリのレンダリング:
    //pumpWidget()
    //( テスト対象のウィジェットを描画します。
    //  この例では AccessibleApp が対象で、アプリ全体をテストしています。 )
    await tester.pumpWidget(const AccessibleApp());

    //Android のタップターゲットサイズ:
    //( Android のタップ可能なノードが 48 x 48 ピクセル以上のサイズ
    //  を持つことを確認します。 )
    await expectLater(tester, meetsGuideline(androidTapTargetGuideline));

    //iOS のタップターゲットサイズ:
    //( iOS のタップ可能なノードが 44 x 44 ピクセル以上のサイズ
    //  を持つことを確認します。 )
    await expectLater(tester, meetsGuideline(iOSTapTargetGuideline));

    //ラベル付きタップターゲット:
    //( タップ可能な要素（タップやロングプレスで操作可能な要素）
    //  が適切なラベルを持っていることを確認します。 )
    await expectLater(tester, meetsGuideline(labeledTapTargetGuideline));

    //テキストのコントラスト:
    //・セマンティクスノードが推奨される最小テキストコントラストレベル
    //  を満たしていることを確認します。
    //・推奨コントラスト比:
    //大きなテキスト（18 ポイント以上の通常テキスト、
    //  または 14 ポイント以上の太字テキスト）では 3:1。
    await expectLater(tester, meetsGuideline(textContrastGuideline));
    
    //テストの終了処理:
    //( セマンティクスハンドルを解放して、テスト環境をクリーンアップします。 )
    handle.dispose();
  });
}

８．テスト（ウェブ上のアクセシビリティ）

　Flutterで開発したWebアプリのアクセシビリティをデバッグするために、セマンティクスノード（アクセシビリティ情報のノード） を視覚的に表示する方法を提供しています。この方法は、アプリケーションが適切にアクセシビリティ要件を満たしているかを確認する際に役立ちます。

（１）セマンティクスノードの可視化

　セマンティクスノードは、FlutterアプリのUI要素に関連付けられるアクセシビリティ情報を含む抽象的な構造体です。このノードが正しく配置されているかどうかを確認するために、以下のコマンドを使用します。

flutter run -d chrome --profile --dart-define=FLUTTER_WEB_DEBUG_SHOW_SEMANTICS=true

• -d chrome:
  • WebアプリをChromeブラウザ上で実行します。
    
• –profile または –release モード:
  • プロファイルモードまたはリリースモードでアプリを実行します。
    デバッグモードでは、このフラグは無効です。
    
• –dart-define=FLUTTER_WEB_DEBUG_SHOW_SEMANTICS=true:
  • セマンティクスノードをウィジェットの上に表示するフラグを有効にします。
    ノードがどこに配置されているかを視覚的に確認できます。

（２）確認方法

1. コマンドを実行:
   • 上記のコマンドをターミナルで実行してアプリを起動します。
     
2. セマンティクスノードの表示:
   • アプリ内のウィジェット上にセマンティクスノードがオーバーレイ表示されます。
     
3. ノードの配置を確認:
   • セマンティクスノードが適切な位置に配置されているかを確認します。
   • 例えば、ボタンに関連するノードがボタンの中心付近に配置されているか、ラベルが適切かなどをチェックします。

（３）問題がある場合

　ノードが正しく配置されていない、または必要な要素にノードが存在しない場合は、Flutterのバグとして報告しましょう。

（４）メリットと活用シーン

1. アクセシビリティの可視化
   • 通常は目に見えないセマンティクス情報を可視化することで、UI要素が適切にアクセシビリティを提供しているかを簡単に確認できます。
     
2. デバッグの効率化
   • 視覚的なフィードバックを得られるため、アクセシビリティの問題を迅速に特定し修正できます。
     
3. Web特有のアクセシビリティ対応
   • Webアプリで生成されるHTML構造やARIA属性が適切かを検証する際にも役立ちます。

９．セマンティクスノードとは

　セマンティクスノード（Semantics Node） は、Flutter アプリのアクセシビリティ情報を管理するための抽象的なデータ構造です。アプリ内の各 UI 要素（ボタン、画像、テキストなど）に関連付けられ、これらの要素を支援技術（スクリーンリーダーなど）が認識して操作するために必要な情報を提供します。

（１）セマンティクスノードの役割

① アクセシビリティ情報の提供

• ボタンやリンクなどの UI 要素の役割（例: 「ボタン」や「画像」）をスクリーンリーダーに伝える。
• UI 要素がどのようにインタラクションできるか（タップ可能、ドラッグ可能など）を記述する。

② 視覚情報の補足

• 画面上に表示されるテキストやアイコンに加えて、音声や触覚などで内容を補足します。

⓷ ナビゲーションのサポート

• 支援技術が UI 要素間を効率的にナビゲートできるように、各ノードを適切に関連付けます。

（２）セマンティクスノードが含む情報

　セマンティクスノードは以下のような属性を持ちます：

1. ラベル
   • ノードが表す要素の説明。（例: ボタンのラベル「送信」。）
     
2. アクション
   • 要素で実行できる操作。（例: タップ、長押し、スクロールなど。）
     
3. 状態
   • 要素の現在の状態。（例: チェックボックスが選択済みかどうか。）
     
4. 階層情報
   • UI の構造を反映し、親ノードや子ノードとの関係を表します。

（３）セマンティクスノードの仕組み

1. Flutter ウィジェットから生成
   • 各 Flutter ウィジェットは、アクセシビリティ属性を設定すると、それに応じたセマンティクスノードが自動的に生成されます。
     
2. セマンティクスツリーの構築
   • セマンティクスノードはツリー構造を形成し、アプリ全体の UI 階層を表します。
     例えば、親ノードがスクロールビュー、子ノードがボタンやテキストの場合、これらの関係がツリーで表現されます。
     
3. 支援技術との連携
   • セマンティクスツリーは、Android の TalkBack や iOS の VoiceOver などの支援技術に渡され、ユーザーがアプリを操作するために利用されます。

（４）開発者が知っておくべきこと

1. 適切なセマンティクスを提供
   • テキストやボタンにラベルを追加することで、スクリーンリーダーが正確に読み上げられるようにします。
   • （例: ボタンに semanticLabel: “送信ボタン” を設定。）
2. セマンティクスツリーの確認
   • Flutter では、セマンティクスノードがどのように生成されているかを確認するためのツール
     （例: flutter run –dart-define=FLUTTER_WEB_DEBUG_SHOW_SEMANTICS=true）
     が提供されています。

１０．チェックリスト（アクセシビリティリリース）

　Flutter アプリをリリースする際に、アクセシビリティ要件を満たしていることを確認するためのガイドラインです。
このリストは網羅的ではありませんが、アプリのアクセシビリティを大幅に向上させるために重要なポイントをカバーしています。

（１）Active interactions（アクティブなインタラクション）

• 確認ポイント
  • アクティブな操作（タップ可能なボタンやリンク）はすべて何らかの動作を行う必要があります。
  • （例: onPressed コールバックが設定されているが何もしない場合、代わりに SnackBar を表示して、操作内容をユーザーに知らせる。）
• 理由
  • 空の操作は、ユーザーに混乱を与え、アクセシビリティの観点で不適切です。

（２）Screen reader testing（スクリーンリーダーテスト）

• 確認ポイント
  • スクリーンリーダー（Android: TalkBack、iOS: VoiceOver）が、ページ上の全てのコントロールを適切に説明すること。
  • タップ時に理解可能な説明が提供されること。
• 方法
  • アプリを実際にスクリーンリーダーでテストし、ラベルや説明が適切であることを確認します。

（３）Contrast ratios（コントラスト比）

• 確認ポイント
  • コントロールやテキストと背景の間のコントラスト比が 4.5:1 以上であること。
  • 無効化されたコンポーネントはこの例外となる場合があります。
  • 画像も十分なコントラストがあるか確認。
• 理由
  • 視覚障害を持つユーザーや極端な照明条件下で利用するユーザーの可読性を向上させるため。

（４）Context switching（コンテキストの切り替え）

• 確認ポイント
  • 入力中に、ユーザーのコンテキストが自動的に切り替わらないようにする。
  • （例: 入力フィールド中に、別のウィンドウや画面が突然開かないようにする。）
• 理由
  • 突然のコンテキスト切り替えは混乱を招き、ユーザー体験を損なう可能性があります。

（５）Tappable targets（タップ可能なターゲット）

• 確認ポイント
  • タップ可能な要素（ボタン、リンクなど）のサイズが 48×48 ピクセル 以上であること。
• 理由
  • 指でのタッチ操作をスムーズにし、ミスを防ぐため。

（６）Errors（エラー）

• 確認ポイント
  • 重要な操作が「元に戻せる」ようにする。
  • フォーム入力でエラーが発生した場合、可能であれば修正案を提示する。
• 理由
  • ユーザーがミスを修正しやすくすることで、アクセシビリティと使いやすさが向上します。

（７）Color vision deficiency testing（色覚障害テスト）

• 確認ポイント
  • 色覚異常やグレースケールモードでも、コントロールが使いやすく、読みやすいこと。
• 理由
  • 色だけに頼らない設計をすることで、色覚障害を持つユーザーにも対応します。

（８）Scale factors（スケールファクター）

• 確認ポイント
  • テキストサイズやディスプレイスケーリングが非常に大きく設定されても、UI が読みやすく、使いやすいこと。
• 理由
  • 高齢者や視覚的な制約を持つユーザーのために、拡大してもレイアウトが崩れない設計が必要です。

１１．さらに詳しい内容について

　Flutter とアクセシビリティについて詳しく知りたい場合、コミュニティメンバーによって執筆された以下の記事を参考にすることができます。これらの記事では、アクセシビリティ機能の実装方法や考慮すべきポイントが詳しく解説されています。

（１）A deep dive into Flutter’s accessibility widgets

　「Flutter のアクセシビリティウィジェットの深掘り」

• 概要:
  • Flutter が提供するアクセシビリティ関連のウィジェット（例: Semantics ウィジェットや ExcludeSemantics ウィジェットなど）の詳細を解説した記事です。
  • アプリにアクセシビリティを組み込むための基礎知識から応用までをカバーしています。
• 期待できる内容:
  • アクセシビリティウィジェットの使い方
  • アプリのセマンティクス情報を管理する方法
  • 支援技術と連携する設計のヒント

（２）Semantics in Flutter

　「Flutter におけるセマンティクス」

• 概要:
  • Flutter のセマンティクスシステムがどのように機能するかを詳しく説明した記事です。
  • セマンティクスとは、アプリのアクセシビリティ情報を構造的に表現する仕組みで、これを正しく実装することでスクリーンリーダーなどが情報を認識しやすくなります。
• 期待できる内容:
  • セマンティクスツリーの構造と役割
  • semanticLabel や excludeSemantics などのプロパティの使用方法
  • UI 要素にセマンティクス情報を追加する際のベストプラクティス

（３）Flutter: Crafting a great experience for screen readers

　「Flutter: スクリーンリーダー向けの優れた体験の構築」

• 概要:
  • スクリーンリーダー（Android の TalkBack や iOS の VoiceOver）を使用するユーザー向けに、アプリを最適化する方法を解説した記事です。
  • スクリーンリーダーが正しく情報を伝えられるようにするための工夫が紹介されています。
• 期待できる内容:
  • スクリーンリーダーでのテスト方法
  • スクリーンリーダーが正しく認識できるラベルや説明の設定
  • ユーザー体験を向上させるためのアクセシビリティデザイン