Androidアプリの開発者がアクセシビリティ向上のために実践したいこと

2017/03/08

Amit Diwan

50

Articles in this issue reproduced from SitePoint
Copyright © 2017, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com. Translation copyright © 2017, KADOKAWA ASCII Research Laboratories, Inc. Japanese syndication rights arranged with SitePoint Pty Ltd, Collingwood, Victoria,Australia through Tuttle-Mori Agency, Inc., Tokyo

モバイルアプリの開発者やデザイナーは、アクセシビリティを保ち続ける必要があります。この記事では、アクセシビリティを向上させるためにやっておくべきことを紹介します。

タップしやすいコントロールのサイズ

さまざまなアプリがありますが、どのようなアプリでもユーザーは画面にタッチして操作します。コントロール(タッチできる範囲)は適切な大きさで、見やすくあるべきです。最低でも幅、高さともに48dp以上あるべきです。それはおよそ9ミリに当たり、ユーザーが選択したり実行したりするのに適したサイズとして推奨されています。

以下に、アクセシビリティの低いサイズと高いサイズのボタンの画像を紹介します。

Touchable control sizes -Incorrect

アクセシビリティが低い

Touchable control sizes -Correct

アクセシビリティが高い

テキストフィールドにプレースホルダーを表示する

EditTextは編集可能なUIコントロールです。アクセシビリティを向上させるために、EditTextフィールドにandroid:hint属性を加えます。この属性を追加することで、ユーザーがテキストフィールドが空のときに、なにを書けばよいかを理解しやすくなります。android:hint属性の内容は、以下のように書きます。

android:hint="Enter First Name"
Text Field Hints -Incorrect

アクセシビリティが低い

Text Field Hints - Correct

アクセシビリティが高い

カスタムコントロール

アプリケーションが目に見えるカスタムコントロールを持っているなら、仮想ビュー階層(virtual view hierarchy)を提供するとよいでしょう。アクセシビリティサービス(Accessibility Services)のデフォルトの処理ではユーザーのための十分な説明が得られない場合があるので、重要です。

仮想ビュー階層はアクセシビリティサービスに補完的な表示階層を提供して、バックグラウンドで動作します。アプリケーション開発者が画面上の実際の情報と厳密に一致させる方法と考えるとよいでしょう。

アクセシビリティイベントが発生したとき、アクセシビリティサービスはシステムからコールバックを受け取り、ユーザーのコンテキストに沿ったより役立つ情報を提供します。以下はカレンダーコントロールで、シングルビューで実装されています。

上の例は、日にちが選択されている画面ですが、デフォルトのアクセシビリティサービスは、年と月だけ知らせます。そのため、視覚障害のあるユーザーは日付を選ぶことが難しいです。アクセシビリティサービスは、特定の日付ではなく完全なカレンダーの説明情報だけを受け取るので、このような現象が発生します。

問題を回避するために、仮想ビュー階層を追加します。 DatePickerのような関連したプロンプトでも動作します。以下は「生年月日」を追加するDatePickerコントロールの例です。

DatePicker control to add Date of Birth

小さいコントロールに説明をセットする

アクセシビリティの向上のために、小さいコントロールのグループにはViewGroupを使います。もしアプリケーションの画面サイズに対して推奨される最小のサイズよりも小さい場合に追加します。グルーピングしたあとに、そのグループに対してandroid:contentDescriptionを追加します。

ViewGroupクラスは、Viewクラスのサブクラスで、Viewインスタンスを一緒にグループ化するためのコンテナとして動作します。

これらはよく使われるViewGroupのサブクラスです。

  • LinearLayout
  • RelativeLayout
  • GridView

以下に、RelativeLayoutViewGroupにコンテンツの説明を追加する方法を紹介します。

android:contentDescription要素に以下のRelativeLayoutを追加する例です。

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="900dp"
    android:background="#2E4058"
    android:contentDescription=”Send email section”
    tools:context="amit.net.demoapplication.MainActivity"> 

装飾用の画像やグラフィックの説明を加えない

アプリケーションの中には、ボーダーや装飾用の画像のようにユーザーアクションを受け付けない要素があります。これらの画像やグラフィックにはアクセシビリティコンテンツの説明、すなわちandroid:contentDescriptionの追加は避けます。

以下がアプリ内の装飾用の画像に説明を加えなかった例です。

Decorative images and graphics

スピーチボタンのような機能が変化するコントロール

機能が変化するボタンやコントロールの場合、android:contentDescriptionは適切に変更するべきです。

たとえば、2つのボタン(スピークとポーズ)があるとき、ユーザーがアクセスすると機能が変化します。スピークが押されたらユーザーは入力します、ストップが押されたら話すのをやめます。

以下の例では、ボタンがスピークとポーズで切り替わります。そのため、以下のコンテンツの説明をandroid:contentDescription要素に追加します。

Function- Speak

android:contentDescription="Speak" 

Function- Pause

android:contentDescription="Pause" 

適切なアプリのタイトル

アプリのタイトルは、弱視や視覚障害のあるユーザーも含め、すべてのユーザーにとって重要です。コンテンツのタイトルは、スクリーンリーダー、TalkBack、VoiceOverで読み上げられます。

たとえば、AndroidManifest.xmlにアプリのタイトルを追加します。

android:label="@string/app_name"

Stringの値はstrings.xmlにセットします。

<string name="app_name">Voter Registration</string> 

アプリのタイトルは以下のようにVoter Registrationになります。

App title -correct

もしアプリのタイトルを変えなければ、Androidは自動的にアプリケーションネームを表示します。

App title -incorrect

適度な余白

コントロール間の適度な余白によって、ユーザーは正しくテキストを読み取りやすくなります。以下に良い例と悪い例を紹介します。

No Spacing -incorrect

悪い例

見て分かるように、とても読みにくいです。しかし、もし適度な余白があれば、ボタンに書かれていることが簡単に読めて違いを理解できます。

Spacing - correct

良い例

色のコントラスト

WCAGでは、前面と背面の色のコントラストは、テキストが読みやすくなるようにするべきだとしています。

どのような色のコントラスト比率でもオンラインツールを使えば確認できます。

Check Contrast Ratio

上のようにコントラスト比率を確認して、もし結果がYesになれば、適切な配色です。

たとえば、以下のテキストはWCAGが推奨している前面と背面の色です。

Correct Contrast Ratio for app

これを実際に試すと、以下のようになります。

Correct Contrast Ratio added to app for text “Vote Now!”

チェックリスト

  • タップしやすいコントロールのサイズ
  • テキストフィールドにプレースホルダーを表示する
  • 表示中のコントロールを仮想ビュー階層に含める
  • android:contentDescription要素を追加する
  • もし機能が変わるコントロールならandroid:contentDescriptionも変更する
  • 適切なapp_nameを設定する
  • コントロール間に適度な余白を入れる
  • 前面と背面の色に適切なコントラスト比率を適用する

(原文:Android App Accessibility Checklist

[翻訳:萩原伸悟/編集:Livit

Copyright © 2017, Amit Diwan All Rights Reserved.

Amit Diwan

Amit Diwan

コンピューターアプリケーションの修士(MCA)で、現在はWebサイトやソフトウェア開発のシニアリサーチフェローとして働いています。フリーランスのテクニカルライター、プログラマーとしてさまざまな仕事をしています。

Loading...