このページの中身
キーボードで使える
キーボードで通れば、読み上げも音声入力もスイッチも通ります。支援技術の土台はここです。
図の中身を文字で読む
- Tab は DOM の順に進む モーダルではフォーカスを管理する
- 1 2 3
- 削除しますか
- 4 削除 戻る
- 5
- フォーカスは常に見えていること
- outline: none で消すと、キーボード操作が不可能になる。
- 消すなら、必ず代わりを用意する。:focus-visible ならマウス操作時は出ず、キーボード操作時だけ出る。
- ✕ tabindex に正の値を使う → ページ全体の順序が壊れる
- 1 開いたらフォーカスを中へ移す
- 2 中で循環させ、背後へ出さない
- 3 Escape で閉じられる
- 4 閉じたら、開く前の要素へ戻す
- dialog 要素の showModal() を使えば、1〜3 はブラウザがやる。
ひと目で#
キー操作は、スクリーンリーダー、音声入力、スイッチ入力の土台でもあります。ここが通れば、多くの支援技術に応えられます。
- フォーカス
- キーボードの入力を受け取っている要素。1画面に1つ
- フォーカス可視
- いまどこにあるかが見えていること
- タブ順序
- Tab で進む順番。既定では DOM の並び順
- フォーカストラップ
- モーダルの中で循環させる仕組み。抜け出す手段は必須
- スキップリンク
- 繰り返される部分を飛ばして、本文へ
標準のキー操作#
| キー | 動作 |
|---|---|
| Tab / Shift+Tab | 次 / 前の操作できる要素へ |
| Enter | リンクの移動、ボタンの実行 |
| Space | ボタンの実行、チェックの切り替え |
| 矢印 | ラジオ、タブ、スライダーの中の移動 |
| Escape | モーダルやメニューを閉じる |
フォーカスを移すべき場面#
| 場面 | 移す先 |
|---|---|
| モーダルを開く | モーダルの中の最初の要素、または見出し |
| モーダルを閉じる | 開く前にフォーカスがあった要素 |
| 要素を削除する | 直前か直後の要素 |
| エラーが起きる | エラーのある最初の入力欄 |
間違えやすいところ#
outline: noneでフォーカスの表示を消すキーボードでは使えなくなる。消すなら必ず代わりを置く:focusだけを使うマウスで押したときにも表示される。:focus-visibleを使う<div>を操作要素にするフォーカスもキー操作も自前で作ることになる- hover でしか出ない要素を作るキーボードではたどり着けない
tabindexに正の値を使うページ全体の順序が壊れる- CSS で並び順を変えて放置する見た目の順とタブの順が食い違う
- モーダルから Tab で外へ出られる見えない要素を操作することになる
- モーダルから出られなくなるキーボードトラップとして基準違反
見た目の順とタブの順がずれるとき#
いちばん多いのは、CSS で列を入れ替えたまま放置した2カラムです。見えている並びは直っていて、焦点だけが元の HTML をたどります。
図の中身を文字で読む
- ✕ order で入れ替えたまま ○ DOM の順を視覚順に直す
- 見えている並びは 申込→料金→よくある質問。Tab は右の列から始まる order を外し、HTML の並びを見た目に合わせる
- 申込フォーム 料金 よくある質問 申込フォーム 料金 よくある質問
- Tab の順 ①よくある質問 → ②料金 → ③申込フォーム
- 読み上げも、この順で読む Tab の順 ①申込フォーム → ②料金 → ③よくある質問
- 見た目の順を変える指定は、Tab の順を変えない
- order / flex-direction: row-reverse どれも見た目だけを動かす。焦点は HTML の並びをたどる。
- 2カラムを1カラムに畳む画面幅でも、同じずれが起きていないかを見る。
- grid-area での配置替え tabindex に正の値を足して直そうとすると、ページ全体の順序が壊れる。
order、row-reverse、grid-area での配置替え。どれも見た目だけを動かします。直すのは HTML の並びのほうで、tabindex に正の値を足す方向へ逃げると、ページ全体の順序が壊れます。
フォーカスリングは地の色で消える#
1本の単色リングは、その色に近い地の上で消えます。写真の上ならなおさらです。内側と外側を明暗の2色にすれば、どちらか一方が必ず地から浮きます。
直す例#
架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。
予約フォームの確認モーダルを、<div class="modal"> で作ってあります。マウスでは問題なく動きます。Tab を押すと、焦点はモーダルを素通りして背後のページへ抜けていきます。見えていない要素を操作している状態です。
<dialog> に置き換えて showModal() で開くと、焦点の閉じ込め、Esc で閉じる、背景の不活性化、閉じたあとの焦点の復帰が、書かずに手に入ります。自作を続けるなら、その4つを全部自分で書くことになります。
このコードで動いている見本です
同じページで、:focus { outline: none } が全体に効いていました。消すなら代わりを置きます。ここは :focus-visible に変えて、キーボードで操作したときだけリングが出るようにします。マウスで押したときには出ません。
残るは順序です。フォームの下に置いた「戻る」ボタンを、CSS で左上へ動かしていました。見た目は先頭でも、Tab では最後に回ります。CSS を外し、HTML の並びのほうを直します。
確認する#
- マウスに触れず、Tab と Enter だけで送信まで到達できる
- モーダルの中で Tab が循環し、Esc で閉じて、元のボタンへ焦点が戻る
- 画面を見ながら Tab を押し続けて、焦点が消える瞬間と、飛ぶ瞬間がない
使えるパターン#
この話が要る場面#
このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。
閉じたときに、開く前にフォーカスがあった要素へ戻す。押した場所に戻れないと現在地を見失う。
このコードで動いている見本です
div にクリックを付けている。button と a に替える。それだけで、大半は直る。
このコードで動いている見本です
消さない。outline の色と太さのほうを変えて、暗い地でも見える形にする。
このコードで動いている見本です
:focus ではなく :focus-visible を使う。キーボード操作のときだけ出る。
このコードで動いている見本です
CSSで並び順を変えている。DOMの順を直すか、視覚順を戻す。tabindex に正の値は使わない。
DOMの順を視覚順に合わせる。tabindex="1" 以上は使わない
この場面のほかの困り事と、そのまま貼れる部品は部品を選ぶ、誰でも使えるようにするにまとめてある。逆引きには全188件。
フォーカスを試す#
リングの色・太さ・距離を動かして、白地と暗い地の両方で見えるか確かめます。
この道具は JavaScript で動きます。