はじめに

みなさん、Flutterでa11y（accessibility）周りやっていますでしょうか。

アプリの分野でa11yは聞き慣れないかもしれませんが、 Webの分野ではWeb Content Accessibility Guidelines (WCAG) 2.1として、a11yの対応項目みたいなものがルールとして決められています。

アプリでもWCAGのようなルールに対応していけたら、よりa11yの高いアプリをつくれるのではないかなと思いっています。

Flutterだけで言えば、すぐに書いたコードが動いてそこで満足してしまいがちですが すべてのユーザーに同じサービス価値を届けるために a11yについて考えることは大切だと思っています。せっかくいいアプリを作れてもそれが特定のユーザーにしか使ってもらえないのはもったいないので、積極的に対応していきたいです。

今回は、WCAGで定められている色々なルールの中で達成基準 2.2.2: 一時停止、停止、非表示を理解するというルールについての話です。

「一時停止、停止、非表示を理解する」とは

WCAGの達成基準 2.2.2: 一時停止、停止、非表示を理解するを読んでもなかなか何を言っているのか理解が難しいと思います。
AmebaのAccessibility Guidelinesが具体的な例があってわかりやすいです。

この2.2.2の達成基準では、アプリ内で埋め込まれた動画が自動再生されたり、横並びのリストのカルーセルが自動でスクロールされるなどの動作が他のコンテンツと並行して表示されて5秒以上続く場合、ユーザーがそれを非表示・一時停止・停止の操作をできる術を用意しなければならないというルールが定められています。

WCAGでは以下のような理由で対応理由が記載されています。

この達成基準を満たさないコンテンツでは、利用者がそのウェブページ全体を使用できない恐れがあるため

TalkBackとVoiceOver

スマートフォンを普段使っていてこの機能を触れる機会はあまり多くないと思います。
どちらもスクリーンリーダーと呼ばれる機能で、ONにすることでスマートフォン内のすべてのコンテンツに対してフォーカスが当たってそれを読み上げる機能です。主に目が不自由なユーザーが使う機能で、目が見えていなくてもスマートフォンを操作できるようにするための機能です。
Android、iOSそれぞれこの機能を設定アプリから設定できて、AndroidではTalkBack、iOSではVoiceOverと呼ばれています。

百聞は一見に如かずだと思いますので、色んなアプリで自分でこの機能をONにして試してみてください。

今回、このトークバックがONのときに自動更新コンテンツが画面内にあると困ることがありました。次の章で詳しくお話します。

Flutterでどのように対応するか

Flutterだからというわけでは一般的な対応策として、AmebaのAccessibility Guidelinesでまとめられているように自動更新されるコンテンツの近くに一時停止ボタンを用意するのが良いようです。

しかし、デザインの都合上それができない場合があったり、デザインがそれを考えられて作られていない場合があるかもしれません。

私が実際遭遇して困った場面として、画面内に自動再生される無限スクロールのカルーセルがあってスクリーンリーダーをONにしているとカルーセルがスクロールされている音が無限に鳴り響くというものでした。

そこでどうにか今ユーザーがスクリーンリーダーをONにしているかどうか検知してONにしている場合は自動再生を止めたかったです。

MediaQueryDataにあるaccessibleNavigationというプロパティがそれでした。
https://api.flutter.dev/flutter/widgets/MediaQueryData/accessibleNavigation.html

スクリーンリーダーをONにしているとこのプロパティがtrueになります。

先ほどのドキュメントに記載があるように、PlatformDispatcherのaccessibilityFeaturesがもとみたいです。

まとめ

すべてのユーザーに同じサービス価値を届けるためにアプリでもa11y対応は大切です
自動更新されるコンテンツには一時停止ができる術を用意しましょう
FlutterでスクリーンリーダーのON・OFFはMediaQueryDataのaccessibleNavigationのbool値で検知できます

FlutterでTalkBack、VoiceOverを検知してa11y対応

はじめに

「一時停止、停止、非表示を理解する」とは

TalkBackとVoiceOver

Flutterでどのように対応するか

まとめ

Links