Edit the Blog Post Header component above this, then place your content here, then fill out the Related Articles section below, if possible. You should have at least one related article and ideally, all three.
Feel free to add supplementary content to the sidebar at right, but please retain the Twitter component (it can live at the bottom of your added content).
This text component can be edited or deleted as necessary.
Related articles only have an image (the squarer version of the banner) and a title. This text can be deleted. Place 1-3 related articles.
Fire OSは、携帯用タブレットから大画面テレビまで、様々なデバイスに対応しています。開発するアプリは、アニメを見る聴覚障がいのあるお子さまから、拡大機能を使って読書を楽しむ高齢者まで、様々なユーザーに利用されることでしょう。アプリ開発者として、ユーザーの能力や使用環境に関係なく、誰もが快適に使えるアプリを提供する必要があります。
このため、設計時にはアクセシビリティを念頭に置かなければなりません。アクセシブルなデザインは、操作性と包括性を大きく向上させます。さらに、結果としてインターフェースがシンプルになり、コードのメンテナンス性も高まることが多いのです。
ここでは、主要な機能の一部と、誰もが使えるFireアプリを開発するためのヒント、戦略についてご紹介します。
Fireデバイスの様々な画面サイズと入力方式があります。Fireタブレットはタッチベースである一方、Fire TVは音声やリモコンで操作します。こうした幅広い環境に向けて開発を行う場合、異なる操作方法に対応できるよう、入念な計画が不可欠です。
FireタブレットとFire TVは両方とも、VoiceView(スクリーンリーダー)と拡大鏡をサポートしています。Fireタブレットは、音声によるアクセスナビゲーション、視線で操作、点字ディスプレイもサポートしています。Fire TVでは、クローズドキャプション、目の不自由な方向けのテキストバナー、VoiceViewナビゲーションを利用できます。
Amazonは開発者向けにFireタブレットとFire TVについてのアクセシビリティガイドを用意しています。ただし、重要なのはコードだけではありません。これらのアクセシビリティツールがユーザーエクスペリエンスの形成にどのような役割を果たすのかを理解する必要があります。タッチに最適なレイアウトがD-Padナビゲーションにも適しているとは限りません。また、1人のユーザーがタスクに応じて音声と画面拡大機能を使い分けることもあります。
FireタブレットとFire TVは、VoiceViewや拡大鏡といった基本的なアクセシビリティ機能を共有していますが、これらの機能の表示方法や操作方法は、デバイスによって大きく異なる場合があります。一般に、Fireタブレットの方が個人による操作を厚くサポートしている一方、Fire TVではリモコン対応の共用ユーザー補助機能を重視しています。両方に対応した設計を行う場合は、これらの長所を把握し、各デバイスで機能が同じように動作すると思い込まないようにする必要があります。
各種ユーザー補助機能は、各デバイスタイプにどのように対応しているのでしょうか。 次の表に、プラットフォームごとの各機能の対応状況を示します。
ユーザー補助機能 |
Fireタブレット |
Fire TV |
VoiceViewスクリーンリーダー |
||
拡大鏡 |
||
フォントサイズ調整 |
該当なし |
|
ハイコントラストテキスト |
||
色補正 |
該当なし |
|
色反転 |
該当なし |
|
クローズドキャプション |
||
オーディオディスクリプション |
||
ステレオをモノラルに変換 |
該当なし |
|
Switch Access |
該当なし |
|
音声ナビゲーション |
限定的(Alexaを介して) |
|
リモコンのボタンの音声通知 |
該当なし |
|
テキストバナー |
該当なし |
|
聴覚支援 |
限定的(Bluetoothを介して) |
|
ユーザープロファイル |
該当なし |
〇(パーソナライズされたユーザー補助機能の設定) |
読書支援 |
〇(Word Wise、リーディングルーラー) |
該当なし |
「視線で操作」のサポート |
該当なし |
Fire OSのアクセシビリティ対応アプリを開発するには、個々の機能を単独で実装するだけでは十分ではありません。現実的なシナリオでアプリがどのように機能するかに焦点を当てることが重要になります。
これらの原則への理解を深めることで、アクセシビリティへの配慮という意図から、実際に誰もが使いやすい機能の実装を実現するデザインに進化していくでしょう。これは大きな一歩です。しかし、コードの観点からはどのようになるのでしょうか。 ここで、ある機能の実装例をご紹介します。
低視力のユーザーがデジタルコンテンツにアクセスする場合、画面拡大機能を利用します。しかし、コンテンツが拡大されると、一度に表示できるのは画面の一部のみになります。この場合、その時点のビューポートから外れた場所にあるコンテンツを見逃がしやすくなります。さらに、ユーザーがシステムフォントのサイズを大きくした場合、スケーラビリティを考慮せずに設計されたレイアウトは崩れやすく、テキストが途中で切れたり、要素が重なり合ったりすることもあります。
検証が失敗したときにエラーメッセージが表示される、入力フォームを想像してみてください。ユーザーが設定したフォントサイズに合わせて文字を拡大・縮小できるプロフィールページなど、具体的な例を考えてみましょう。拡大鏡のユーザーを適切にサポートするためには、コンテンツの可視性管理と柔軟に対応できるレイアウト設計の両方を実装することが重要です。
拡大鏡を使用するユーザーが動的なコンテンツを見逃さないよう、新しいコンテンツが表示された際には、自動的に拡大表示領域内に表示されるように実装してください。
submitButton.setOnClickListener {
if (emailInput.text.isEmpty()) {
errorMessage.visibility = View.VISIBLE
// ユーザーがズームインすると、画面に表示される新しいビューが
// その時点で拡大されているビューポートの外側になる可能性がある。
//
// requestRectangleOnScreen()は、ビューをスクロールして
// 指定された長方形(この場合はerrorMessageビュー全体)を
// ビューに入れるようシステムに指示する。
val rect = Rect()
errorMessage.getHitRect(rect)
errorMessage.requestRectangleOnScreen(rect, false)
} else {
errorMessage.visibility = View.GONE
}
}
ここで重要なメソッドは requestRectangleOnScreen(rect, false)で、表示されたエラーメッセージを、その時点で拡大されているユーザーのビューポートに自動的に移動します。これにより、ユーザーが重要な情報を見逃すことがなくなります。
さまざまなデバイスとユーザー設定で的確にスケーリングするには、適切な単位を選択します。例えば次のようになります。
<TextView
android:id="@+id/user_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="ユーザー名の例"
android:textSize="20sp"
android:layout_marginStart="16dp"
app:layout_constraintStart_toEndOf="@id/profile_icon"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@id/profile_icon" />
この例のポイントについて詳しく説明します。
最後に、ConstraintLayoutを使用して、コンテンツの変化に適応するビュー間に関係を作成します。例えば次のようになります。
<TextView
android:id="@+id/user_bio"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="これはプロフィールのサンプルです。折り返されて複数の行になっており、スケーラブルな単位(sp)を使用することでレイアウトを崩さずにテキストを増やせることがわかります。"
android:textSize="16sp"
android:layout_marginTop="8dp"
app:layout_constraintStart_toStartOf="@id/user_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/user_name" />
制約関係(layout_constraint*で指定)を使用すると、テキストの増減に応じてレイアウトを調整できます。コンテンツが切れたり重なったりすることもありません。
これらの対応を実装する際は、以下の項目でレイアウトのテストを必ず実施してください。
以下のアクセシビリティ機能についても、対応の実装を検討してください。
開発中、実際のFireタブレットやFire TVデバイスでユーザー補助機能をテストしてください。VoiceView、拡大鏡、Switch Accessをテストします。最も重要なのは、これらのアクセシビリティ機能を実際に必要とするユーザーからフィードバックを得ることです。実環境でのテストこそが、最も確実な検証方法となります。
アクセシビリティを、特別に付与される機能、または後から付け足すものと考えるべきではありません。あらゆるバックグラウンド、能力、期待を持つ多様なユーザーが、あなたのアプリを利用できるようにするために不可欠な要素です。こうした幅広いユーザーを念頭に置いて設計すれば、さらに包摂性の高いソフトウェアを開発できるでしょう。結果として、すべてのユーザーにとってより洗練され、直感的に使いやすいアプリが実現できます。
既存のFireアプリをアップデートする場合も、新たにアプリを開発する場合も、必要に応じて小さなことから始めましょう。たとえば、アイコンにラベルを付けたり、VoiceViewをテストしたりしてみます。指ではなくリモコンでUIを操作できるようにしてみましょう。各ステップを踏むことで、通常は数多くのユーザーのエクスペリエンスを改善できるはずです。