【完全保存版】Webアクセシビリティ方針策定テンプレート｜WCAG・JIS準拠ガイド

Webアクセシビリティ対応で最初にやるべきことは「方針の策定」です。何をどこまで対応するかを文書化してから実装に入ることで、チーム全体で認識を揃え、法的リスクを下げながら着実に改善できます。

2024年4月に障害者差別解消法が改正され、民間事業者にも「合理的配慮の提供」が義務化されました。Webアクセシビリティ対応はこの合理的配慮の一環として位置付けられており、「あったら良い」ものではなく「必須」の取り組みになっています。

本記事では、アクセシビリティ方針の策定方法から、WCAG 2.1・JIS X 8341-3準拠のチェックリストテンプレート、試験結果の公開方法、継続的な運用体制まで、実務で即使える形で解説します。

---

Webアクセシビリティ方針とは？

Webアクセシビリティ方針とは、組織がWebサイトやアプリケーションを誰もが利用できるようにするための取り組み姿勢を明文化した文書です。

WCAG（Web Content Accessibility Guidelines）には50以上の達成基準があり、すべてを一度に対応するのは困難です。方針文書で「何を・いつまでに・誰が」やるかを定めることで、優先順位をつけた段階的な対応が可能になります。

アクセシビリティ方針に含める5つの要素

要素	内容	記載のポイント
対象範囲	どのサイト・ページが対象か	除外する範囲（外部埋め込み等）も明記
目標達成基準	WCAG/JISのどのレベルを目指すか	多くの組織はレベルAAを採用
達成期限	いつまでに目標を達成するか	フェーズを分けた段階的な期限設定を推奨
実施体制	誰が責任を持つか	推進責任者・実務担当・外部協力を明記
問い合わせ先	アクセシビリティに関する窓口	メールと電話の両方を設置

1. 対象範囲

どのWebサイト・ページがアクセシビリティ対応の対象かを明記します。

【記載例】
対象範囲：
・公式Webサイト（https://example.com）全体
・ただし、以下は対象外とする
  - 外部サービスで提供されるコンテンツ（YouTube埋め込み動画など）
  - PDFファイル（2024年3月以前に公開されたもの）

2. 目標とする達成基準

WCAG 2.1またはJIS X 8341-3のどのレベルを目標とするかを明示します。

【記載例】
目標達成基準：
JIS X 8341-3:2016の適合レベルAAに準拠することを目標とします。

各レベルの説明：

• レベルA：最低限満たすべき基準（25項目）
• レベルAA：多くの組織が目標とする推奨レベル（38項目）
• レベルAAA：最高水準（61項目、すべてを達成するのは困難）

3. 達成期限

【記載例】
達成期限：
2027年3月31日までに、レベルAAの達成基準をすべて満たすことを目指します。

4. 実施体制

【記載例】
実施体制：
・推進責任者：広報部長
・実務担当：Web制作チーム
・外部協力：株式会社〇〇（アクセシビリティ監査）

5. 問い合わせ先

【記載例】
お問い合わせ先：
当サイトのアクセシビリティに関するご意見・ご要望は、以下までお寄せください。
メール：accessibility@example.com
電話：03-1234-5678（平日9:00-17:00）

---

アクセシビリティ方針策定の5ステップ

ステップ1：現状分析

まず、現在のWebサイトのアクセシビリティレベルを評価します。

自動チェックツール：

• Lighthouse（Chrome DevTools内蔵）：アクセシビリティスコアを100点満点で評価
• axe DevTools（ブラウザ拡張機能）：詳細な問題点をリスト化
• WAVE（WebAIM提供）：ビジュアルで問題箇所を表示

手動チェックの内容：

• キーボードのみでの操作確認（Tabキーで全機能にアクセス可能か）
• スクリーンリーダー（NVDA、JAWSなど）での読み上げ確認
• 画像のalt属性確認

【分析結果の例】
重大な問題（レベルA未達成）：
・画像の70%にalt属性がない
・フォームにlabel要素がない
・見出しの階層が不適切（H1がない、H3の後にH5など）

中程度の問題（レベルAA未達成）：
・コントラスト比が不足（3.2:1）
・フォーカス表示が不明瞭
・エラーメッセージが曖昧

ステップ2：優先順位の決定

すべての問題を一度に解決するのは困難なため、優先順位を付けます。

優先度	基準	対応目安
高	影響が大きい・レベルA未達成・法的リスクあり	直ちに対応
中	レベルAA未達成・改善効果が高い	3ヶ月以内
低	レベルAAA・影響が限定的	6ヶ月以内

優先度高（すぐに対応）：
・画像のalt属性追加
・フォームのlabel要素追加
・見出し構造の修正

優先度中（3ヶ月以内）：
・コントラスト比の改善
・キーボードフォーカスの視覚化
・エラーメッセージの改善

優先度低（6ヶ月以内）：
・動画への字幕追加
・音声読み上げ対応の強化

ステップ3：目標設定

現状分析と優先順位を基に、現実的な目標を設定します。フェーズを分けることで、チームへの負荷を分散しながら確実に達成できます。

【フェーズ1】2026年6月まで
・レベルA完全達成
・主要ページ（トップ、サービス紹介、お問い合わせ）のレベルAA達成

【フェーズ2】2026年12月まで
・全ページのレベルAA達成
・アクセシビリティ試験実施と結果公開

【フェーズ3】2027年3月まで
・継続的な監視体制の確立
・新規コンテンツのアクセシビリティ基準統一

ステップ4：実施計画の策定

【2026年4月】
・全ページの画像alt属性追加（担当：デザイナー）
・フォームlabel要素追加（担当：フロントエンドエンジニア）

【2026年5月】
・見出し構造の修正（担当：コーダー）
・コントラスト比の改善（担当：デザイナー）

【2026年6月】
・キーボード操作の改善（担当：フロントエンドエンジニア）
・中間評価と問題点の洗い出し

【2026年7-9月】
・残りの問題対応
・外部監査の実施

【2026年10-12月】
・最終調整とテスト
・アクセシビリティ試験結果の公開

ステップ5：方針文書の作成と公開

策定した方針を文書化し、Webサイトで公開します。公開場所はユーザーが見つけやすい場所に設置することが重要です。

• フッターに「アクセシビリティ方針」リンクを設置
• サイトマップに掲載
• トップページから2クリック以内でアクセスできる場所

---

アクセシビリティチェックリストテンプレート（WCAG 2.1レベルAA）

以下は、WCAG 2.1レベルAAの主要な達成基準をベースにしたチェックリストです。4つの原則（知覚可能・操作可能・理解可能・堅牢性）ごとに整理しています。

1. 知覚可能（Perceivable）

情報とユーザーインターフェースのコンポーネントは、ユーザーが知覚できる方法で提示されなければならない。

1.1 代替テキスト

• □ すべての画像に適切なalt属性が設定されている
• □ 装飾目的の画像はalt=””（空）に設定されている
• □ 複雑な図表には長い説明文が提供されている

【良い例】


【悪い例】

（alt属性なし）

1.2 時間依存メディア

• □ 動画に字幕が提供されている
• □ 音声コンテンツに文字起こしが提供されている
• □ 動画に音声解説（重要な視覚情報の説明）がある

1.3 適応可能

• □ 見出しが適切な階層構造（H1→H2→H3）になっている
• □ リストはul/ol要素でマークアップされている
• □ テーブルにth要素とcaption要素が使用されている
• □ フォームのinputとlabelが関連付けられている

【良い例】
メールアドレス


【悪い例】
メールアドレス 

1.4 判別可能

• □ テキストと背景のコントラスト比が4.5:1以上（通常テキスト）
• □ 大きなテキスト（18pt以上）のコントラスト比が3:1以上
• □ 色だけで情報を伝えていない（形や文字も併用）
• □ テキストサイズを200%に拡大しても内容が読める
• □ 画像化されたテキストを使用していない（ロゴを除く）

【コントラスト比の確認方法】
1. Chrome DevToolsを開く
2. 要素を選択
3. Stylesパネルで色を確認
4. コントラスト比が自動表示される

または
WebAIM Contrast Checker（https://webaim.org/resources/contrastchecker/）を使用

2. 操作可能（Operable）

ユーザーインターフェースのコンポーネントとナビゲーションは操作可能でなければならない。

2.1 キーボードアクセス可能

• □ すべての機能がキーボードのみで操作できる
• □ キーボードフォーカスが視覚的に分かる
• □ キーボードトラップがない（フォーカスが抜け出せない状態）

【キーボード操作のテスト】
・Tab: 次の要素に移動
・Shift + Tab: 前の要素に移動
・Enter / Space: ボタンやリンクの実行
・矢印キー: ドロップダウンメニューの選択

2.2 十分な時間

• □ タイムアウトがある場合、警告が表示される
• □ 自動更新するコンテンツを一時停止できる
• □ 点滅するコンテンツを停止できる

2.3 発作の防止

• □ 1秒間に3回以上点滅するコンテンツがない

2.4 ナビゲーション可能

• □ ページにスキップリンク（「メインコンテンツへ」）がある
• □ ページタイトル（title要素）が適切で一意
• □ フォーカス順序が論理的
• □ リンクの目的が文脈から理解できる
• □ 複数の方法でページにアクセスできる（検索、サイトマップなど）

【スキップリンクの実装例】
メインコンテンツへスキップ


  


CSS:
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  z-index: 100;
}
.skip-link:focus {
  top: 0;
}

3. 理解可能（Understandable）

情報とユーザーインターフェースの操作は理解可能でなければならない。

3.1 読みやすさ

• □ html要素にlang属性が設定されている（<html lang=”ja”>）
• □ 外国語の部分にlang属性が設定されている

3.2 予測可能

• □ フォーカス時に予期しないコンテンツ変更が起きない
• □ 入力時に予期しない画面遷移が起きない
• □ ナビゲーションが一貫している
• □ 同じ機能には同じ名前が使われている

3.3 入力支援

• □ エラーが自動検出され、説明が提示される
• □ フォームにラベルまたは説明がある
• □ エラー修正の提案が提供される
• □ 重要な操作（送信、削除など）は確認できる

【良いエラーメッセージの例】
❌ 「入力エラーです」
✅ 「メールアドレスの形式が正しくありません。例：taro@example.com」

❌ 「必須項目です」
✅ 「会社名を入力してください」

4. 堅牢性（Robust）

コンテンツは、支援技術を含む様々なユーザーエージェントが確実に解釈できるように十分に堅牢でなければならない。

4.1 互換性

• □ HTMLが仕様に準拠している（W3C Validatorでエラーなし）
• □ name、id、classの値が重複していない（必要な場合を除く）
• □ ARIA属性が正しく使用されている

【ARIAの適切な使用例】

  



  フォームが正常に送信されました。

---

アクセシビリティ試験の実施と結果公開

アクセシビリティ対応を実施したら、試験を行い、結果を公開します。

試験対象ページの選定

• トップページ
• 主要なコンテンツページ（サービス紹介、会社概要など）
• 問い合わせフォーム
• サイトマップ
• アクセシビリティ方針ページ

試験結果の公開テンプレート

【アクセシビリティ試験結果】

試験実施日：2026年10月15日
試験実施者：株式会社〇〇 Web制作チーム
試験対象：公式Webサイト（https://example.com）
試験ページ数：20ページ

目標達成基準：JIS X 8341-3:2016 適合レベルAA
試験結果：適合

ただし、以下の項目は例外とする：
・外部サービス（YouTube動画）の埋め込みコンテンツ
・2024年3月以前に公開されたPDFファイル

今後の対応：
・2027年3月までにPDFファイルのアクセシビリティ改善を実施
・新規コンテンツは公開前にアクセシビリティチェックを必須化

---

継続的な運用と改善

運用項目	内容	頻度
新規コンテンツチェック	公開前にチェックリストで確認・自動ツールでスキャン	毎回
定期監査	全体チェック・外部専門家による評価	年1回
フィードバック対応	ユーザーからの問い合わせ窓口・改善要望への対応	随時
チーム教育	勉強会・最新ガイドラインの共有	定期的

---

よくある質問

Q. 小規模なサイトでもアクセシビリティ方針の策定は必要ですか？

規模にかかわらず、不特定多数のユーザーに公開するサイトであれば方針の策定を推奨します。2024年改正障害者差別解消法では民間事業者も対象となっており、方針を公開することでクライアントや利用者への信頼性向上にもつながります。まずはレベルAの達成を目標に設定するだけでも効果があります。

Q. WCAGとJIS X 8341-3の違いは何ですか？

WCAG（Web Content Accessibility Guidelines）はW3Cが策定した国際的なガイドラインです。JIS X 8341-3は日本の工業規格で、WCAGを参照して策定されています。内容はほぼ同じですが、日本の行政機関はJIS X 8341-3への準拠が求められることが多いです。民間企業はどちらを参照しても問題ありませんが、クライアントの要件に合わせて使い分けてください。

Q. コントラスト比の4.5:1という数値はどう確認すればいいですか？

Chrome DevToolsのStylesパネルで色の値を選択すると、背景色との比較がポップアップで表示されます。また、WebAIMの「Contrast Checker」（https://webaim.org/resources/contrastchecker/）に前景色と背景色のHEX値を入力することでも確認できます。Figmaを使用している場合は「Contrast」プラグインが便利です。

Q. スクリーンリーダーのテストに必要な環境は何ですか？

Windowsでは無料の「NVDA」、Macでは標準搭載の「VoiceOver」（Command + F5で起動）が使えます。商用の「JAWS」は高機能ですが有料です。テストの際はキーボードのみで操作し、見出しナビゲーション（Hキー）・リンクナビゲーション（Tabキー）・フォームの読み上げを確認するのが基本です。

Q. PDFのアクセシビリティ対応はどうすればいいですか？

Adobe AcrobatのPDFアクセシビリティチェック機能を使うと、問題点の自動検出と修正ガイドが得られます。主な対応項目は、見出しタグの設定・代替テキストの付与・読み上げ順序の設定・言語設定です。既存のPDFが多い場合は優先順位をつけて段階的に対応し、新規作成するPDFはWordやInDesignのアクセシビリティ設定を活用してから出力する方法が効率的です。

---

まとめ

• 方針の5要素：対象範囲・達成基準・達成期限・実施体制・問い合わせ先を必ず含める
• 策定の5ステップ：現状分析→優先順位→目標設定→実施計画→方針公開の順に進める
• レベルAAを目標に：多くの組織が採用する推奨レベル。レベルAから段階的に達成する
• 4つの原則で確認：知覚可能・操作可能・理解可能・堅牢性のチェックリストを活用する
• 試験結果を公開：実施日・対象範囲・達成基準・例外事項をセットで公開することで信頼性が高まる
• 継続的な運用が鍵：新規コンテンツの事前チェックと年1回の定期監査を仕組み化する

---

WithCodeを体験できる初級コース公開中！

初級コース（¥49,800）が完全無料に！

• 期間：1週間
• 学習内容：
  ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
  → 正しい学習方法で「確かな成長」を実感できるカリキュラム

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？

未経験でも心配することはありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！