この記事の対象: Webアクセシビリティ対応を始めたいWeb担当者・デザイナー・エンジニア
読了時間: 約8分
「アクセシビリティって大事なのはわかるけど、何から手をつければいいかわからない」——多くのWeb制作関係者が抱える課題です。
2024年4月の障害者差別解消法改正により、民間企業にも合理的配慮の提供が義務化されました。Webサイトも例外ではなく、アクセシビリティ対応は「やるべきか」ではなく「どこまでやるか」のフェーズに入っています。
この記事では、WCAG（Web Content Accessibility Guidelines）の基本を踏まえ、最低限対応すべき5つのポイントを具体的な実装方法とあわせて解説します。制作会社に依頼する際のチェックリストとしてもお使いいただけます。
Webアクセシビリティとは
Webアクセシビリティとは、障害の有無や年齢、利用環境に関係なく、誰もがWebサイトの情報にアクセスできる状態を指します。
対象は視覚障害のある方だけではありません。
| ユーザー | 困りごとの例 |
|---|---|
| 視覚障害（全盲） | スクリーンリーダーで読めない画像・動画 |
| 視覚障害（弱視） | 小さい文字、低コントラストのテキスト |
| 色覚特性 | 赤と緑で区別された情報が判別できない |
| 聴覚障害 | 字幕のない動画、音声のみの情報 |
| 運動障害 | マウスが使えず、キーボードのみで操作 |
| 高齢者 | 小さいリンク、複雑なナビゲーション |
| 一時的な障害 | 骨折した手、まぶしい屋外でのスマホ利用 |
日本の65歳以上人口は約3,600万人（2025年時点）。高齢者対応だけでも、国内人口の約3割がアクセシビリティの恩恵を受けます。
準拠すべき基準: WCAG 2.1
Webアクセシビリティの国際基準がWCAG（Web Content Accessibility Guidelines）です。W3C（World Wide Web Consortium）が策定し、日本のJIS X 8341-3もWCAGに準拠しています。
| 適合レベル | 概要 | 目安 |
|---|---|---|
| レベルA | 最低限の基準 | すべてのサイトが満たすべき |
| レベルAA | 推奨基準 | 公的機関・大手企業の目標 |
| レベルAAA | 最高基準 | すべてのコンテンツで達成は困難 |
多くの企業サイトで目指すべきはレベルAAです。この記事で紹介する5つのポイントは、レベルAAの主要項目をカバーしています。
2026年の義務化動向
障害者差別解消法の改正（2024年4月施行）
2024年4月に改正障害者差別解消法が施行され、民間企業にも合理的配慮の提供が義務化されました（それまでは努力義務）。
Webサイトに関しては、「合理的配慮」の具体的な内容として、総務省のガイドラインでJIS X 8341-3（≒WCAG 2.1）への対応が推奨されています。
法的リスク
現時点では罰則規定はありませんが、訴訟リスクは高まっています。アメリカでは年間数千件のWebアクセシビリティ訴訟が発生しており、日本でも同様の流れが進む可能性があります。
「義務だから対応する」のではなく、「すべてのユーザーにリーチするためのビジネス投資」として捉えるのが正しいアプローチです。
義務化の最新動向については「Webアクセシビリティ義務化の最新動向」で詳しく解説しています。
最低限対応すべき5つのポイント
1. 色だけで情報を伝えない
問題: フォームのエラーを赤色だけで表示している → 色覚特性のあるユーザーが気づけない
対応方法:
– エラー箇所に赤色 + アイコン（⚠）+ テキスト（「この項目は必須です」）を併記
– リンクテキストに下線を追加（色だけでリンクと判別させない）
– グラフの凡例に色 + パターン（斜線、ドットなど）を使用
<!-- 悪い例 -->
<span style="color: red;">必須</span>
<!-- 良い例 -->
<span class="error-text" role="alert">
<span aria-hidden="true">⚠</span> この項目は必須です
</span>
2. キーボード操作に対応する
問題: マウスでしか操作できないUI → 運動障害のあるユーザーが利用できない
対応方法:
– すべてのインタラクティブ要素（リンク、ボタン、フォーム）にTabキーでフォーカスが当たることを確認
– フォーカス時のスタイル（アウトライン）を消さない
– ドロップダウンメニューやモーダルがキーボードで操作できることを確認
/* 悪い例: フォーカスリングを消している */
*:focus {
outline: none;
}
/* 良い例: マウスユーザーにはリングを消し、キーボードユーザーには表示 */
:focus:not(:focus-visible) {
outline: none;
}
:focus-visible {
outline: 2px solid #0066ff;
outline-offset: 2px;
}
チェック方法: Tabキーだけでサイト内のすべての機能を操作してみる。ハンバーガーメニューの開閉、フォーム入力、送信ボタンまでキーボードだけで完了できるか確認。
3. alt属性を適切に設定する
問題: 画像にalt属性がない、または「image1.jpg」のような無意味な値 → スクリーンリーダーで画像の内容が伝わらない
対応方法:
| 画像の種類 | alt属性の書き方 |
|---|---|
| 情報を伝える画像 | 画像の内容を簡潔に記述 |
| 装飾目的の画像 | alt="" （空文字）で読み上げスキップ |
| テキスト入りの画像 | 画像内のテキストをそのまま記述 |
| リンク画像 | リンク先の内容を記述 |
| 複雑な図表 | 本文で説明し、altは概要のみ |
<!-- 悪い例 -->
<img src="team.jpg">
<img src="team.jpg" alt="image">
<!-- 良い例 -->
<img src="team.jpg" alt="ミーティング中の開発チーム4名">
<!-- 装飾画像 -->
<img src="divider.png" alt="">
ポイント: 「〇〇の画像」「〇〇の写真」という書き方は冗長です。スクリーンリーダーは<img>要素であることを自動的に伝えるため、「写真」等の記述は不要です。
4. コントラスト比を確保する
問題: 薄いグレーのテキスト（#999999）が白背景で読みにくい → 弱視のユーザーや屋外利用者が読めない
WCAG 2.1 レベルAAの基準:
| テキスト種類 | 必要なコントラスト比 |
|---|---|
| 通常テキスト（18px未満） | 4.5:1 以上 |
| 大きいテキスト（18px以上 or 14px太字以上） | 3:1 以上 |
| ロゴ・装飾テキスト | 基準なし |
実例での確認:
| テキスト色 | 背景色 | コントラスト比 | 判定 |
|---|---|---|---|
| #333333 | #FFFFFF | 12.6:1 | ✅ 合格 |
| #666666 | #FFFFFF | 5.7:1 | ✅ 合格 |
| #999999 | #FFFFFF | 2.8:1 | ❌ 不合格 |
| #FFFFFF | #0066FF | 4.7:1 | ✅ 合格 |
チェックツール: WebAIMのContrast Checkerに2色を入力するだけで判定できます。Figmaユーザーは「Contrast」プラグインが便利です。
5. 見出しの階層を正しくする
問題: デザインの都合でh1→h3→h2のように見出しレベルが飛んでいる → スクリーンリーダーの見出しジャンプ機能が正しく動作しない
対応方法:
– h1 → h2 → h3 の順番を守る（h2の次にh4が来てはいけない）
– 各ページにh1は1つだけ
– 見出しのデザイン（サイズ・太さ）は見出しレベルとは別にCSSで制御
<!-- 悪い例 -->
<h1>会社概要</h1>
<h3>代表メッセージ</h3> <!-- h2を飛ばしている -->
<h2>事業内容</h2>
<!-- 良い例 -->
<h1>会社概要</h1>
<h2>代表メッセージ</h2>
<h2>事業内容</h2>
<h3>Web制作事業</h3>
<h3>コンサルティング事業</h3>
アクセシビリティチェックツール
自分のサイトがどの程度対応できているか、以下のツールで確認できます。
| ツール | 種類 | 特徴 |
|---|---|---|
| WAVE | ブラウザ拡張 | 視覚的にエラー箇所を表示。初心者向け |
| axe DevTools | ブラウザ拡張 | 詳細な技術レポート。開発者向け |
| Lighthouse | Chrome DevTools内蔵 | パフォーマンス+アクセシビリティを一括チェック |
| Nu Html Checker | Webサービス | HTMLの文法チェック（W3C公式） |
| カラーコントラストアナライザー | デスクトップアプリ | 任意のUI要素のコントラスト比を測定 |
おすすめの使い方: まずLighthouseで全体のスコアを確認 → スコアが低い項目をaxe DevToolsで詳細分析 → 修正、という流れが効率的です。
発注者が制作会社に伝えるべきこと
Web制作を外注する場合、以下の項目を制作会社に確認・依頼しましょう。
見積もり・契約段階で確認すること
- 「WCAG 2.1 レベルAAに準拠してほしい」と明確に伝える
- アクセシビリティ対応が見積もりに含まれているか確認
- 対応範囲（全ページか、主要ページのみか）を合意する
制作中に確認すること
- デザインカンプの段階でコントラスト比をチェック
- テスト環境でキーボード操作を試す
- alt属性のテキスト案を確認・指示
納品時に確認すること
- LighthouseのAccessibilityスコアを納品物に含めてもらう
- 「アクセシビリティ対応箇所一覧」のドキュメントを依頼
制作会社の選び方全般については「WEB制作会社の選び方完全ガイド」を参考にしてください。
まとめ
Webアクセシビリティ対応は、特別なことではありません。この記事で紹介した5つのポイントは、いずれも基本的なHTML/CSSの知識で対応できるものです。
| # | ポイント | 対応の難易度 |
|---|---|---|
| 1 | 色だけで情報を伝えない | 低 |
| 2 | キーボード操作に対応する | 中 |
| 3 | alt属性を適切に設定する | 低 |
| 4 | コントラスト比を確保する | 低 |
| 5 | 見出しの階層を正しくする | 低 |
まずはこの5項目をクリアし、その上で段階的にWCAG 2.1レベルAAの完全準拠を目指すのが現実的なアプローチです。
「対応しなければならないから」ではなく、「すべてのユーザーにとって使いやすいサイトを作る」という意識で取り組むことが、結果としてビジネス成果にもつながります。
