Webサイトを運用していると、「アクセシビリティに対応したいが、具体的にどこを確認すればよいのか分からない」と悩むことがあります。
Webアクセシビリティの確認では、画像の代替テキストや見出し構造だけでなく、キーボード操作、フォーム、色の使い方、動画、PDF、スマートフォンでの操作性など、複数の観点を確認する必要があります。
本記事では、企業サイトで確認したいWebアクセシビリティのポイントを20項目に整理しました。各項目について、確認方法、よくある問題、改善のポイントを解説します。
この記事で確認できること
- 企業サイトで確認したいアクセシビリティ20項目
- 各項目の具体的な確認方法
- よくある問題と改善のポイント
- 無料で使えるアクセシビリティチェックツール
- 問題が見つかったときの改善手順
なお、本記事のチェックリストは、サイトの問題を把握するための簡易的な確認項目です。JIS X 8341-3への適合・準拠や、WCAGへの適合を正式に表明する場合は、対象範囲を定めたうえで、規格に沿った試験を別途実施する必要があります。
Webアクセシビリティチェックとは
Webアクセシビリティチェックとは、年齢、障害の有無、利用端末、閲覧環境などにかかわらず、さまざまな利用者がWebサイトの情報や機能を利用できるか確認する作業です。
例えば、次のような利用者や状況を想定して確認します。
- スクリーンリーダーを利用してWebサイトを閲覧する
- マウスを使わず、キーボードだけで操作する
- 文字を拡大して閲覧する
- 色の違いを識別しにくい
- 動画の音声を聞くことができない
- スマートフォンや小さな画面で操作する
Webアクセシビリティの考え方や企業が対応する理由については、以下の記事で詳しく解説しています。
ウェブアクセシビリティとは？対応が必要な理由と企業サイトの改善ポイント
まず確認したい5つの簡易チェック
詳細なチェックを始める前に、まずは主要ページで次の5項目を確認してみましょう。
この段階で複数の問題が見つかった場合は、主要ページだけでなく、共通テンプレートやフォームを含めた確認することをおすすめします。
Webアクセシビリティチェックリスト20項目
ここからは、企業サイトで確認したい項目を、7つのカテゴリに分けて紹介します。
すべてのページを一度に確認するのが難しい場合は、まず以下のページを優先しましょう。
- トップページ
- 主要なサービスページ
- 問い合わせ・資料請求フォーム
- 採用情報ページ
- ログインや申し込みを行うページ
- アクセス数の多い記事やランディングページ
画像・非テキストコンテンツ
| No. | チェック項目 | 確認方法 | よくある問題 | 改善ポイント |
|---|---|---|---|---|
| 1 | 情報を伝える画像に代替テキストがある | HTMLのalt属性やCMSの代替テキスト欄を確認します。画像を見なくても、その役割や伝えている情報を理解できるか確認します。 | alt属性がない、ファイル名だけが入っている、すべて「画像」と記載されている。 | 画像の役割や伝えている情報を、簡潔な文章で設定します。周囲の文章と同じ説明を繰り返す必要はありません。 |
| 2 | 装飾画像に空のalt属性が設定されている | 区切り線、背景装飾、意味を持たないアイコンなどが読み上げ対象になっていないか確認します。 | 装飾画像のファイル名や不要な説明が読み上げられる。 | 装飾目的の画像には、原則として空のalt属性を設定します。 |
| 3 | 重要な情報を画像だけで伝えていない | バナー、図表、フローチャート、キャンペーン画像などの内容が、本文や代替テキストでも提供されているか確認します。 | 画像内にだけ、日時、料金、条件、連絡先などが記載されている。 | 重要な情報はHTMLテキストでも掲載します。複雑な図表には、近くに要約や詳細説明を追加します。 |
見出し・ページ構造
| No. | チェック項目 | 確認方法 | よくある問題 | 改善ポイント |
|---|---|---|---|---|
| 4 | 見出しが内容の階層に沿って設定されている | h1、h2、h3などの見出しタグを調べ、文章の階層と一致しているか確認します。 | 文字を大きくする目的だけで見出しタグを使う。h2の次に、理由なくh4が設定されている。 | ページタイトルをh1、大項目をh2、その下の項目をh3とし、論理的な順序で設定します。 |
| 5 | ページタイトルと見出しから内容を理解できる | ブラウザのタブに表示されるタイトルと、ページ内の見出しだけを読んで内容を推測できるか確認します。 | 「トップ」「サービス」「詳細」など、他のページと区別しにくいタイトルや見出しになっている。 | ページ固有の内容や目的が伝わるタイトルと見出しを設定します。 |
リンク・ナビゲーション
| No. | チェック項目 | 確認方法 | よくある問題 | 改善ポイント |
|---|---|---|---|---|
| 6 | リンク文言から遷移先を理解できる | リンク部分の文字だけを読み、移動先や実行される操作が分かるか確認します。 | 「こちら」「詳細」「もっと見る」だけがリンクになっている。 | 「サービス資料をダウンロードする」など、リンク先や操作が分かる文言にします。 |
| 7 | 同じリンク文言を異なる遷移先に使っていない | ページ内やサイト内で、同じ文言のリンクが異なるページへ移動しないか確認します。 | 複数の「詳しく見る」が、それぞれ異なるページへ移動する。 | 「料金について詳しく見る」「導入事例を見る」など、移動先ごとに文言を区別します。 |
色・文字・表示
| No. | チェック項目 | 確認方法 | よくある問題 | 改善ポイント |
|---|---|---|---|---|
| 8 | 文字と背景に十分なコントラストがある | コントラストチェックツールを使い、文字色と背景色の組み合わせを確認します。 | 白い背景に薄いグレーの文字を使用する。画像の上に読みにくい文字を重ねる。 | 通常の文字はコントラスト比4.5:1以上、18pt以上の大きな文字や太字は3:1以上を目安に、文字色を濃くする、背景を変更する、画像にオーバーレイを加えるなどして視認性を確保します（WCAG 2.2 達成基準1.4.3） |
| 9 | 色だけで情報を区別していない | 色をすべて同じ色に置き換えた場合でも、状態や意味を判別できるか確認します。 | 必須項目を赤色だけで示す。グラフの系列を色だけで区別する。 | 「必須」の文字、アイコン、模様、ラベルなどを併用して区別します。 |
| 10 | 文字を拡大しても内容や操作が失われない | ブラウザの表示倍率を200％程度にし、文字の重なり、欠落、不要な横スクロールが発生しないか確認します。 | 文字が枠からはみ出す。ボタンの文字が切れる。本文を読むために左右へスクロールする必要がある。 | 固定幅や固定高さを見直し、画面幅に合わせて内容が折り返される設計にします。 |
フォーム・入力支援
| No. | チェック項目 | 確認方法 | よくある問題 | 改善ポイント |
|---|---|---|---|---|
| 11 | すべての入力欄に項目名が設定されている | 入力欄の近くに項目名が表示され、HTML上でもlabel要素などで入力欄と関連付けられているか確認します。 | 入力欄を選択しても、スクリーンリーダーで項目名が読み上げられない。 | 見た目だけでなく、HTML上でもラベルと入力欄を関連付けます。 |
| 12 | 入力条件とエラー内容が具体的に示される | 未入力や形式違反の状態でフォームを送信し、どの項目をどのように修正すればよいか分かるか確認します。 | 「入力エラーです」としか表示されない。赤枠だけでエラー箇所を示す。 | 「メールアドレスを半角で入力してください」など、エラー箇所と修正方法を文章で示します。 |
| 13 | プレースホルダーだけに頼っていない | 入力を始めたあとも、何を入力する欄か確認できるか見ます。 | 入力例や項目名がプレースホルダーにしかなく、入力すると消える。 | 項目名は入力欄の外側に常時表示し、プレースホルダーは補足的な入力例として使用します。 |
キーボード操作・フォーカス
| No. | チェック項目 | 確認方法 | よくある問題 | 改善ポイント |
|---|---|---|---|---|
| 14 | キーボードだけで主要な操作を行える | マウスを使わず、Tab、Shift＋Tab、Enter、Space、矢印キーなどでページを操作します。 | メニューを開けない。ボタンを実行できない。フォームを送信できない。 | クリック操作に加えて、適切なHTML要素とキーボード操作に対応させます。 |
| 15 | 現在のフォーカス位置が見える | Tabキーで移動し、現在どのリンクやボタンを選択しているか視覚的に確認できるか見ます。 | フォーカス枠が消されている。背景色と同化して位置が分からない。 | 輪郭線や背景色の変化などを使い、フォーカス位置を明確に表示します。 |
| 16 | メニューやモーダルをキーボードで操作できる | ハンバーガーメニュー、プルダウン、ポップアップ、モーダルなどをキーボードで開閉し、閉じた後にフォーカスが元の操作要素へ戻るか確認します。 | モーダルを閉じられない。背後の要素へフォーカスが移動する。特定の場所から抜けられない。 | 開閉操作、フォーカス移動、Escキーによる終了などを適切に実装します。 |
動画・PDF・動きのあるコンテンツ
| No. | チェック項目 | 確認方法 | よくある問題 | 改善ポイント |
|---|---|---|---|---|
| 17 | 動画や音声に字幕・文字情報がある | 音声を消した状態でも、動画の重要な内容を理解できるか確認します。 | 話している内容が音声でしか提供されない。自動字幕の誤変換が修正されていない。 | 正確な字幕や文字起こしを提供します。映像だけで伝える重要情報には、必要に応じて説明を加えます。 |
| 18 | PDFだけに重要情報を掲載していない | 募集要項、料金、手続き、日程などの重要情報が、PDFを開かなくても確認できるか見ます。 | スキャン画像のPDFしかなく、文字検索や読み上げができない。 | 主要情報はWebページにも掲載します。PDFを提供する場合は、見出しや読み上げ順序なども確認します。 |
| 19 | 自動で動くコンテンツを停止でき、危険な点滅がない | カルーセル、アニメーション、動画などが自動で動き続ける場合、停止や一時停止ができるか確認します。 | 自動で切り替わる情報を読み終える前に画面が変わる。激しい点滅がある。 | 停止・一時停止・非表示の手段を提供し、利用者の操作を妨げる点滅や過度な動きを避けます。 |
| 20 | スマートフォンでも押しやすく操作できる | 実際のスマートフォンや開発者ツールを使い、ボタン、リンク、フォームを操作します。 | リンク同士が近すぎる。ボタンが小さい。画面外にはみ出して操作できない。 | 操作対象に十分な大きさと間隔を確保し、縦向き・横向きや異なる画面幅でも確認します（WCAG 2.2で新たに追加された達成基準2.5.8「ターゲットのサイズ（最小）」に対応する観点です）。 |
チェック結果の記録方法
確認結果は、単に「問題あり・なし」だけでなく、次のような項目で記録すると改善につなげやすくなります。
| 記録項目 | 記載例 |
|---|---|
| 対象ページ | 問い合わせフォーム |
| チェック項目 | 入力欄に項目名が設定されているか |
| 確認結果 | 一部問題あり |
| 問題の内容 | 電話番号欄のラベルがHTML上で関連付けられていない |
| 影響範囲 | 共通フォームを使用する5ページ |
| 優先度 | 高 |
| 対応方針 | フォームテンプレートを修正する |
共通ヘッダー、フッター、フォーム、ボタンなどの問題は、テンプレートを修正することで複数ページをまとめて改善できる場合があります。
アクセシビリティチェックに役立つ無料ツール
Webアクセシビリティの問題を効率よく見つけるには、自動チェックツールが役立ちます。ただし、ツールだけですべての問題を判定することはできません。
無料で使える主なチェックツール
| ツール | 主な用途 | 特徴 | 注意点 |
|---|---|---|---|
| Lighthouse | ページ単位の簡易診断 | Chromeの開発者ツールから実行でき、アクセシビリティの問題を一覧で確認できます。 | スコアだけで判断せず、指摘内容を個別に確認する必要があります。 |
| axe DevTools | HTMLやUIの問題確認 | ブラウザ拡張機能として利用でき、問題箇所と修正の手がかりを確認できます。 | 無料版と有料機能で利用できる範囲が異なります。 |
| WAVE | ページ構造の視覚的確認 | 対象ページ上にアイコンを表示し、見出し、alt属性、フォームなどを確認できます。 | 表示されたアイコンの意味を理解し、人が判断する必要があります。 |
| Colour Contrast Analyser | 文字色と背景色の確認 | 画面上の色を取得し、コントラスト比を確認できます。 | 通常文字、大きな文字、UI部品など、対象に応じた基準を確認する必要があります。 |
自動チェックツールだけでは確認できない項目
自動ツールは、alt属性の有無やHTML構造など、機械的に判定できる問題の発見に役立ちます。
一方、次のような項目は、人による確認が必要です。
- 代替テキストの内容が画像の役割に合っているか
- 見出しやリンク文言が分かりやすいか
- 読み上げたときの順序が自然か
- キーボードだけで一連の操作を完了できるか
- エラーメッセージを読んで修正方法を理解できるか
- 動画の字幕が正確か
- ページ全体の情報構造が理解しやすいか
ツールでエラーが出なかったことは、アクセシビリティ上の問題がないことを意味しません。
自動チェック、目視確認、キーボード操作、必要に応じたスクリーンリーダー確認を組み合わせることが重要です。
WCAGとJIS X 8341-3の関係
WCAGとは
WCAG（Web Content Accessibility Guidelines）は、W3Cが策定しているWebアクセシビリティの国際的なガイドラインです。
WCAGでは、アクセシビリティを次の4原則で整理しています。
- 知覚可能：情報やUIを、利用者が認識できる形で提供する
- 操作可能：キーボードなど、さまざまな方法で操作できる
- 理解可能：情報や操作方法を理解できる
- 堅牢：支援技術を含むさまざまな環境で解釈できる
WCAG 2.2には、A、AA、AAAの3つの適合レベルがあります。Aが最低限のレベルで、レベルAAへの適合にはAとAA、レベルAAAへの適合にはA・AA・AAAのすべての達成基準を満たす必要があります。
JIS X 8341-3とは
日本では、Webコンテンツのアクセシビリティに関する規格として、JIS X 8341-3が参照されています。
2026年7月時点では、JIS X 8341-3:2016が現行規格として利用されています。現行規格はWCAG 2.0と同一の内容です。一方、国際規格の更新を受け、WCAG 2.2と整合する方向でJIS X 8341-3の改正が検討されています。
最新の規格や改正状況については、ウェブアクセシビリティ基盤委員会（WAIC）などの公式情報を確認してください。
チェックリストの確認と正式な試験は異なる
本記事のチェックリストは、企業サイトにある代表的な問題を発見し、改善を始めるためのものです。
「JIS X 8341-3:2016の適合レベルAAに準拠」などの対応度を表明する場合は、対象ページ、目標とする適合レベル、試験方法などを定め、規格に沿って試験を実施する必要があります。
企業サイトのアクセシビリティ対応は義務なのか
2024年4月1日から、改正障害者差別解消法により、事業者による障害のある人への合理的配慮の提供が義務化されました。
合理的配慮とは、障害のある人から配慮を求める意思が示された場合に、過重な負担にならない範囲で、利用を妨げている障壁を取り除くための対応を行うことです。
一方、Webサイトのアクセシビリティ改善など、不特定多数の利用者を想定して事前に行う対応は「環境の整備」に当たり、事業者の努力義務とされています。
したがって、すべての民間企業のWebサイトに対し、JIS X 8341-3やWCAGへの一律の適合が直接義務づけられているわけではありません。ただし、Webサイトを利用できないという申し出があった場合には、サービスの性質や対応に必要な負担などを踏まえ、個別に対応を検討する必要があります。
法令対応だけを目的とするのではなく、問い合わせ、申し込み、採用、サポートなどの重要な導線を、より多くの利用者が使えるようにする品質改善として取り組むことが重要です。
問題が見つかったときの改善手順
1．確認するページを決める
サイト全体を一度に確認するのが難しい場合は、トップページ、主要サービスページ、フォームなど、利用者や事業への影響が大きいページから始めます。
2．自動チェックツールを実行する
Lighthouseやaxe DevToolsなどを利用し、HTML構造、alt属性、コントラストなど、機械的に確認できる問題を洗い出します。
3．目視・キーボード操作で確認する
自動チェックでは判断できないリンク文言、操作の分かりやすさ、フォームのエラー表示などを人が確認します。
4．重要度と影響範囲で優先順位を付ける
次のような問題は、優先的に対応することをおすすめします。
- 問い合わせや申し込みを完了できない
- キーボードでは主要な機能を操作できない
- 重要な情報が画像や音声でしか提供されていない
- 共通テンプレートに問題があり、多数のページへ影響している
- 文字が読めない、拡大すると内容が欠ける
5．共通部品から改善する
ヘッダー、ナビゲーション、ボタン、フォームなど、複数ページで共通して使われる部品から修正すると、効率的にサイト全体を改善できます。
6．改修後に再チェックする
修正後は、問題が解消されたかを再確認します。別の操作や表示に影響が出ていないかもあわせて確認しましょう。
7．制作・更新フローに組み込む
Webアクセシビリティは、一度確認して終わりではありません。ページの追加やCMSの更新により、新たな問題が発生する可能性があります。
記事公開、ページ制作、サイト改修などのチェック工程に、アクセシビリティ確認を組み込みましょう。
よくある質問
Webアクセシビリティは企業サイトでも必要ですか？
企業サイトでも重要です。特に、問い合わせ、資料請求、採用応募、会員登録などの重要な導線を利用できない状態は、利用者の機会損失だけでなく、企業側の事業機会の損失にもつながります。
無料ツールだけでチェックできますか？
無料ツールで、代表的な技術上の問題を発見できます。ただし、代替テキストの内容、リンク文言の分かりやすさ、キーボード操作のしやすさなどは、自動ツールだけでは十分に判断できません。目視と操作確認を組み合わせてください。
WCAGはどの適合レベルを目指せばよいですか？
一般的には、WCAG 2.2の適合レベルAAが目標として参照されることが多いです。ただし最適な水準はサイトの目的、利用者層、公共性、契約・調達要件などによって異なるため、対象範囲や実現可能性を踏まえて個別に方針を定める必要があります。
小規模なサイトでも対応した方がよいですか？
サイト規模にかかわらず、基本的な確認には意味があります。画像のalt属性、見出し、リンク文言、フォームラベルなどは、比較的小さな修正で改善できる場合があります。
PDFや動画もチェック対象ですか？
はい。Webページから提供するPDF、動画、音声なども、利用者へ情報を届けるコンテンツの一部です。PDFの読み上げ対応、動画の字幕、音声の文字起こしなども確認します。
アクセシビリティ対応にはどれくらいの費用がかかりますか？
費用は、影響範囲（共通テンプレートの修正で済むか、ページ単位の個別対応が必要か）と問題の技術的な難易度によって大きく変わります。テンプレートやコンポーネント単位の改善は複数ページに一括で反映できるため費用対効果が高く、逆に個別ページごとの手作業対応が必要な場合は工数が積み上がります。
また、新規制作・リニューアル時に要件として組み込む方が、公開後にまとめて改修するより総費用を抑えやすい傾向があります。正確な見積もりには、対象範囲と現状の問題数を踏まえた個別診断が必要です。
まとめ
Webアクセシビリティチェックでは、画像や見出しだけでなく、リンク、色、フォーム、キーボード操作、動画、PDF、スマートフォンでの操作性など、複数の観点を確認する必要があります。
最初からすべてのページを完全に対応しようとすると、確認範囲が広くなり、改善が進まない場合があります。
まずは、次のページから確認を始めましょう。
- トップページ
- 主要なサービスページ
- 問い合わせ・資料請求フォーム
- 採用応募ページ
- アクセス数の多いページ
自動ツールによる確認と、人による目視・操作確認を組み合わせ、影響の大きい問題から改善することが重要です。
また、Webサイトは継続的に更新されます。今回のチェックリストを、ページ制作や公開前確認の工程にも取り入れ、継続的な品質改善につなげましょう。
