Jetpack Compose のユーザー補助

誰もが利用できるインクルーシブなアプリを作成するには、ユーザー補助が不可欠です。 Compose は、誰もがどこでもアプリを使用できるようにする、ユーザー補助 UI を構築するための基盤を提供します。

主要なコンセプト

  • セマンティクス: ユーザー補助サービスの UI 要素の意味を表すシステム。これには、説明、状態、ユーザーが実行できる操作などのプロパティが含まれます。

  • 走査: TalkBack などのユーザー補助サービスが画面上の要素間を移動する順序。この順序をカスタマイズして、ユーザー エクスペリエンスを向上させることができます。

  • ユーザー補助アクション: クリック、スクロール、閉じるなど、ユーザーが UI 要素に対して実行できる特定のアクション。アプリがユーザー補助サービスに通知します。

始める

Compose のユーザー補助モデルとユーザー補助ツールの基盤は、セマンティクスです。詳しくは、Compose のセマンティクス ガイドをご覧ください。

アプリを開発する際は、Compose アプリのユーザー補助機能を向上させるために、以下の重要なステップを最初から念頭に置いてください。

  • タップ ターゲットの最小サイズを検討する: クリック可能でインタラクティブな要素は 48 dp 以上にします。これはマテリアル デザインのユーザー補助ガイドラインを遵守しています。
  • クリックラベルを追加する: clickable に直接アクセスできない場合は、clickable 修飾子または semantics 修飾子を使用して、クリック動作を記述します。
  • 視覚要素を記述する: contentDescription パラメータを使用して、アイコンと画像をテキストで記述します。装飾要素の場合は、contentDescription を null に設定します。
  • 見出しを定義する: semantics 修飾子プロパティを使用して、要素を見出しとしてマークすると、ナビゲーションが容易になります。
  • 走査順序を制御する: isTraversalGroup を使用して、一緒に読み取る必要がある要素のグループをマークします。グループ内の要素の順序をさらにカスタマイズするには、traversalIndex を使用します。

詳しくは、専用の Compose のユーザー補助を改善するための主な手順をご覧ください。

ツール

  • TalkBack: Google の Android 向けスクリーン リーダーです。有効にすると、支援技術を利用するユーザーに対してアプリのセマンティクスがどのように機能するかをテストできます。
  • Layout Inspector: アプリのセマンティクス ツリーを可視化してデバッグできます。
  • Compose テスト API: セマンティック要素を操作して Compose UI のユーザー補助機能をアサートするテストを作成します。

Codelab

Compose コードでユーザー補助をサポートする方法について詳しくは、Jetpack Compose のユーザー補助の Codelab をご覧ください。

参考情報