アクセシビリティ

幅広いユーザーがアプリにアクセスできるようにすることは不可欠です 高品質のアプリ構築の一部です。不十分なアプリケーション あらゆる年齢層の人々に障壁を生み出すように設計されています。のに関する国連条約 障害者の権利道徳的かつ法的であると述べています 情報システムへの普遍的なアクセスを確保することが不可欠である。国 世界中でアクセシビリティが要件として強制されています。と企業 サービスへのアクセスを最大化することによるビジネス上の利点を認識します。

アクセシビリティ チェックリストを含めることを強くお勧めします。 アプリをリリースする前の重要な基準として。 Flutter の取り組み アプリをよりアクセスしやすくするために開発者をサポートします。 それに加えて、アクセシビリティに対するファーストクラスのフレームワークのサポート 以下を含む、基盤となるオペレーティング システムによって提供されます。

大きなフォント

ユーザー指定のフォント サイズでテキスト ウィジェットをレンダリングする

スクリーンリーダー

UI コンテンツに関する音声フィードバックを伝達する

十分なコントラスト

十分なコントラストのある色でウィジェットをレンダリングする

これらの機能の詳細については、以下で説明します。

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

これらの特定のトピックのテストに加えて、 自動アクセシビリティ スキャナーの使用をお勧めします。

• アンドロイド用：
  1. をインストールします。アクセシビリティスキャナーアンドロイド用
  2. アクセシビリティ スキャナーを有効にするAndroid の設定 > アクセシビリティ > アクセシビリティスキャナー > オン
  3. アクセシビリティスキャナーの「チェックボックス」に移動します スキャンを開始するアイコン ボタン
• iOSの場合：
  1. を開きますiOSXcode の Flutter アプリのフォルダー
  2. ターゲットとしてシミュレータを選択し、走るボタン
  3. Xcode で、選択しますXcode > 開発者ツールを開く > アクセシビリティ インスペクター
  4. アクセシビリティインスペクターでは、 選択する検査 > 検査ポイントを有効にする、 次に、実行中のさまざまなユーザー インターフェイス要素を選択します。 Flutter アプリでアクセシビリティ属性を検査する
  5. アクセシビリティインスペクターでは、 選択する監査ツールバーで、 選択する監査の実行潜在的な問題のレポートを取得するには
• ウェブの場合:
  1. Chrome DevTools (または他のブラウザの同様のツール) を開きます。
  2. Flutter によって生成された ARIA 属性を含む HTML ツリーを調べます。
  3. Chrome では、「要素」タブに「アクセシビリティ」サブタブがあります。 セマンティクス ツリーにエクスポートされたデータを検査するために使用できます。

大きなフォント

Android と iOS の両方に、希望のフォントを構成するためのシステム設定が含まれています アプリで使用されるサイズ。 Flutter テキスト ウィジェットは、次の場合にこの OS 設定を尊重します。 フォントサイズの決定。

フォント サイズは、OS の設定に基づいて Flutter によって自動的に計算されます。 ただし、開発者として、レイアウトに十分なスペースがあることを確認する必要があります。 フォント サイズを大きくすると、すべてのコンテンツがレンダリングされます。 たとえば、アプリのすべての部分を小さな画面でテストできます。 デバイスは最大のフォント設定を使用するように構成されています。

例

次の 2 つのスクリーンショットは、標準の Flutter アプリを示しています。 デフォルトの iOS フォント設定でレンダリングされたテンプレート、 iOS のアクセシビリティ設定で選択された最大のフォント設定を使用します。

スクリーンリーダー

モバイルの場合、スクリーン リーダー (トークバック、ボイスオーバー) 視覚障害のあるユーザーが音声によるフィードバックを得ることができるようにする を使用して画面のコンテンツを表示し、UI を操作します。 モバイルではジェスチャー、デスクトップではキーボード ショートカット。 モバイルデバイスでVoiceOverまたはTalkBackをオンにし、 アプリ内を移動します。

デバイスでスクリーン リーダーをオンにするには、次の手順を実行します。

• Android 上の TalkBack
• iPhone の VoiceOver
• ブラウザ
• デスクトップ

SemanticsBinding.instance.ensureSemantics();

以下をチェックしてくださいビデオデモ見る マテリアル デザインのアクセシビリティ プログラムを率いる Victor Tsaran 氏は、 Flutter Gallery Web アプリで VoiceOver を使用する。

Flutter の標準ウィジェットはアクセシビリティ ツリーを自動的に生成します。 ただし、アプリに別のものが必要な場合は、 を使用してカスタマイズできますSemanticsウィジェット。

アプリ内に音声化する必要があるテキストがある場合 特定の音声でスクリーン リーダーに通知します 通話でどの音声を使用するかTextSpan.locale。 ご了承くださいMaterialApp.localeとLocalizations.overrideスクリーン リーダーが使用する音声には影響しません。 通常、スクリーン リーダーはシステム音声を使用します。 明示的に設定した場合を除くTextSpan.locale。

十分なコントラスト

十分な色のコントラストにより、テキストや画像が読みやすくなります。 さまざまな視覚障害のあるユーザーに利益をもたらすとともに、 十分な色のコントラストは、すべてのユーザーがインターフェースを表示する際に役立ちます 極端な照明条件にあるデバイスでは、 直射日光にさらされたときや、ディスプレイの温度が低いときなど。 輝度。

のW3C が推奨する:

• 小さいテキストの場合は少なくとも 4.5:1 (18 ポイントの標準または 14 ポイントの太字未満)
• 大きなテキストの場合は少なくとも 3.0:1 (18 ポイント以上の通常または 14 ポイント以上) 太字の上）

アクセシビリティを考慮した建物

アプリを誰でも使用できるようにすることは、アクセシビリティを構築することを意味します 最初からそれに入る。一部のアプリでは、言うは易く行うは難しです。 以下のビデオでは、当社の 2 人のエンジニアがモバイル アプリを悲惨な状況から立ち直っています。 アクセシビリティ状態を Flutter の組み込みを利用する状態に変更します。 ウィジェットを使用して、劇的にアクセスしやすいエクスペリエンスを提供します。

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

Flutter を使用してアプリをテストするアクセシビリティガイドラインAPI。 この API は、アプリの UI が Flutter のアクセシビリティ推奨事項を満たしているかどうかをチェックします。 これらには、テキストのコントラスト、ターゲット サイズ、ターゲット ラベルに関する推奨事項が含まれています。

次の例は、Name Generator でガイドライン API を使用する方法を示しています。 このアプリは、初めての Flutter アプリを作成するコードラボ。 アプリのメイン画面の各ボタンはタップ可能なターゲットとして機能します テキストは 18 ポイントで表されます。

final SemanticsHandle handle = tester.ensureSemantics();
await tester.pumpWidget(MyApp());

// Checks that tappable nodes have a minimum size of 48 by 48 pixels
// for Android.
await expectLater(tester, meetsGuideline(androidTapTargetGuideline));

// Checks that tappable nodes have a minimum size of 44 by 44 pixels
// for iOS.
await expectLater(tester, meetsGuideline(iOSTapTargetGuideline));

// Checks that touch targets with a tap or long press action are labeled.
await expectLater(tester, meetsGuideline(labeledTapTargetGuideline));

// Checks whether semantic nodes meet the minimum text contrast levels.
// The recommended text contrast is 3:1 for larger text
// (18 point and above regular).
await expectLater(tester, meetsGuideline(textContrastGuideline));
handle.dispose();

ガイドライン API テストを追加できます のtest/widget_test.dartアプリディレクトリの、または別のテストとして ファイル(例:test/a11y_test.dart名前ジェネレーターの場合)。

Web 上でのアクセシビリティのテスト

Web アプリ用に作成されたセマンティック ノードを視覚化することで、アクセシビリティをデバッグできます プロファイル モードとリリース モードで次のコマンド ライン フラグを使用します。

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

フラグをアクティブにすると、セマンティック ノードがウィジェットの上に表示されます。 セマンティック要素が配置されるべき場所に配置されていることを確認できます。 セマンティック ノードが正しく配置されていない場合は、バグレポートを提出する。

アクセシビリティリリースチェックリスト

以下は、準備する際に考慮すべき事項の完全なリストではありません。 リリースに向けたアプリ。

• アクティブなインタラクション。すべてのアクティブなインタラクションが確実に行われるようにする 何か。できるすべてのボタン 押されると、押されたときに何かをする必要があります。たとえば、 の no-op コールバックonPressedイベントの場合は、それを表示するように変更します。SnackBarどのコントロールを押したかを説明する画面が表示されます。
• スクリーンリーダーのテスト。スクリーン リーダーは次のことができるはずです ページ上のすべてのコントロールをタップしたときに説明します。 説明はわかりやすいものでなければなりません。アプリをテストするトークバック(アンドロイド)とボイスオーバー(iOS)。
• コントラスト比。のコントラスト比を持つことをお勧めします。 コントロールまたはテキストと背景の間は少なくとも 4.5:1、 無効なコンポーネントは例外です。画像も精査する必要があります 十分なコントラスト。
• コンテキストの切り替え。ユーザーのコンテキストを変更するものがあってはなりません 情報を入力すると自動的に表示されます。通常、ウィジェットは 何らかの手段を講じずにユーザーのコンテキストを変更することは避けるべきです。 確認アクション。
• タップ可能なターゲット。すべてのタップ可能なターゲットは少なくとも 48x48 でなければなりません ピクセル。
• エラー。重要な操作は元に戻せる必要があります。畑で エラーが表示されている場合は、可能であれば修正を提案してください。
• 色覚異常検査。コントロールは使用可能である必要があり、 色覚異常およびグレースケールモードでも判読可能。
• スケール係数。 UI は、非常に読みやすく、使用可能な状態を維持する必要があります。 テキスト サイズと表示スケーリングの大きなスケール係数。

もっと詳しく知る

Flutter とアクセシビリティについて詳しくは、こちらをご覧ください。 コミュニティメンバーによって書かれた次の記事:

• Flutter のアクセシビリティ ウィジェットの詳細
• Flutter のセマンティクス
• Flutter: スクリーン リーダー向けの優れたエクスペリエンスを作成する