ホームページのWebアクセシビリティは何から直す？中小企業の優先順位チェック

問い合わせフォームは送れるか、メニューはキーボードでも開くか、見出しやリンクの意味は伝わるか。気になる箇所があっても、全ページを一度に調査・改修する予算がなければ、どこから着手すべきか迷います。

中小企業が最初に行うのは、自動チェックツールの警告を上から消すことでも、文字を大きくして色を変えることでもありません。問い合わせ、資料請求、採用応募などの主要導線を選び、利用不能、誤操作、理解の妨げ、運用時の再発の順に課題を分けます。そのうえで、今回直す範囲、次期対応、社内運用へ回す項目を決めます。

デジタル庁の「ウェブアクセシビリティ導入ガイドブック」は、初めて取り組む行政担当者や事業者に向けて、考え方や実践、発注・受託時のコミュニケーションを解説する資料です。2025年10月16日付でデジタル社会推進標準ガイドラインのInformative文書に編入されました。本記事では、その導入の考え方とWCAG 2.2を、中小企業の診断、発注、公開後運用へ落とし込みます。デジタル庁+1

Webアクセシビリティは一部の利用者だけの話ではない

Webアクセシビリティは、障害のある人を対象の中心に置き、利用環境や操作方法が異なっても、主要情報を受け取り、必要な手続まで進める状態を目指す考え方です。その改善は、キーボードを使う人、画面を拡大する人、スマートフォンの狭い画面で見る人にも関係します。

企業側にはフォームが正常に見えていても、キーボードでは送信ボタンへ移動できない、入力エラーの場所が分からない、拡大すると操作部品が隠れるなら、利用者にとって受付窓口が閉じているのと同じです。見た目の調整だけでなく、情報の受け取り方、操作、理解、技術的な互換性まで確認します。

WCAG（Web Content Accessibility Guidelines）は、Webコンテンツを障害のある人にとって利用しやすくする国際的な技術標準です。WCAG 2.2は「知覚可能」「操作可能」「理解可能」「堅牢」の4原則の下に検証可能な達成基準を置き、適合レベルをA、AA、AAAに分けています。2023年10月5日にW3C勧告として公開され、2024年12月12日に更新されました。W3C+1

社内では規格の言葉を、「誰が、どの画面で、何を完了できないか」へ翻訳して記録します。そうすれば、専門規格を改修対象と発注条件へ結び付けやすくなります。

最初から全ページを同じ深さで調べない

最初の対象は、アクセス数だけでなく、事業上の完了行動から選びます。問い合わせを優先するなら、トップまたはサービスページから、入力、確認、完了画面までを一つの経路として扱います。採用なら、募集一覧、募集要項、応募完了までが対象です。

ページ単位だけでなく、ヘッダーメニュー、共通ボタン、フォーム部品も見ます。一つの共通部品を直せば複数ページへ反映できる一方、トップページだけを詳しく調べても、外部フォームで止まれば目的は達成されません。

範囲は「問い合わせページを確認する」ではなく、「サービスを知った人が、内容を入力し、送信完了を確認できるまで」と書きます。開始ページ、経由ページ、完了画面、共通部品を並べると、制作会社へ対象を伝えやすくなります。

WordPressでは、記事、固定ページ、一覧など構造が共通するページから代表例を選びます。初回診断を主要導線と代表テンプレートへ絞ることで、個別ページの問題とサイト全体へ波及する問題を分けられます。

優先順位は利用不能、誤操作、理解、運用の順で決める

利用不能、誤操作、理解の妨げ、運用での再発という4段階を示す文字なし優先順位図を整理した図 — 改修優先順位を警告件数ではなく利用者への影響で理解しやすくするために、利用不能、誤操作、理解の妨げ、運用での再発という4段階を示す文字なし優先順位図を整理しています。

警告が30件あるページより、警告が少なくても送信ボタンへ到達できないフォームのほうが先です。改修順は件数ではなく、目的を完了できるか、誤った操作をしやすいか、内容を理解できるか、更新後に問題が戻るかで決めます。

主要導線のアクセシビリティ確認順
優先段階	確認する状態	利用者への影響	対応例
利用不能	メニュー、リンク、入力、送信を操作できない	情報取得や手続を完了できない	キーボード操作、ラベル、読み順、送信処理を修正
誤操作	現在位置が見えず、押し間違いや入力消失が起きる	取消、再入力、離脱につながる	フォーカス、ボタン間隔、入力保持を見直す
理解の妨げ	見出し、リンク文、画像説明、エラー案内が曖昧	次の行動を判断できない	構造と文言を整え、必要な代替説明を付ける
運用での再発	更新のたびに見出しや代替テキストが崩れる	改修効果が続かない	投稿ルール、部品、公開前確認を定める

利用不能と誤操作は今回の改修候補、理解の妨げは影響を見て今回または次期対応、運用項目は公開前ルールへ振り分けます。この順序はWCAGの適合レベルを置き換えるものではなく、限られた予算で発注範囲を切るための実務上の整理です。

同じ段階の問題が複数あるなら、事業上の主要窓口と修正の波及範囲で比べます。問い合わせが受注の中心ならフォームを優先し、共通メニューの修正が全ページへ効くなら上位に置きます。

主要導線で確認したい7つの項目

主要導線を一つ選び、次の7項目を実画面で試します。「使いにくい」という感想を、画面、操作、結果が分かる修正依頼へ変えるための確認です。

1．キーボードだけで操作を完了できるか

マウスを使わず、TabキーとShift＋Tabキーでメニュー、リンク、入力欄、ボタンを移動し、適切なキーで開閉・送信します。途中で進めない、移動順が不自然、閉じられない画面がある場合は利用不能として記録します。

「フォームが使えない」ではなく、「ヘッダーのメニューをTabで移動すると、三つ目から先へ進めない」のように、開始位置、操作、止まった場所を残します。

2．フォーカスの位置が見えるか

フォーカスは、キーボード操作で現在選ばれている要素です。枠線や背景の変化が見えなければ、次に何が実行されるか判断できません。固定ヘッダー、追従バナー、Cookie通知の後ろに隠れていないかも見ます。

WCAG 2.2では、キーボードフォーカスを作者が配置したコンテンツで完全に隠さないことがAAの達成基準として加わりました。W3C

3．見出しで内容の構造をたどれるか

文字を大きくした装飾と、HTML上の見出しは別です。見出しだけを順に読んでもページの概要が分かるか、「特徴」「料金」「導入の流れ」など内容を表す言葉になっているかを確認します。

文字サイズを変える目的だけで見出しレベルを選ぶと、画面の見た目と読み上げ時の構造がずれます。代表ページごとに、ページ名、章、節の関係を見直します。

4．リンク文だけで移動先を判断できるか

「こちら」「詳細」だけでは、前後の文章を読まなければ移動先が分かりません。「サービス資料をダウンロードする」「採用応募フォームへ進む」など、行き先や実行内容が分かる文言にします。

同じ文言が異なるページへ移動する、リンクに見える文字が押せない、ボタンとリンクの役割が混ざる状態も確認対象です。

5．画像の情報を別の方法でも受け取れるか

装飾画像と、料金、手順、受付条件などを伝える情報画像では扱いが異なります。情報を含む画像は、そのページで必要な内容がテキストでも伝わるようにします。周囲の本文に説明があるなら、代替テキストで同じ内容を過剰に繰り返しません。

バナー内だけに期限や注意事項がないか、画像が表示されなくてもリンク先を判断できるかを見ます。制作会社には、装飾、情報、リンクのどの役割かも伝えます。

6．フォームで入力、修正、送信確認ができるか

入力欄のラベル、色以外の必須表示、エラー箇所と直し方は、フォームで確認する項目です。エラー後に入力が消える、戻ると選択が解除される、送信完了が分からない状態は優先度を上げます。

WCAG 2.2では、同じ手続内で既に入力した情報を再度求める場合に、自動入力または選択で再利用できるようにする達成基準が追加されています。例外条件があるため、長い申込や複数画面のフォームで不要な再入力がないかを確かめます。W3C

問い合わせまでのページ遷移や案内文を別の観点で確認する際は、会社ホームページの問い合わせ導線を確認するチェックリストも使えます。本記事はアクセシビリティの優先順位、リンク先の記事は問い合わせ導線の具体確認という役割分担です。

7．拡大表示とスマートフォンでも完了できるか

ブラウザで拡大し、メニュー、本文、表、フォームが重なったり切れたりしないかを確認します。横へ動かさなければ本文を読めない、閉じるボタンが見えない、ラベルと入力欄が離れる状態を記録します。

スマートフォンでは、押す対象が小さすぎないか、隣のボタンを誤って押しやすくないか、固定要素が送信ボタンを隠さないかを見ます。WCAG 2.2には、操作対象の大きさまたは周囲の間隔に関するAAの達成基準も加わっています。W3C

自動検査だけでは完了を判断できない

機械検査、目視確認、キーボード操作、運用確認の4領域を示す文字なし分担図を整理した図 — 検査方法ごとの役割を区別しやすくするために、機械検査、目視確認、キーボード操作、運用確認の4領域を示す文字なし分担図を整理しています。

自動検査は、HTMLの欠落や一定の色の組み合わせなど、機械的に判定できる候補を広く探すために使います。一方、代替テキストが目的に合うか、リンク文が伝わるか、エラー案内を理解できるかは、警告の有無だけでは決まりません。

検査方法ごとの役割を分けます。

機械検査：コード上の欠落や規則違反の候補を拾う
目視確認：文字、色、重なり、拡大時の崩れ、エラー表示を見る
キーボード操作：移動順、フォーカス、操作の完了可否を試す
読み順・運用確認：見出しや読み上げ順の意味、更新時の再現性を確かめる

警告がゼロでも、主要導線を最後まで操作できなければ完了ではありません。未対応項目がある場合は、対象、利用者への影響、制約、保留理由を記録し、今回の改修と次期対応を分けます。

制作会社には、対象URL、確認方法、再現手順、影響、推奨対応、改修対象かどうかが分かる一覧を求めます。「ツールで検査する」だけより、見積もりと優先順位を結び付けやすくなります。

制作会社へ相談する前にそろえる資料

完成した仕様書は不要です。社内で分かる事実と、外部調査が必要な点を分けるため、次を確認します。

□ 今回優先する主要ページを選んだ
□ 各導線の完了行動と完了画面を示せる
□ 想定利用者と、端末・操作条件を整理した
□ 既知の不具合を画面と操作手順付きで再現できる
□ WordPress、画像、フォームの更新担当が分かる
□ CMS、テーマ、プラグイン、外部フォームの制約を把握した

空欄は「制作会社に調査してほしいこと」として残せます。分からないことを隠さず分けるほうが、曖昧な全対応依頼を防げます。

制作会社へ渡すアクセシビリティ確認資料
資料	確認内容	社内担当	制作会社と決めること
主要導線一覧	開始、経由、完了行動、優先理由	事業責任者・サイト担当	対象URL、代表テンプレート、対象外範囲
不具合メモ	画面、端末、操作、期待と実際の結果	各窓口担当	再現、影響度、応急対応と本改修
利用者・利用条件	想定利用者、端末、キーボード、拡大	サイト担当・顧客対応	検査方法、確認環境、追加確認
更新体制	記事、画像、リンク、フォームの担当と手順	運用責任者	投稿ルール、権限、公開前確認
システム制約	CMS、テーマ、プラグイン、外部サービス	システム担当・保守窓口	改修可能範囲、代替案、次期対応