Level AWCAG 2.2

2.1.1 キーボード

すべての機能がキーボードインターフェースで操作可能である。

なぜ重要か

運動障害

マウスを使えないユーザーはキーボードだけで全機能にアクセスする必要があります。

スクリーンリーダー

スクリーンリーダーはキーボードインターフェースに依存。キーボード操作不可＝利用不可。

代替入力デバイス

スイッチデバイスや音声制御もキーボードAPIを介して動作します。

効率性

パワーユーザーはキーボード操作で素早く作業。アクセシビリティは全員の生産性向上。

Tab と Enter キーで操作してみましょう。

div で作ったボタン

送信

キャンセル

詳細を見る

Tab でフォーカスが当たらず、Enter でも反応しません

button 要素を使用

Tab でフォーカス移動、Enter / Space で実行できます

コード

<div class="btn"
     onclick="submit()">
  送信
</div>

コード

<button type="submit"
        onclick="submit()">
  送信
</button>

<div> や <span> はフォーカス不可・キーイベント未対応。必ず <button> や <a> を使いましょう。

高橋さん（28歳）— 頸髄損傷

マウスは使えませんが、マウススティックでキーボードを操作します。div で作られたボタンはフォーカスが当たらず、クリックもできません。「button要素なら Tab と Enter だけで全部できるのに」

すべての機能がキーボードで操作可能カスタムコントロールに適切なロール・キーイベントがあるdiv/span ではなく button/a 要素を使用ドラッグ＆ドロップにキーボード代替があるホバーで表示される情報にキーボードでもアクセス可能