AndroidのAccessibilityについて

この記事ではGoogleが提供しているPathwayを行いながら内容を自分のためのノートのような形式でまとめていきます。CodeLabを参考にしながらAccessibilityを考慮したアプリについても勉強していきます。

Accessibilityとは？

アクセシビリティ（英: accessibility）とは、障害者が他の人と同じように物理的環境、輸送機関、情報通信及びその他の施設・サービスを利用できることをいう。ウェブページにおけるアクセシビリティは、高齢者や障害者、また異なる情報端末やソフトウェアにおいても、情報を取得あるいは発信できる柔軟性に富んでいること（あるいはその度合い）を意味する。公共サービスでは、障害があっても知る権利を保障する情報保障によって重要となる。
引用：Wikipedia https://ja.wikipedia.org/wiki/%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3

Androidにおいてもユーザー補助機能が存在していて、GoogleからもDeveloper向けの情報としてユーザー補助機能の設計やテストについての様々な資料が用意されています。

AndroidでのAccessibility

Accessiblityについての設定がどこにあるのかについて説明します。Androidの設定画面を開きます。そこからユーザー補助機能を選択します。開かれた画面がユーザー補助機能の設定画面になっています。

この記事では一つ一つの機能については確認しないので、このリンクを見ていただけるとわかりやすいと思います。

Androidアプリに実際に導入してみる。

Android developersにはユーザー補助機能の重要な要素を実装する際のガイドラインが存在しています。まずはこのページに記載されていることからまとめていきます。

1. テキストの見やすさの向上

アプリの中のテキストにはテキスト自体の色とその背景色の明るさの差（コントラスト比率）に特定の閾値以上であることが推奨されています。

コントラスト比率：画面上の一番明るい白表示と一番暗い黒表示との明るさ(輝度)の比率のことです。「30000:1」(3万対1)などと表記し、比率が大きいほど明暗がはっきりと表示できることを意味します。
引用:コトバンク : https://kotobank.jp/word/%E3%82%B3%E3%83%B3%E3%83%88%E3%83%A9%E3%82%B9%E3%83%88%E6%AF%94-506460

具体的な値についてはMaterialDesignのAccessibilityやAndroid Developersに以下のように示されていました。

フォントのサイズが小さいテキストについては背景に対するコントラスと比を4:5:1以上
フォントのサイズが大きいテキストについては背景に対するコントラスト比を3:0:1以上

2. 大きくシンプルなUIを利用する

Android developersでは見やすさそして、タップしやすさという観点から操作対象のUIのサイズを少なくとも48dp×48dpより大きいほうが良いとされています。

android:paddingHorizontal, android:minWidthの合計が48dp以上（Horizontalの場合左右に指定した分のpaddingが入ります。）
android:paddingVertical, android:minHeightの合計が48dp以上(Verticalの場合上下に指定した分のpaddingが入ります。）
以下のxmlが推奨されている値に沿ったImageButtonになります。

<ImageButton 
    android:paddingHorizontal="4dp"
    android:minWidth="40dp"
    
    android:paddinVertical="8dp"
    android:minHeight="32dp"/>

3. それぞれのUI要素の説明をする

アプリに表示されているUIの目的について説明を含めることがお勧めされています。以下のコードスニペットに示されるようにそのUIの説明をcontentDescription 属性に含めます。この場合はImageViewに説明を追加しています。

<ImageView
    ...
    android:contentDescription="@string/inspect"/>

説明を入れる際の注意点

UIのTypeは説明に含めないこと（上でいうところのImageViewは入れない）
スクリーンリーダーは元々タイプを自動読み上げしてくれるので
例）送信するボタンには、"送信ボタン"ではなく"送信"と説明を入れます。
UIの説明はそれぞれ固有のものにすること
スクリーンリーダーユーザーが今どこにフォーカスが当てられているのかわからならなくなることを防ぐためです。特にRecyclerViewのような繰り返し同じ項目が並ぶものについてもそれぞれ別の説明を入れる必要があります。都道府県をRecyclerViewを使って表しているのであれば、それぞれに都道府県を反映させる必要があります。

UIに装飾的効果を加えるだけのグラフィック要素のある場合は、説明を@nullにします。もし、アプリのminSdkVersionが16以上の場合は代わりにグラフィック要素のandroid:importantForAccessibility 属性をnoに設定することができます。

Accessibilityのテスト方法について

Accessibilityのテストを行うことによって、あらゆる人が多用途的に利用することが出来るのかということを明確に出来ます。Accessibilityのテストを行う方法としては以下の四つがあげられます。

Manual testing
実際にAndroidが提供しているユーザー補助機能を利用してテストを行います。
Testing with analysis tools
検証ツールを用いてアプリのaccessibilityを見つけます。
Automated testing
EspressoとRoboletricを利用する際にユーザー補助機能テストを有効にします。
EspressoとはUIをテストをするためのフレームワークです。
Roboletricもテスト用のフレームワークです。
User testing
実際にユーザーに利用してもらいアプリについてのフィードバックを貰います。

Accessibilityを考慮したアプリの作成

それではAccessibilityに考慮したアプリを知るために次のCodeLabを行いながら直していくことで勉強していきます。

今回参考にさせて頂くCodeLabでは以下の三点に注力しながら進めていきます

ラベルがない
タップターゲットが不適切
前景と背景のコントラストが不十分

これら三つのユーザーに対する影響やどこに問題があるのかを確認する方法、それらの修正方法についてまとめてあるCodeLabになっているので順を追って確認していきたいと思います。

初めに

今回のCodeLabではCounterというデモアプリを利用し、そのアプリの問題のある点を改良していくという手順で学習を進めていきいます。まず以下のソースコードを自分の環境にダウンロードしてきます。

そしてAndroid Studioを起動して、Counterプロジェクトを開き実際に動かしてみます。動かしてみると画面にCounterの文字とカウント回数、そしてその数を増減するためのボタンが存在しています。次にこのアプリのどこにAccessibilityとして問題があるのかということの調査を行っていきます。

Accessibilityにおける問題の調査方法

ユーザー補助機能を利用する際に発生する問題を調査するために、ユーザー補助検証ツールというアプリが存在しています。

このアプリの使い方について学んでいきます。ユーザー補助検証ツールとはGoogleが開発したツールで、ユーザー補助の改善点（タップターゲットの大きさやコントラストを強めるなど）を示して、ユーザー補助を必要とする人がアプリを利用しやすくする方法を提示してくれます。

先ほどCounterアプリを動かしていた端末にユーザー補助検証ツールをインストールします。
次に端末の設定からユーザー補助に移動してユーザー補助検証ツールを有効にします。（もしくはショートカットを有効にしておくと画面上にショートカットが作成されていつでもon/offが切り替えられるので便利です。）
有効にした状態でCounterアプリを開くと以下のようになっています。

新たに表示されたチェックのボタンを利用することで検証を開始することが出来ます。

Counterアプリの検証

ユーザー補助検証ツールの導入が出来たので実際に使って検証を行っていきます。表示されたボタンを押すと記録とスナップショットという二つが出てきます。そしてスナップショットを押すと6つの提案というAccessibilityとして6つ課題があること、そしてどの部分に課題があるのかということを強調表示してくれます。

実際に強調表示されているところを見てみると以下の画像のようにどのような問題があり、どのように修正するべきなのかまで記載されています。今回の場合は記事の上の方でも記載されている文字と背景のコントラスト比が低いことがあげられています。

また、こちらのカウント数を増減するためのボタンについては、二種類の提案があげられています。一つ目がUIアイテムに対してラベルが追加されていないため、読み上げ機能が認識することが出来ない可能性があるという問題があります。また、タッチターゲットのサイズについても現状のサイズが24dp×24dpとなっているので、推奨されている48dp×48dpまで上げたほうが良いという提案がされています。

Counterアプリの修正を行ってみる

実際にユーザー補助検証ツールで提案された箇所についてCounterアプリの修正を行っていきます。

カウンターの数字の修正

まず初めにCounterの数字におけるコントラスト比の修正を行っていきます。現状の数字はTextViewでxmlに定義されていて、背景色とテキストの色については以下のようになっています。

android:textColor="@color/grey"
android:background="@color/lightGrey"

コントラスト比をあげる方法として考えられるのが背景を削除してしまい、もっと明るい背景色にするか、テキストの色を逆にもっと暗くする方法が考えられます。今回はテキストの色を暗くする方法を取ります。
以下のようにxmlを変更します。

android:textColor="@color/darkGrey"
android:background="@color/lightGrey"

このように変更をしてまたユーザー補助検証ツールを利用してみます。すると今回はカウンターの数字部分には提案が出ていないことが確認できます。

カウンターのボタンの修正

では次にカウンターのボタンの修正を行っていきます。ボタンには二種類の提案がだされている状態になっています。

ラベルが存在していない
タッチターゲットのサイズが小さい

まず初めにラべルのほうから改善を行っていきます。ラベルが存在していないとTalkbackのようなスクリーンリーダーを用いたさいに「ラベルなし、ボタン」と読み上げられるだけになってしまうので、なんのボタンなのかの識別ができません。現在のカウンターのボタン（ImageButtonは以下のような定義になっています。）

<ImageView
    android:id="@+id/add_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"/>

ラベルの追加は android:contentDescription 要素を追加することで追加することが出来ます。実際に追加すると以下のようになります。

<ImageView
    android:id="@+id/add_button"
    ...
    android:contentdescription = "@string/increment"/>

減らすボタンの方でも同様の修正を行い、またユーザー補助検証ツールを使って確認をしてみます。するとラベルについての提案が消えていることがわかります。

次にタップターゲットのサイズの提案の方の修正を行っていきます。現状のボタンのサイズでは24dp×24dpとなっていて、本来推奨されている48dp×48dpからはとても小さいサイズになってしまっていることがわかります。ボタンのタップ可能範囲を拡大する方法についてはいくつか存在しています。

アイコンの周囲にPaddingを追加する。
minWidth, minHeightを追加する（アイコンが大きくなります。）
TouchDelegateを追加する（TouchDelegateとはViewのタッチ可能エリアを拡大するものです。）

現状のタップ可能エリアについて開発者向けオプションの描画カテゴリからレイアウト境界を表示を選択してボタンのどの部分がタップできるのかを確認します。以下のスクリーンショットからもわかるようにタップ可能範囲はとても小さくなってしまっています。

修正を加えていきます。現状のImageButtonのサイズは以下のように定義されています。

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    ... />

今回はそれぞれの方向に12dpのpaddingを追加することによって、縦横それぞれ24dp分が追加される形でタップ可能範囲を広げます。これによってタップ可能範囲は48dp×48dpとなります。

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="12dp"
    ... />

修正が終わったらもう一度ユーザー補助検証ツールを使って確認をしてみます。これでボタンに関する提案も消えたことが確認できます。

最後にCodeLab内にはなかったのですが、ActionBarの中の提案についても修正を行ってみようと思います。提案の内容としてはActionbarの中のテキストがdipで表記されているのでspで指定するように記載されているのがわかります。

今回はActionBarで表示されていたのをToolBarで表示されるように変更をしてから、タイトルのサイズをxml上でspに変更し、またコントラスト比をあげるために背景色も変更しました。最終的に問題のある個所がなくなると提案なしという表示になります。

ユーザー補助検証ツールの限界

ユーザー補助検証ツールは大幅にユーザー補助を改善することが出来ますが、手作業のテストを置き換えるものではありません。実際にユーザーに利用してもらい改善を行っていく必要があります。例えば、ユーザー補助検証ツールでは、ラベルがあるかないかについての判定は出来ますが、実際にそのラベルがユーザーにとって正しいものなのかという判定は出来ません。なのでユーザー補助検証ツールでユーザー補助への取り組みを開始できますが、実際のユーザーにテストをしてもらうことを忘れてはいけません。Code Labに記載されていました。

まとめ

AndroidのAccessibilityの勉強をしてみて今までのUI対する意識がとても低いということに気づかされました。
ユーザー補助は自分が思っていたよりも多くの種類があることも知ることが出来たので今後まとめていきたいです。
常に自分の端末にユーザー補助検証ツールのショートカットを入れておくと、アプリを触っていてすぐに確認できてとても勉強になります。

参考資料一覧