[Flutter] アプリのアクセシビリティ(Accessibility)

概要

Flutterでアプリのアクセシビリティ(Accessibility)を検査して向上させる方法を提供しています。

https://docs.flutter.dev/ui/accessibility-and-internationalization/accessibility

今回のブログポストではFlutterで開発したアプリのアクセシビリティを向上させる方法を説明します。

Google Play Consoleでアクセシビリティ検査

Google Play Consoleに移動して、テスト(Testing) > リリース前レポート(Pre-launch report) > 詳細(Details) > ユーザー補助機能(Accessibility)から、アプリのアクセシビリティを検査して結果を確認できます。

Flutter - Accessibility check on Google Play Console

アプリをリリースする前に、公開/非公開/内部テストを行った場合、このセクションでアクセシビリティの結果を確認できます。特に問題が見つからなければ、アプリのアクセシビリティが良好であると見なすことができます。

このセクションで問題が見つかった場合は、今回のブログポストで紹介した内容を参考にしてアプリのアクセシビリティを向上させることができます。

ウィジェットのアクセシビリティ向上

特定のウィジェットはアクセシビリティ向上のために追加のプロパティを提供します。アクセシビリティ向上のためのプロパティがないウィジェットでも、Semanticsウィジェットを使ってアクセシビリティを向上させることができます。

IconButtonのアクセシビリティ

IconButtonウィジェットを使うと、Screen Readerがそのウィジェットを認識できないことがあります。この場合は、Semanticsウィジェットを使ってIconButtonウィジェットをラップするか、IconButtonウィジェットのTooltipプロパティを使用してアクセシビリティを向上させることができます。

Semanticsウィジェットを使った例

Semantics(
  button: true,
  label: 'Add',
  child: IconButton(
    icon: Icon(Icons.add),
    onPressed: () {},
  ),
)

Tooltipプロパティを使った例

IconButton(
  icon: Icon(Icons.add),
  onPressed: () {},
  tooltip: 'Add',
)

TextFieldのアクセシビリティ

TextFieldウィジェットを使う時、labelTextプロパティやhintTextプロパティを使ってアクセシビリティを向上させることができます。

labelTextプロパティを使った例

TextField(
  decoration: InputDecoration(
    labelText: 'Email',
  ),
)

hintTextプロパティを使った例

TextField(
  decoration: InputDecoration(
    hintText: 'Email',
  ),
)

アクセシビリティ向上のためのSemanticsウィジェット

Semanticsウィジェットを使ってアクセシビリティを向上させることができます。例えば、Switchウィジェットを使う時、SemanticsウィジェットでSwitchウィジェットをラップして、labelプロパティを使ってアクセシビリティを向上させることができます。

Semantics(
  label: 'Enable push notifications',
  child: Switch(
    value: _value,
    onChanged: (value) {
      setState(() {
        _value = value;
      });
    },
  ),
)

また、InkWellウィジェットを使う時も、Semanticsウィジェットを使ってアクセシビリティを向上させることができます。

Semantics(
  label: 'Open profile',
  child: InkWell(
    onTap: () {
      // Open profile
    },
    child: Icon(Icons.person),
  ),
)

色の対比とボタンのサイズ

アクセシビリティを向上させるために、色の対比やボタンのサイズを調整する必要があります。この部分では適切な色の対比とボタンのサイズを使ってアクセシビリティを向上させることができます。

適切な色の対比とサイズを確認するために、Flutterが提供するアクセシビリティテストを使うことができます。

アクセシビリティテスト

Flutterでアクセシビリティを向上させるために、アクセシビリティテストを行うことができます。アクセシビリティテストを行うことで、アプリのアクセシビリティが向上しているかどうかを確認することができます。

Flutterのウィジェットテストコードで次のようにアクセシビリティテストを追加することができます。

testWidgets('Check accessibility', (WidgetTester tester) async {
  final SemanticsHandle handle = tester.ensureSemantics();

  await tester.pumpWidget(TargetWidget());

  await expectLater(tester, meetsGuideline(androidTapTargetGuideline));
  await expectLater(tester, meetsGuideline(iOSTapTargetGuideline));
  await expectLater(tester, meetsGuideline(labeledTapTargetGuideline));
  await expectLater(tester, meetsGuideline(textContrastGuideline));
  handle.dispose();
});