アプリのユーザー補助機能の改善に関する原則

ユーザーのユーザー補助機能をサポートするため、Android フレームワークでは以下の機能を使用できます。 アプリのコンテンツをユーザーに提示できるユーザー補助サービスを作成する ユーザーの代わりにアプリを運用できます

Android では、次のようなシステムのユーザー補助サービスを提供しています。

  • TalkBack: ロービジョンの方や目の見えない方を助けます。音声でコンテンツを読み上げるための ユーザーのジェスチャーに反応してアプリのアクションを実行します。
  • スイッチ アクセス: 運動障がいのある人の助けになりますインタラクティブな要素がハイライト表示される ユーザーがボタンを押すとアクションを実行します。以下のことが可能になります。 1 つか 2 つのボタンだけでデバイスを操作できる

ユーザー補助機能を必要とするユーザーがアプリを適切に使用できるようにするには、 アプリは、このページに記載されているベスト プラクティスに アプリをもっと便利に使えるようにする アクセス可能。

以降のセクションで説明するベスト プラクティスは、 アプリのユーザー補助機能をさらに改善できます

要素にラベルを付ける
ユーザーがそれぞれのインタラクティブ キャンペーンのコンテンツと目的を理解できるようにする必要があります。 UI 要素を追加できます
ユーザー補助アクションを追加する
ユーザー補助アクションを追加すると、ユーザー補助機能のユーザーに アプリ内のクリティカル ユーザーフローを完了するためのサービスを提供します。
システム ウィジェットを拡張する
フレームワークに含まれるビュー要素ではなく、 独自のカスタムビューを作成できますフレームワークのビュークラスとウィジェット クラスは、アプリに必要なほとんどのユーザー補助機能をすでに提供しています。
色以外の手がかりも取り入れる
ユーザーが、各要素のカテゴリを明確に区別できるようにする必要があります。 構築できますそのためには、色だけでなく、パターンや位置によって、こうした区別を表します。
メディア コンテンツのユーザー補助機能を強化する
アプリの動画コンテンツや音声コンテンツに説明を追加して、 このコンテンツを視聴しているクリエイターは、視覚や聴覚の手がかりだけに頼る必要はありません。

要素にラベルを付ける

それぞれについて有用でわかりやすいラベルをユーザーに提供することが重要です インタラクティブな UI 要素を作成できます。各ラベルは、その意味と説明を 指定することもできます。TalkBack などのスクリーン リーダーが読み上げる ユーザーに提示します

ほとんどの場合、UI 要素の説明はレイアウト内で指定します。 要素を含むリソース ファイルを指定します。通常、ラベルは contentDescription 属性（アプリの作成に関するガイドを参照） アクセシビリティを向上そこで、 以降のセクションでは、他にもいくつかのラベル付け手法について説明します。

編集可能な要素

編集可能な要素（ EditText 個のオブジェクトを含め、 要素自体での有効な入力の例を示すテキストのほか、 スクリーン リーダーが利用できるようになっています。その状況では、次のスニペットに示すように、android:hint 属性を使用できます。

<!-- The hint text for en-US locale would be
     "Apartment, suite, or building". -->
<EditText
   android:id="@+id/addressLine2"
   android:hint="@string/aptSuiteBuilding" ... />

この場合、View オブジェクトには android:labelFor 属性が必要です。 EditText 要素の ID に設定します。詳しくは、次をご覧ください。 。

一方が他方の説明をする要素のペア

通常、EditText 要素には対応する ユーザーが行う操作を記述する View オブジェクト EditText 要素に入力します。この関係を指定するには、 View オブジェクトの android:labelFor 属性。

このような要素ペアのラベル付けの例を、次のスニペットに示します。


<!-- Label text for en-US locale would be "Username:" -->
<TextView
   android:id="@+id/usernameLabel" ...
   android:text="@string/username"
   android:labelFor="@+id/usernameEntry" />

<EditText
   android:id="@+id/usernameEntry" ... />

<!-- Label text for en-US locale would be "Password:" -->
<TextView
   android:id="@+id/passwordLabel" ...
   android:text="@string/password
   android:labelFor="@+id/passwordEntry" />

<EditText
   android:id="@+id/passwordEntry"
   android:inputType="textPassword" ... />

コレクション内の要素

コレクションの要素にラベルを追加する場合、各ラベルは一意である必要があります。 これにより、システムのユーザー補助サービスは画面上の 1 つの 要素を認識する必要はありません。この通知により、ユーザーは UI を巡回したり、要素にフォーカスを移動したりすると、 検出できます。

特に、テキストやコンテキスト情報を 再利用するレイアウト内の要素（たとえば、 RecyclerView これにより、各子要素は一意に識別されます。

そのためには、次のコード スニペットに示すように、コンテンツの説明をアダプター実装の一部として設定します。

Kotlin

data class MovieRating(val title: String, val starRating: Integer)

class MyMovieRatingsAdapter(private val myData: Array<MovieRating>):
        RecyclerView.Adapter<MyMovieRatingsAdapter.MyRatingViewHolder>() {

    class MyRatingViewHolder(val ratingView: ImageView) :
            RecyclerView.ViewHolder(ratingView)

    override fun onBindViewHolder(holder: MyRatingViewHolder, position: Int) {
        val ratingData = myData[position]
        holder.ratingView.contentDescription = "Movie ${position}: " +
                "${ratingData.title}, ${ratingData.starRating} stars"
    }
}

Java

public class MovieRating {
    private String title;
    private int starRating;
    // ...
    public String getTitle() { return title; }
    public int getStarRating() { return starRating; }
}

public class MyMovieRatingsAdapter
        extends RecyclerView.Adapter<MyAdapter.MyRatingViewHolder> {
    private MovieRating[] myData;


    public static class MyRatingViewHolder extends RecyclerView.ViewHolder {
        public ImageView ratingView;
        public MyRatingViewHolder(ImageView iv) {
            super(iv);
            ratingView = iv;
        }
    }

    @Override
    public void onBindViewHolder(MyRatingViewHolder holder, int position) {
        MovieRating ratingData = myData[position];
        holder.ratingView.setContentDescription("Movie " + position + ": " +
                ratingData.getTitle() + ", " + ratingData.getStarRating() +
                " stars")
    }
}

関連コンテンツのグループ

曲の詳細やメッセージの属性など、自然なグループを構成する複数の UI 要素をアプリで表示する場合、通常 ViewGroup のサブクラスであるコンテナ内にそれらの要素を配置します。このコンテナ オブジェクトの android:screenReaderFocusable 属性を true に設定し、各内部オブジェクトの android:focusable 属性を false に設定します。このように、ユーザー補助サービスは、 要素コンテンツの説明を順番に 1 つのお知らせに含めるようにします。 関連する要素の統合により、支援技術を利用するユーザーは 画面上の情報をより効率的に見つけることができます

次のスニペットには、特定のトピックに関連する コンテナ要素 ConstraintLayout のインスタンスには、 android:screenReaderFocusable 属性を true に設定し、 TextView 要素の android:focusable 属性は次のように設定されています。 false:

<!-- In response to a single user interaction, accessibility services announce
     both the title and the artist of the song. -->
<ConstraintLayout
    android:id="@+id/song_data_container" ...
    android:screenReaderFocusable="true">

    <TextView
        android:id="@+id/song_title" ...
        android:focusable="false"
        android:text="@string/my_song_title" />
    <TextView
        android:id="@+id/song_artist"
        android:focusable="false"
        android:text="@string/my_songwriter" />
</ConstraintLayout>

ユーザー補助サービスが内部要素の説明を一度に読み上げるので、各説明は要素の意味を伝える一方で、できる限り短くすることが重要です。

注: 通常は、 グループのコンテンツの説明を作成することは避け、 子これにより、グループの説明が脆弱になり、 グループの説明が、表示されるテキストと一致しなくなることがあります。

リストまたはグリッドのコンテキストでは、スクリーンリーダーはリストのテキストを統合したり、 Grid 要素の子テキストノードを指定します。この設定は、 あります。

ネストされたグループ

アプリのインターフェースが多次元の情報（ フェスティバル イベントの日別リストを表示するには、android:screenReaderFocusable を使用します。 属性を宣言します。このラベル付けスキームは、 画面の状態を検出するために必要な通知の数と 内容、各お知らせの長さなどを考慮します。

次のコード スニペットでは、外側のグループ内で内側のグループをラベル付けする方法の一例を示します。

<!-- In response to a single user interaction, accessibility services
     announce the events for a single stage only. -->
<ConstraintLayout
    android:id="@+id/festival_event_table" ... >
    <ConstraintLayout
        android:id="@+id/stage_a_event_column"
        android:screenReaderFocusable="true">

        <!-- UI elements that describe the events on Stage A. -->

    </ConstraintLayout>
    <ConstraintLayout
        android:id="@+id/stage_b_event_column"
        android:screenReaderFocusable="true">

        <!-- UI elements that describe the events on Stage B. -->

    </ConstraintLayout>
</ConstraintLayout>

テキスト内の見出し

一部のアプリでは画面上に表示するテキスト グループの概要を、見出しを使って示すことがあります。特定の View 要素が見出しを表す場合、その要素の android:accessibilityHeading 属性を true に設定することでそうした意図をユーザー補助サービスに示すことができます。

補助サービスのユーザーは、段落間や単語間ではなく、見出し間を移動するように選択できます。このように柔軟性が増したことで、テキスト ナビゲーションの利便性が向上します。

ユーザー補助ペインのタイトル

Android 9（API レベル 28）以上では、画面のペインにユーザー補助に利用できるタイトルを提供できます。ユーザー補助機能にとってペインは、フラグメントのコンテンツのように、ウィンドウ内で視覚上区分けされた部分です。ユーザー補助サービスは、 ウィンドウに似た動作をする、アプリのコンテナ ウィンドウに似た動作を 表示されます。それにより、ユーザー補助サービスでは、ペインの外観やコンテンツが変更されたときに、詳細な情報をユーザーに提供できます。

ペインのタイトルを指定するには、次のスニペットに示すように、android:accessibilityPaneTitle 属性を使用します。

<!-- Accessibility services receive announcements about content changes
     that are scoped to either the "shopping cart view" section (top) or
     "browse items" section (bottom) -->
<MyShoppingCartView
     android:id="@+id/shoppingCartContainer"
     android:accessibilityPaneTitle="@string/shoppingCart" ... />

<MyShoppingBrowseView
     android:id="@+id/browseItemsContainer"
     android:accessibilityPaneTitle="@string/browseProducts" ... />

装飾的要素

UI 内のある要素が視覚的な間隔をあけるため、または見た目のためにのみ存在する場合、その android:importantForAccessibility 属性を "no" に設定してください。

ユーザー補助アクションを追加する

ユーザー補助サービスのユーザーがすべての操作を ユーザーフローを把握できますたとえば、ユーザーがスペース内のアイテムをスワイプすると、 このアクションをユーザー補助サービスに公開して、ユーザーが 同じユーザーフローを完了する代替手段です

すべてのアクションにアクセスできるようにする

TalkBack と Voice Access のユーザー またはスイッチ アクセスで特定のユーザーフローを完了するために、別の方法が必要になる場合があります。 クリックします。ドラッグ&ドロップやスワイプなどのジェスチャーに関連するアクションについては、 アプリは、ユーザーがアクセスしやすい方法でアクションを公開できます。 ユーザー補助サービスも提供しています

ユーザー補助アクションの使用 アクションを完了するための代替手段をユーザーに提供できます。

たとえば、ユーザーがアプリでアイテムをスワイプできるようにする場合は、 次のようなカスタムのユーザー補助アクションを使用して、機能を公開します。

Kotlin

ViewCompat.addAccessibilityAction(
    // View to add accessibility action
    itemView,
    // Label surfaced to user by an accessibility service
    getText(R.id.archive)
) { _, _ ->
    // Same method executed when swiping on itemView
    archiveItem()
    true
}

Java

ViewCompat.addAccessibilityAction(
    // View to add accessibility action
    itemView,
    // Label surfaced to user by an accessibility service
    getText(R.id.archive),
    (view, arguments) -> {
        // Same method executed when swiping on itemView
        archiveItem();
        return true;
    }
);

With the custom accessibility action implemented, users can access the action through the actions menu.

Make available actions understandable

When a view supports actions such as touch & hold, an accessibility service such as TalkBack announces it as "Double tap and hold to long press."

This generic announcement doesn't give the user any context about what a touch & hold action does.

To make this announcement more descriptive, you can replace the accessibility action’s announcement like so:

Kotlin

ViewCompat.replaceAccessibilityAction(
    // View that contains touch & hold action
    itemView,
    AccessibilityNodeInfoCompat.AccessibilityActionCompat.ACTION_LONG_CLICK,
    // Announcement read by TalkBack to surface this action
    getText(R.string.favorite),
    null
)

Java

ViewCompat.replaceAccessibilityAction(
    // View that contains touch & hold action
    itemView,
    AccessibilityNodeInfoCompat.AccessibilityActionCompat.ACTION_LONG_CLICK,
    // Announcement read by TalkBack to surface this action
    getText(R.string.favorite),
    null
);

This results in TalkBack announcing "Double tap and hold to favorite," helping users understand the purpose of the action.

Extend system widgets

Note: When you design your app's UI, use or extend system-provided widgets that are as far down Android's class hierarchy as possible. System-provided widgets that are far down the hierarchy already have most of the accessibility capabilities your app needs. It's easier to extend these system-provided widgets than to create your own from the more generic View, ViewCompat, Canvas, and CanvasCompat classes.

If you must extend View or Canvas directly, which might be necessary for a highly customized experience or a game level, see Make custom views more accessible.

This section uses the example of implementing a special type of Switch called TriSwitch while following best practices around extending system widgets. A TriSwitch object works similarly to a Switch object, except that each instance of TriSwitch allows the user to toggle among three possible states.

Extend from far down the class hierarchy

The Switch object inherits from several framework UI classes in its hierarchy:

View
↳ TextView
  ↳ Button
    ↳ CompoundButton
      ↳ Switch

新しい TriSwitch クラスを作成する場合、Switch クラスから直接拡張することをおすすめします。このように、Android のユーザー補助機能は フレームワーク TriSwitch クラスが提供するほとんどのユーザー補助機能は、 ニーズ:

  • ユーザー補助アクション: ユーザー補助のメカニズムに関する情報。 サービスは、TriSwitch で実行される各ユーザー入力をエミュレートできます。 渡されます。（View から継承）。
  • ユーザー補助イベント: ユーザー補助サービスに関する Google の 画面が変更されたときに TriSwitch オブジェクトの外観を おすすめします。（View から継承）。
  • 特性: 各 TriSwitch オブジェクトの詳細。たとえば、 表示されるテキストのコンテンツのみです。（TextView から継承）。
  • 状態情報: TriSwitch オブジェクトの現在の状態の説明。 「オン」やオフにします。（CompoundButton から継承）。
  • 状態のテキストによる説明: 各状態に関するテキストベースの説明 表します。（Switch から継承）。

Switch とそのスーパークラスからのこの動作は、 TriSwitch オブジェクトでも同じ動作をします。そのため実装は 取り得る状態の数を 2 から 3 に増やすことに重点を置きました。

カスタム イベントを定義する

システム ウィジェットを拡張すると、ユーザーによるそのウィジェットの操作方法について変更が生じる可能性が高まります。こうしたインタラクションの変化を ユーザーが操作したときと同じようにアプリのウィジェットをユーザー補助サービスが更新できるようにする ウィジェットを直接操作できます。

一般的なガイドラインでは、オーバーライドするビューベースのコールバックごとに、 対応するユーザー補助アクションを再定義する必要もあります: ViewCompat.replaceAccessibilityAction()。 アプリのテストでは、ViewCompat.performAccessibilityAction() を呼び出して、このような再定義したアクションの動作を検証できます。

この原則が TriSwitch オブジェクトで機能する仕組み

通常の Switch オブジェクトとは異なり、TriSwitch オブジェクトをタップすると、次が循環します。 3 つの状態があります。したがって、対応する ACTION_CLICK のユーザー補助アクションを更新する必要があります。

Kotlin

class TriSwitch(context: Context) : Switch(context) {
    // 0, 1, or 2
    var currentState: Int = 0
        private set

    init {
        updateAccessibilityActions()
    }

    private fun updateAccessibilityActions() {
        ViewCompat.replaceAccessibilityAction(this, ACTION_CLICK,
            action-label) {
            view, args -> moveToNextState()
        })
    }

    private fun moveToNextState() {
        currentState = (currentState + 1) % 3
    }
}

Java

public class TriSwitch extends Switch {
    // 0, 1, or 2
    private int currentState;

    public int getCurrentState() {
        return currentState;
    }

    public TriSwitch() {
        updateAccessibilityActions();
    }

    private void updateAccessibilityActions() {
        ViewCompat.replaceAccessibilityAction(this, ACTION_CLICK,
            action-label, (view, args) -> moveToNextState());
    }

    private void moveToNextState() {
        currentState = (currentState + 1) % 3;
    }
}

色以外の手がかりも取り入れる

色覚障がいのあるユーザーをサポートするには、アプリ画面内の UI 要素を区別するのに、色以外の手がかりを使用してください。これらの手法は、 たとえば、さまざまな形状やサイズの使用、テキストや視覚的なパターンの提供、 または、音声またはタップベースの（触覚）フィードバックを追加して、 あります。

図 1 に、あるアクティビティの 2 つのバージョンを示します。一方のバージョンでは、ワークフロー内の可能な 2 つのアクションを、色だけで区別しています。もう一方のバージョンでは、おすすめの方法を取り入れて、色だけでなく、形とテキストによって、2 つのアクションの違いを強調しています。

図 1. 色のみを使用して UI 要素を作成する例 （左）と色、図形、テキスト（右）を使用します。

メディア コンテンツのユーザー補助機能を強化する

動画クリップや音声録音などのメディア コンテンツを含むアプリを開発する場合、そうしたコンテンツを把握する際のさまざまなユーザー補助のニーズに応じるサポートを試みてください。具体的には、以下を行うことをおすすめします。

  • メディアの一時停止または停止、音量の変更、字幕（キャプション）の切り替えをユーザーが行えるようにするコントロールを含めます。
  • ワークフローの完了に不可欠な情報を動画で提供している場合は、 同じコンテンツを文字起こしなどの別の形式で提供する。

参考情報

アプリのユーザー補助機能を強化する方法について詳しくは、以下の参考情報をご覧ください。

Codelab

ブログ投稿