Accessibility
Guidelines

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

適合レベル

A

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

概要

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

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

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

テスト・チェック方法

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

実装方法

Web

悪い実装例

フォーカスを受け取ることができない要素にクリックイベントを実装している。

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

良い実装例

【推奨】 フォーカスを受け取れる要素にクリックイベントを実装している
<button type="button" onclick="...">
  content...
</button>
実装上の都合で推奨例の実装が困難な場合

フォーカス可能な要素に変更できない場合、tabindex属性を付与してフォーカス可能にできる。ただしこの場合、別項2.4.7 フォーカスを見えるようにするにも留意する。

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

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>

参考文献