目次
- はじめに
- キーボード操作とは？
- TAB でフォーカスできる要素（標準）
- 自動でTAB移動できる要素
- TABで移動できない要素
- 対策：フォーカス可能にする
- tabindex の使い方まとめ
- tabindex="0"（標準順に追加）
- tabindex="-1"（直接フォーカス不可）
- 非推奨：tabindex="1" 以上
- フォーカスが見えない理由と対策
- 正しい対策（見やすいフォーカスリングを付ける）
- ボタンを div で作る問題（最重要）
- 正しい設計
- 透明な要素がフォーカスを邪魔している場合
- 症状
- 対策
- JavaScript がTAB操作を奪っているケース
- 対策
- モーダルウィンドウの正しいキーボード操作対応
- アクセシビリティ対応チェックリスト（制作現場用）
- まとめ
はじめに
Webサイトは、マウスだけでなく キーボードだけでも操作できること が重要です。
特に TAB キーによる 次のリンク・ボタン・入力欄への移動（フォーカス移動） は、
アクセシビリティの基本中の基本です。
しかし、実際の制作現場では
「TABで移動しない」「フォーカスが見えない」「divのボタンが反応しない」
などのトラブルが頻発します。
この記事では、キーボード操作に関するアクセシビリティの必須ポイントを 完全まとめ 形式で解説します。
キーボード操作とは？
キーボード操作とは、タブレットやマウスを使わず、
キーボードのみでWebページを操作できること を指します。
特に使用されるキーは以下です。
- TAB：次のフォーカス可能要素へ移動
- Shift + TAB：前の要素へ移動
- Enter / Space：決定、ボタン操作
- 矢印キー：メニューの移動など
- Esc：モーダルの閉じる
これらがスムーズに動くように設計することで、
誰でも使いやすいWebサイトになります。
TAB でフォーカスできる要素（標準）
HTMLには「標準でフォーカスできる要素」があります。
自動でTAB移動できる要素
- a（hrefあり）
- button
- input / textarea / select
- details / summary
これらは何も指定しなくても TAB 移動できます。
TABで移動できない要素
- div
- span
- p
- img（特殊）
これらは「ただの箱」なのでフォーカスが当たりません。
対策：フォーカス可能にする
<div tabindex="0">フォーカスできるdiv</div>ただし、ボタンなのにdivを使うのは非推奨。
基本は buttonタグを使うべきです。
tabindex の使い方まとめ
tabindex="0"（標準順に追加）
自然な順番で TAB 移動に参加。最も使用頻度が高い。
<div tabindex="0">フォーカス可能にする</div>tabindex="-1"（直接フォーカス不可）
TAB移動はできないが、JSでフォーカスを当てるときに使う。
<div tabindex="-1" id="modal">...</div>非推奨：tabindex="1" 以上
TAB順をむりやり変更してしまい、ユーザーが迷子になります。
アクセシビリティ上 強く非推奨 とされます。
フォーカスが見えない理由と対策
多くのサイトでは CSSで以下が指定されてしまっています。
:focus {
outline: none;
}これをすると、どこにフォーカスがあるかわからなくなります。
正しい対策（見やすいフォーカスリングを付ける）
:focus {
outline: 3px solid #4087bf;
outline-offset: 4px;
}デザインに合わせて色を変えると、見た目もきれいになります。
ボタンを div で作る問題（最重要）
制作現場で最も多い問題です。
<div class="btn">送信</div>これは次の問題を引き起こします。
- TAB移動不可
- Enter で押せない
- スクリーンリーダーに「ボタン」と認識されない
- スマホのアクセシビリティが壊れる
正しい設計
<button class="btn">送信</button>またはリンクなら
<a href="#" class="btn">詳しく見る</a>透明な要素がフォーカスを邪魔している場合
スライドメニュー、モーダル、オーバーレイが
「閉じた後も透明で画面上に残っている」ケースがあります。
症状
- TAB移動が途中で止まる
- ボタンが押せない
- クリックできない場所がある
対策
pointer-events: none;を適切に使うz-indexとpositionを見直す- メニュー閉鎖時は必ず display:none にする
JavaScript がTAB操作を奪っているケース
以下のスクリプトはTAB妨害を起こしやすいです。
element.addEventListener('keydown', (e) => {
if (e.key === "Tab") e.preventDefault();
});対策
TABを奪う必要がある特殊なUI以外では使用しない。
モーダルウィンドウの正しいキーボード操作対応
モーダルが開いたら…
- モーダル内部の最初の要素に自動フォーカスする
- TABループを制御して外に行けないようにする
- Escキーで閉じる
アクセシビリティの高いサイトは必ず対応しています。
アクセシビリティ対応チェックリスト（制作現場用）
- ボタン・リンクは必ず button / a タグ
- div ボタンは禁止
- outline: none; を使わない
- 視覚的なフォーカスリングを適切に付ける
- tabindex="1" 以上は使わない
- モーダルは TABループを制御する
- 透明の要素が重なっていないか確認
- aria-label / aria-labelledby を併用
- キーボードだけで全操作できるかテストする
まとめ
- TAB移動はアクセシビリティの核となる要素
- フォーカスできるタグを正しく使うだけで大幅に改善
- divボタンや outline:none が問題の8割
- tabindex の正しい運用が重要
- モーダルやメニューは透明要素に注意
- aria属性と併用すればさらにユーザビリティ向上
アクセシビリティ対応はSEOにもプラスになります。
福祉系サイトや公共性の高いページは特に重要です。