PCとスマートフォンで同じサイトを表示する紙細工のイラスト
解説用イラスト(AI生成)。実際の管理画面ではありません。
この手順でできること

読みづらさや操作の行き止まりを見つけ、改善箇所を整理できます。

作業を始める前に

  • トップ、長い記事、フォームを用意します。
  • この確認は初期点検であり、規格への適合を保証する監査ではありません。
AT A GLANCE先に、全体の流れを確認
  1. 01見出し
  2. 02色と拡大
  3. 03キーボード
  4. 04画像とラベル

下の各項目で、判断のポイントと確認方法を説明します。

進め方・判断のポイント 04 STEPS

01

見出しで内容の順序を確認する

大きく見せたいという理由だけで見出しレベルを選ばず、主題・節・小節の関係を整えます。文章が長いときは、内容が切り替わる位置に説明的な見出しを置きます。画面をざっと見た人にも、支援技術で見出しをたどる人にも、話の構造が分かる状態を目指します。

✓ 完了の目印

見出しを読むだけで内容の流れが分かります。

02

色と拡大表示を点検する

薄い文字と背景の組み合わせ、小さな注記、色だけで示したエラーを確認します。ブラウザーで文字やページを拡大し、本文が隠れたりボタンが重なったりしないかを見ます。色の区別がつきにくい場合にも、「必須」「エラー」などの文字で状態が分かるようにします。

✓ 完了の目印

色や通常サイズだけに依存した説明を減らせました。

03

キーボードで主要操作を試す

Tabキーでリンクや入力欄へ移動し、現在位置が見えるか確認します。メニューを開く、閉じる、フォームへ入力する操作を試し、途中から移動できない場所がないかを見ます。見た目を整えるためにフォーカスの枠を消している場合は、別の明確な表示を用意します。

入力例・選択の目安
項目入力する内容・例
移動Tab・Shift+Tab順序と現在位置を見る。
リンク・ボタンキーボードで実行開閉・送信を試す。
入力エラー項目名と説明どこを直すか分かる。
✓ 完了の目印

マウスなしでも主な操作を続けられます。

04

画像と入力欄の意味を確認する

説明に必要な画像には、本文との関係が分かる代替テキストを付けます。装飾画像へ同じ説明を繰り返す必要はありません。フォームの入力欄にはラベルを付け、入力すると消える例示文だけを項目名の代わりにしないようにします。

✓ 完了の目印

画像とフォームの意味を文章でも伝えられます。

終わったら確認すること

  • 問題のあるURLと操作を記録し、テーマやフォームの担当者へ共有します。

途中で困ったときは

プラグインを入れれば全部対応できますか?

内容の見出し、代替テキスト、入力項目などは作成側の判断も必要です。機能を追加した後も、実際の読み取りと操作を確認します。

参照した公式資料

画面や条件が異なる場合は、ご利用環境と公式の最新案内を確認してください。

手順確認日 2026.10.29 / 読む時間は目安です。操作に必要な時間は環境によって異なります。