KEYBOARD REVIEW
どこにいるか、次に何ができるか。
マウスでクリックしていると問題なく使えるサイトでも、キーボードでたどると現在位置が見えない、メニューを開けない、閉じた後に位置を見失うことがあります。公開前の確認に、マウスを使わない操作を加えてみましょう。
この記事は、一般的なWebサイトの最初の点検手順です。これだけでアクセシビリティ全体の適合を判定できるものではありません。問題の場所を見つけ、修正や詳しい評価へつなぐ入口として使ってください。
1. 操作する環境を記録する
最初に、ブラウザ、端末、確認するURLと画面幅を記録します。環境によっては、キーボードでリンクをたどる設定の確認も必要です。検証用のフォームやアカウントを使い、本番への送信や削除を意図せず実行しないようにします。
点検を始めるページでは、同じ開始位置からやり直せるようにしておくと、修正前後を比較しやすくなります。問題の部品だけを見る前に、ページの入口から一度通してたどりましょう。
2. Tabで移動し、現在位置を見る
Tabで次の操作対象へ、Shift＋Tabで前へ移動します。リンクやボタン、入力欄へ移ったとき、枠や下線などで位置が分かるかを見ます。W3Cのフォーカス可視化の解説でも、キーボードフォーカスの位置が視覚的に分かることが重要とされています。参考：Understanding Focus Visible
見えない場合は、フォーカスが届いていないのか、届いているが見えないのかを分けて調べます。単に枠線を追加するだけでは解決しない場合もあるため、実装担当へ操作の手順と対象を伝えましょう。
3. 順序と、固定表示との重なりを確認する
画面の左上から右下へ完全に直線で動く必要はありませんが、文章や操作の流れに沿って理解できる順序が望まれます。突然遠い場所へ移る、見えない領域の部品へ入る、といった箇所を記録します。
固定ヘッダーや画面下の案内がある場合、その背後に現在の操作対象が隠れないかも確認します。狭い画面や拡大表示では状態が変わるため、通常幅で問題がなくても条件を変えて見直しましょう。
4. 開いた後と閉じた後も追う
一般的なリンクはEnter、ボタンはEnterやSpaceで実行できるかを確認します。開閉を伴う部品では、開く瞬間だけでなく、中の項目へ進めるか、閉じられるか、閉じた後も作業を続けられるかまで見ます。参考：APG Button Pattern
矢印キーを使う部品など、操作方法は種類によって異なります。すべてをTabだけで動かすと決めつけず、採用した部品のパターンに合う操作を確認してください。
5. 再現できる形で記録する
| 記録項目 | 架空の問題の例 |
|---|---|
| 条件 | スマートフォン相当の幅、メニューを閉じた初期状態 |
| 手順 | Tabでメニューへ移動し、Enterで開く |
| 実際の状態 | 表示は開いたが、次のTabで背後の本文へ移った |
| 確認したいこと | 想定する部品の構造とフォーカスの扱いが一致しているか |
「キーボードが使えない」だけでなく、どこから何を押し、何が起きたかを残します。修正後は同じ手順で再確認し、その前後の部品にも影響がないかを見ます。
練習：一つの目的を最後まで達成する
「料金を調べて問い合わせフォームを開く」など、読者の目的を一つ決め、キーボードだけでたどってみてください。部品単体では操作できても、ページをまたいだ流れでは迷うことがあります。現在位置、順序、実行結果を一続きで確認することが、実際の利用に近い点検につながります。