2.1.1 キーボード、タッチデバイスで操作できる
適合レベル
A
※各レベルについては適合レベルとはをご覧ください
概要
キーボードショートカット・マウスホバー・タッチのフリックのみなど、特定の操作に依存した機能では、他のデバイスから使用できないことが多くある。キーボード・マウス・タッチそれぞれの操作を担保し、様々なデバイスの操作をカバーする。
ただし、以下のような場合は例外とする。
- キーボードのショートカットなどで操作が代替可能など、別の手段で操作できれば問題なし
- 手書き入力など、マウスカーソルの移動や、タッチしながらの移動などに依存している機能は除外する
テスト・チェック方法
- ESlintによる自動チェック
- eslint-plugin-jsx-a11y/interactive-supports-focus
- eslint-plugin-jsx-a11y/mouse-events-have-key-events
- コードレビューによるチェック
- 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>