2.1.1 キーボード、タッチデバイスで操作できる

適合レベル

※各レベルについては適合レベルとはをご覧ください

概要

キーボードショートカット・マウスホバー・タッチのフリックのみなど、特定の操作に依存した機能では、他のデバイスから使用できないことが多くある。キーボード・マウス・タッチそれぞれの操作を担保し、様々なデバイスの操作をカバーする。

ただし、以下のような場合は例外とする。

キーボードのショートカットなどで操作が代替可能など、別の手段で操作できれば問題なし
手書き入力など、マウスカーソルの移動や、タッチしながらの移動などに依存している機能は除外する

テスト・チェック方法

ESlintによる自動チェック

コードレビューによるチェック
QAテスト（マウスと同じ操作がキーボードでできるかをテストする）

実装方法

Web

悪い実装例

フォーカスを受け取れない要素を利用したコンテンツの出し分けなどをしている。

<div onclick="...">
  content...
</div>

良い実装例

フォーカスを受け取れる要素の使用、tabindex 属性の付与、focus 擬似クラスの併用などを行なっている。

<button type="button" onclick="..." tabindex="1">
  content...
</button>

Android

android:screenReaderFocusable属性、またはandroid:focusable属性を設定することでフォーカスを受け取る設定が可能です。

また、Android 8.1（APIレベル27）以下ではandroid:screenReaderFocusable属性は使用できないためandroid:focusable属性を付与します。

<Constraintlayout ...>
  <Button
    android:id="@+id/button"
    android:screenReaderFocusable="true"
    ... />
  <ImageView
    android:id="@+id/imageview"
    android:focusable="false"
    ... />
</Constraintlayout>

キーボードの矢印キーを使用してアプリのフォーカス移動を設定可能です。その場合は自動でシステムが画面上、ビューのレイアウトに基づいてどのビューに対してフォーカスを合わせるかを指定する。指定が想定したものと異なっていた場合は、以下の属性を指定することで次のフォーカスが当たるビューを指定できる。

android:nextFocusUp
android:nextFocusDown
android:nextFocusLeft
android:nextFocusRight

<Constraintlayout ...>
  <Button
    android:id="@+id/button"
    android:nextFocusLeft="@+id/editText"
    ... />
  <ImageView
    android:id="@+id/imageview"
    android:nextFocusDown="@+id/button"
    ... />
  <EditText
    android:id="@id/editText1"
    android:nextFocusUp="@+id/imageview"
    ...  />
</Constraintlayout>