キーボードだけでサイトを点検する｜Tabで移動・入力・戻るを確認
マウスを使わず、トップページから問い合わせ欄へ進む点検手順。フォーカスの見方、ダイアログの閉じ方、制作担当へ渡せる再現メモを図解します。
この記事でわかること
最初の点検は「移動できる・位置が見える・戻れる」の3つ
マウスでは使えるサイトでも、Tabキーで進むと問い合わせボタンへ届かないことがあります。この記事は、自分のサイトを公開・更新する担当者向けに、パソコンのキーボードだけで主要な操作を点検する手順をまとめたものです。
用意するのはキーボード付きのパソコン、ブラウザー、結果を残すメモです。トップページから問い合わせフォームへ進み、入力欄まで移動し、問題があれば同じ操作で再現できる記録を残すことを目指します。送信や支払いは今回の点検には含めません。
図と記録は、架空の https://example.com/ を使った編集部作成の説明例です。実際のサイトの画面や検査結果ではありません。この点検だけで、アクセシビリティへの完全な適合は判断できません。アクセシビリティとは、障害の有無などにかかわらず情報や機能を利用できるようにすることです。
1．どのページを、どの環境で調べるか決める
今回は「トップの問い合わせリンク → 問い合わせページ → 件名と本文の入力欄」という経路を選びます。自分のサイトでは、利用者に最も使ってほしい経路に置き換えてください。
最初にメモへ次を記入します。
開始URL：https://example.com/
到達したい場所：問い合わせページの入力欄
パソコンのOS：＿＿＿＿
ブラウザー名・バージョン：＿＿＿＿
画面：最大化／それ以外（＿＿＿＿）
ログイン：していない／している
確認日時：＿＿＿＿OSはWindowsやmacOSなど、パソコンを動かす基本ソフトの名前です。ブラウザーのバージョンは、そのブラウザーの設定内にある「バージョン情報」などで確認します。不明な項目を想像で埋めず、不明と記録しても点検は始められます。
ブラウザーやOSによって、Tabキーでリンクまで移動するための設定が違う場合があります。自分のサイトに限らずリンクを飛ばす場合は、キーボード操作の設定も確認対象です。最初からサイトの不具合と断定しません。
2．Tabを押し、今どこにいるかを追う
トップページを開き、読み込みが終わったらTabを1回ずつ押します。ブラウザー上部のアドレス欄やツールバーを通ることもあるため、ページ内へ移るまで表示を見ます。毎回の押した回数を全サイト共通の正解にはしません。
リンクやボタンに枠が出る、背景が変わるなど、次に操作する場所がわかる表示を探してください。この操作対象が選ばれている状態を「フォーカス」と呼びます。マウスを重ねたときの変化とは別です。
| キー | 今回使う目的 |
|---|---|
| Tab | 次の操作対象へ進む |
| Shiftを押しながらTab | 前の操作対象へ戻る |
| Enter | 選んだリンクを開く。通常のボタンも実行できる |
| Space | 通常のボタンを実行したり、チェック項目を切り替えたりする |
| Esc | 開いたダイアログを閉じられるか確認する |
Spaceはリンクを開くための共通キーではありません。場所によってはページをスクロールします。また、入力欄の中でEnterを押すと送信するフォームもあるため、今回の点検では入力欄内でEnterを押しません。
見るポイントは、問い合わせリンクへ到達でき、その位置が見えることです。 Tabで一つずつ文章や写真を選べる必要はありません。操作する必要のない本文が飛ばされることは、それだけで問題ではありません。
3．リンクを開き、フォームの中を移動する
問い合わせリンクにフォーカスがあることを確認してEnterを押します。ページが開いたら、再びTabで入力欄へ進みます。新しいページのどこから移動が始まるかも観察します。
自分が管理するテスト用フォームや下書きであれば、件名に「操作確認」、本文に「テスト入力」と入れ、Tabで次の項目へ進みます。本番で途中入力が保存される仕組みか不明なら、文字は入れず移動だけ確認してください。
確認することは、入力欄の名前が読める、どの欄を操作しているかが見える、次へ進める、Shift＋Tabで戻れる、の4点です。送信ボタンまで届いても実行はしません。送信・受信の確認は、フォームの動作確認ガイドの別作業として行います。
画面上では「件名 → 本文 → 送信」と並んでいるのに、操作対象が大きく行き来する場合は、その順番をメモします。すべてのレイアウトで単純な左から右が正解とは限りませんが、内容を理解して操作できる論理的な順番が必要です。
4．重なって開く画面は「閉じて戻れるか」も見る
サイトによっては「注意事項を見る」などを押すと、元のページの上に別の小さな画面が開きます。背景を操作できないこの形式は、モーダルダイアログと呼ばれます。該当する画面がなければ、この段階は「対象なし」と記録して飛ばします。
W3Cのダイアログ設計パターンでは、開いたときに中へフォーカスが移り、Tabで中の操作対象を循環し、Escで閉じる動作を示しています。閉じた後は、原則として開いたボタンへ戻ります。開いたボタン自体がなくなった場合などは、作業の流れに合う別の場所へ戻す設計もあります。
そのため、開いている間にTabがダイアログ内を回ること自体は、閉じ込めの不具合ではありません。 閉じるボタンやEscでも抜けられず、操作を続けられないことが問題です。閉じる操作ができないときは、ページを再読み込みして点検を終え、問題を報告します。未保存の入力がある場合は再読み込みで消えるので、点検はテスト環境で行ってください。
5．問題を見つけたら、見たことをそのまま渡す
「使いにくい」だけでは、修正担当者が同じ状態を再現できません。今回は、問い合わせリンクへTabで移動できるのに枠が見えない、という架空の問題を記録します。
対象：https://example.com/
環境：OS＿＿＿＿／ブラウザー＿＿＿＿／画面幅＿＿＿＿
操作：トップページを開き、Tabで上部メニューを順に移動する。
現象：「サービス」の次で選択位置が見えなくなる。
そのままEnterを押すと問い合わせページが開くため、
問い合わせリンクにはフォーカスがあるが、位置を見分けられない。
期待：問い合わせリンクを選んでいることが、枠などでわかる。
再現：再読み込み後も同じ操作で発生する／再現しない
確認日時：＿＿＿＿
添付：前後の画面画像（必要な範囲だけ）| 見つかった状態 | 次に確認・依頼すること |
|---|---|
| 移動できるが位置が見えない | フォーカスの枠や背景の表示を修正してもらう |
| マウスでは押せるがTabで届かない | 本来リンク・ボタンとして作られているか担当者へ確認 |
| 対象が画面の外や固定ヘッダーの下へ隠れる | スクロール位置と重なりがわかる画像を添える |
| ダイアログを閉じられない | 開く手順、Tabの動き、Escと閉じるボタンの結果を記録 |
| ほかのサイトでもリンクに移動しない | OS・ブラウザーのキーボード設定を確認 |
制作担当者向けには、見た目だけを直して終わらせず、HTMLのリンクやボタンの使い方も確認してもらいます。MDNは、移動順を無理に作る正のtabindex値を避け、文書自体を論理的な順序で作るよう案内しています。ここでいうtabindexは、キーボードでの移動対象や順番に関わるHTMLの属性です。初心者が数字を片端から付ける修正は勧めません。
6．修正後に同じ経路をたどり、今回の点検を終える
修正されたページを開き直し、同じ環境と操作で「トップ → 問い合わせ → 入力欄」を再確認します。ダイアログがある場合は開閉と戻り先も再確認します。問題のあった場所だけでなく、前後の対象へも進めるかを見てください。
完成記録は「対象経路で、操作対象へ到達でき、フォーカスが見え、前へ戻れた。該当するダイアログも閉じられた」とします。未確認のページやブラウザーは明記します。
W3Cの簡易点検ガイドも、少数のチェックを通過しても、ほかに利用を妨げる問題が残ることを説明しています。今回は最初の操作点検です。画面読み上げ、色の見分けやすさ、拡大表示などを含む全体評価の代わりにはなりません。
サイト制作を相談する場合
SITE PORTは、このメディアと同じ運営者の自社サービスです。完成例と編集デモを案内しています。この記事で整理した掲載内容や点検メモを、制作相談の資料として使えます。対応範囲・費用・公開後の更新分担は個別に確認してください。特定機能や成果を保証する案内ではありません。
出典と作成方針
一次資料確認日：2026年10月12〜13日（UTC）。公式資料に基づく説明と、編集部が提案する作業手順・架空例を分けて記載しています。図は独自に作成した模式図であり、実画面や実測結果ではありません。
出典・確認情報
確認日：2026-10-13 ／ 公式情報の要点と編集部の提案を整理しています。価格・機能・条件は変更される場合があります。
W3C：Focus Visibleの解説W3C：モーダルダイアログの設計パターンMDN：tabindex属性W3C：Easy Checks（簡易点検・ドラフト）W3C：ボタンのキーボード操作
