flutter-accessibility

Flutter のアクセシビリティ

アクセシビリティは、単にラベルを整えるのではなく、実装して検証する動作として扱ってください。

フローの監査

各ターゲットプラットフォームで、主なタスク、意味的な読み上げ順序、操作可能なコントロール、動的な通知、フォーカスの遷移、テキストの拡大縮小、コントラスト、モーション、キーボードまたはスイッチによる操作を確認します。

ルール

• Semantics を手動で追加する前に、組み込みのセマンティックコントロールを優先してください。
• カスタムのインタラクティブなウィジェットには、子のセマンティクスを重複させずに、役割、ラベル、値、状態、アクションを設定してください。
• 視覚的なフォーカス順序、セマンティックなフォーカス順序、キーボードのフォーカス順序を一致させてください。
• テキストを拡大縮小しても、クリップされたり、重要なアクションが隠れたりしないようにしてください。
• プラットフォームに適したターゲットサイズを満たし、色だけに頼らないでください。
• モーションの低減とコントラストの増加に関する設定でも、機能を維持してください。
• 意味のある非同期状態の変化を通知し、通知が繰り返されて煩雑にならないようにしてください。
• 情報を追加しない装飾的なコンテンツは、セマンティクスツリーから除外してください。

検証

セマンティクスを有効にしたウィジェットテストと、適切な場合は Flutter のアクセシビリティガイドラインのマッチャーを使用してください。また、TalkBack または VoiceOver を使って変更したフローをテストし、サポート対象のデスクトップ／ウェブターゲットではキーボード操作もテストしてください。

参考資料

• カスタムウィジェットに Semantics を設定する場合、サブツリーを結合する場合、または動的な音声通知をトリガーする場合は、セマンティクスとスクリーンリーダーをお読みください。
• WCAG AA のコントラスト比、最小タッチターゲット、大きなテキストの拡大縮小への適応を監査する場合は、ターゲットサイズとコントラストをお読みください。

参考情報

• Flutter のアクセシビリティ
• アクセシビリティテスト