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

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

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

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

レビュー・テスト方法

ESlintによる自動チェック
- eslint-plugin-jsx-a11y/interactive-supports-focus
- eslint-plugin-jsx-a11y/mouse-events-have-key-events
コードレビューによるチェック
QAテスト（マウスと同じ操作がキーボードでできるかをテストする）

実装方法

良い実装例

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

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

悪い実装例

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

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

参考文献