Flutter中国語ドキュメント:アクセシビリティサポートの実装

640?wx_fmt = jpeg

Flutterは、目の不自由な運動障害者など、できるだけ多くのユーザーがアプリケーションにアクセスできるアプリケーションを開発したい開発者のサポートに常に取り組んでいます。

アクセシビリティのサポートを実現するために、Flutterは3つのコンポーネントを提供します。

  • 大きなフォント:ユーザーが指定したフォントサイズを使用して、テキストウィジェットをレンダリングします

  • スクリーンリーダー:音声フィードバックを通じてユーザーインターフェイスのコンテンツを伝達する

  • 高コントラスト:ウィジェットをレンダリングするときは、高コントラストの色を使用します

1.アクセシビリティ検出

以下では、アクセシビリティ検出の詳細について説明します。これらの特定のトピックのテストに加えて、自動アクセシビリティスキャナーを使用することもお勧めします。

  • アンドロイド用:

(1)Androidに補助スキャンプログラムをインストールする 

リンク:

https://play.google.com/store/apps/details?id=com.google.android.apps.accessibility.auditor&hl=en

(2)[設定]> [補助]> [補助スキャナー]> [有効]に移動して、Androidで補助機能スキャンプログラムを有効にします

(3)ナビゲーションバーで補助スキャナーのチェックボックスボタンを見つけてスキャンを開始します

iOSの場合:

(1)XcodeでFlutterアプリケーションのiOS フォルダーを開き  ます

(2)シミュレーターを見つけ、「実行」ボタンをクリックします

(3)Xcodeで、Xcode> Developer Tools> Auxiliary Inspectorを選択します

(4)補助チェッカーで、[チェック]> [ポイントチェックを有効にする]を選択し、Flutterアプリケーションを実行し、さまざまなユーザーインターフェイス要素を選択して、その補助機能をチェックします。

(5)補助チェッカーで、ツールバーの[監査]を選択し、[オーディオの実行]を選択して、潜在的な問題のレポートを取得します

2.大きなフォント

AndroidとiOSの両方に、アプリケーションで必要なフォントサイズを構成するためのシステム設定が含まれています。フォントサイズを決定するとき、Flutterテキストウィジェットは現在のシステム設定に従います。

2.1開発者向けのヒント

Flutterは、オペレーティングシステムの設定に基づいてフォントサイズを自動的に計算します。ただし、開発者は、フォントサイズを大きくする場合、すべてのコンテンツを表示するのに十分なスペースをページに確保する必要があります。たとえば、小さな画面で最大のフォントを設定して、アプリのすべてのコンテンツをテストできます。

2.2例

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

640?wx_fmt = png

デフォルトのフォント設定

640?wx_fmt = png

最大のアクセシビリティフォント設定

3.スクリーンリーダー

スクリーンリーダー(TalkBack、VoiceOver)を使用すると、視覚障害のあるユーザーが音声で関連する画面コンテンツを取得できます。

3.1開発者向けのヒント

デバイスでVoiceOverまたはTalkBackを有効にして、アプリを閲覧します。問題が発生した場合は、セマンティックウィジェットを使用して、アプリケーションのアクセシビリティをカスタマイズできます。

4.ハイコントラスト

ハイコントラストはテキストと画像を読みやすくします。ハイコントラストは、さまざまな視覚障害を持つユーザーに利益をもたらすだけでなく、極端な照明条件下(たとえば、直射日光や低輝度ディスプレイ)でデバイスのインターフェイスを表示する場合にも役立ちます。

W3Cの推奨事項:

  • 4.5:1以上の小さいテキスト(通常の18ピクセル未満または太字の14ピクセル未満)

  • 3.0:1以上の大きなテキスト(18ピクセル以上の標準または14ピクセル以上の太字)

4.1開発者向けのヒント

含めるすべての画像のコントラストが高いことを確認してください。

ウィジェットで色を指定するときは、前景色と背景色の間に十分なコントラストがあることを確認してください。

640?wx_fmt = png

おすすめ

転載: blog.csdn.net/weixin_43459071/article/details/102791909