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>
良い実装例
フォーカスを受け取れる要素の使用、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>