「ウェブアクセシビリティ」という言葉を聞いたことはありますか？
ホームページを持つすべての企業に関係する話ですが、特に官公庁・自治体の案件に関わる企業や、公共性の高い事業を行う企業にとっては、今後避けて通れないテーマです。
この記事では、「そもそもウェブアクセシビリティとは何か」という基本から、日本の規格（JIS X 8341-3）や国際基準（WCAG 2.2）の内容、そして中小企業が具体的に何をすればよいのかまで、わかりやすく解説します。
目次
- ウェブアクセシビリティとは
- なぜ今、重要なのか
- 押さえるべき2つの基準（JIS X 8341-3 / WCAG 2.2）
- WCAG 2.2の4原則と具体例
- 官公庁案件で求められるアクセシビリティ
- 中小企業が最低限やるべき10のチェックリスト
- アクセシビリティ対応はSEOにも効く
- よくある誤解
- まとめ
ウェブアクセシビリティとは
ウェブアクセシビリティとは、年齢や障がいの有無に関わらず、誰もがWebサイトの情報にアクセスし、利用できることを意味します。
具体的には、以下のような方々がWebサイトを問題なく使えるようにすることです。
- 視覚に障がいのある方 — スクリーンリーダー（音声読み上げソフト）でサイトを利用する
- 色覚に特性のある方 — 色の区別がつきにくい場合がある
- 聴覚に障がいのある方 — 動画の音声が聞こえない
- 運動機能に障がいのある方 — マウスが使えず、キーボードだけで操作する
- 高齢者 — 文字が小さいと読めない、操作が複雑だと使えない
- 一時的な制約がある方 — 骨折でマウスが使えない、屋外でスマホの画面が見えにくい
「障がい者のためだけの対応」ではありません。高齢化が進む日本では、65歳以上の人口が約3,600万人。あなたのお客様の中にも、小さな文字が読みにくい方、操作に戸惑う方がいるはずです。
アクセシビリティへの対応は、ユーザーの裾野を広げる＝ビジネスチャンスを広げることでもあります。
なぜ今、重要なのか
1. 法制度の強化
2024年4月に改正障害者差別解消法が施行され、民間企業にも「合理的配慮の提供」が義務化されました。Webサイトも合理的配慮の対象に含まれると解釈されています。
現時点では罰則規定はありませんが、対応していないこと自体がリスクになる時代に入っています。
2. 官公庁案件の必須要件
国や自治体のWebサイトは、JIS X 8341-3に基づくアクセシビリティ対応が事実上の必須要件です。
デジタル庁は2022年に「ウェブアクセシビリティ導入ガイドブック」を公開し、2025年には「デジタル社会推進標準ガイドライン」にも正式に組み込まれました。
つまり、官公庁のWeb制作案件を受注するなら、アクセシビリティ対応は提案の前提条件です。
3. 企業の社会的責任（CSR）とブランディング
「誰もが使えるサイト」を作っている企業は、社会的な信頼度が高いと評価されます。BtoB企業やCSRに力を入れている企業にとっては、アクセシビリティ対応がブランド価値の向上につながります。
押さえるべき2つの基準
ウェブアクセシビリティには、日本の規格と国際基準の2つがあります。
JIS X 8341-3:2016（日本の規格）
| 項目 | 内容 |
|---|---|
| 正式名称 | 高齢者・障害者等配慮設計指針 — 情報通信における機器，ソフトウェア及びサービス — 第3部：ウェブコンテンツ |
| 発行 | 2016年 |
| ベース | WCAG 2.0（ISO/IEC 40500:2012）と同一内容 |
| 適合レベル | A / AA / AAA の3段階 |
| 官公庁の目標 | レベルAA準拠 |
日本の官公庁サイトではレベルAA準拠が求められます。これはWCAG 2.0のレベルAAと同じ内容です。
WCAG 2.2（国際基準・最新版）
| 項目 | 内容 |
|---|---|
| 発行 | 2023年10月（W3C勧告） |
| 前バージョン | WCAG 2.1（2018年） |
| 新規追加 | 9つの達成基準を追加 |
| 削除 | 1つの達成基準を削除（4.1.1 構文解析） |
| 適合レベル | A / AA / AAA の3段階 |
WCAG 2.2はWCAG 2.0/2.1の上位互換です。WCAG 2.2に対応すれば、JIS X 8341-3（WCAG 2.0ベース）も自動的にクリアできます。
これからアクセシビリティに取り組むなら、WCAG 2.2のレベルAAを目標にするのが現実的です。
WCAG 2.2の4原則と具体例
WCAG 2.2は「4つの原則」に基づいて構成されています。
原則1: 知覚可能（Perceivable）
情報やUIコンポーネントを、ユーザーが知覚できる方法で提示すること。
| やるべきこと | 具体例 |
|---|---|
| 画像に代替テキスト（alt属性）をつける | <img src="..." alt="会社の外観写真"> |
| 動画に字幕をつける | 聴覚に障がいのある方も内容を把握できる |
| 色だけで情報を伝えない | 「赤いボタンを押してください」→NG。ラベルやアイコンも併用する |
| テキストと背景のコントラスト比を確保 | 最低4.5:1（通常テキスト）、3:1（大きなテキスト） |
原則2: 操作可能（Operable）
UIコンポーネントやナビゲーションを操作できること。
| やるべきこと | 具体例 |
|---|---|
| キーボードだけで全機能を操作可能にする | Tabキーでリンクやボタンに移動、Enterで実行できる |
| フォーカスインジケーターを表示する | 今どの要素を選択しているかが視覚的にわかる（WCAG 2.2で強化） |
| タッチターゲットを十分な大きさにする | 最低24×24 CSS px（WCAG 2.2で新規追加） |
| ドラッグ操作の代替手段を用意する | スライダーは数値入力でも操作可能にする（WCAG 2.2で新規追加） |
原則3: 理解可能（Understandable）
情報やUIの操作方法が理解できること。
| やるべきこと | 具体例 |
|---|---|
| ページの言語を指定する | <html lang="ja"> |
| フォームにエラーメッセージを表示する | 「入力内容に誤りがあります」だけでなく、どの項目がどう間違っているかを明示 |
| 一貫したナビゲーション | 全ページで同じ位置にメニューを配置する |
原則4: 堅牢（Robust）
さまざまなブラウザや支援技術で正しく解釈できること。
| やるべきこと | 具体例 |
|---|---|
| 正しいHTMLマークアップ | 見出しは<h1>〜<h6>、リストは<ul><li>を使う |
| WAI-ARIAの適切な使用 | カスタムUIにはrole属性やaria-label属性を設定する |
| セマンティックHTML | <nav>, <main>, <footer>などのランドマーク要素を使う |
官公庁案件で求められるアクセシビリティ
官公庁や自治体のWeb制作案件では、以下が求められるケースが多いです。
仕様書に書かれる典型的な要件
- JIS X 8341-3:2016 レベルAA準拠（またはそれに相当する対応）
- アクセシビリティ方針の策定・公開
- 試験（検証）の実施と結果の公開
- WCAG 2.1以上への対応（最近の案件では2.2を参照するケースも増加）
プロポーザルで差がつくポイント
- アクセシビリティの知識があること自体が差別化になる（対応できない制作会社が多い）
- チェックツールの活用経験 — Lighthouse、axe DevTools、WAVE などの使用実績
- 具体的な対応方針の提示 — 「WCAG 2.2レベルAAを目標に、以下の項目を対応します」と明記
- 試験方法の説明 — 開発中のセルフチェック＋納品前の第三者検証のプロセスを示す
「アクセシビリティに対応できます」と言えるだけで、競合と差がつくのが現状です。
中小企業が最低限やるべき10のチェックリスト
「何から手をつければいいかわからない」という方のために、今日からできるチェックリストをまとめました。
基本（これだけでも大きな改善）
- 1. すべての画像にalt属性を設定している
- 装飾画像は
alt=""（空）でOK。内容を伝える画像には説明を書く - 2. 見出しタグ（h1〜h6）を正しい階層で使っている
- h1→h3のように飛ばさない。見た目のサイズ調整はCSSで行う
- 3. リンクテキストが「こちら」「詳しくはこちら」だけになっていない
- 「料金プランの詳細はこちら」→「料金プランの詳細を見る」
- 4. テキストと背景色のコントラスト比が4.5:1以上ある
- WebAIM Contrast Checker で確認できる
- 5. フォームの各入力欄にラベル（
<label>）が紐づいている
操作性
- 6. Tabキーですべてのリンク・ボタン・フォームに移動できる
- 実際にキーボードだけでサイトを操作してみる
- 7. フォーカスが当たっている要素が視覚的にわかる
outline: noneで消していないか確認（CSSでよくある問題）- 8. ボタン・リンクのタッチ領域が十分な大きさ（24×24px以上）
構造
- 9. HTMLの
lang属性が設定されている <html lang="ja">- 10. ページタイトル（
<title>）が各ページで固有になっている - 全ページ「ホーム」ではなく、「料金プラン | 会社名」のように設定
完璧を目指す必要はありません。上記の10項目に対応するだけで、多くのユーザーにとってサイトの使いやすさが大幅に向上します。
アクセシビリティ対応はSEOにも効く
実は、アクセシビリティの改善はSEO（検索順位の向上）にも直結します。
| アクセシビリティ対応 | SEOへの効果 |
|---|---|
| 画像のalt属性 | Googleがページ内容を正確に理解できる |
| 正しい見出し構造 | ページの主題と構成が検索エンジンに伝わる |
| セマンティックHTML | クローラーがコンテンツの意味を解釈しやすくなる |
| ページタイトルの最適化 | 検索結果に表示されるタイトルが改善される |
| コントラスト比の確保 | Core Web Vitalsの「ユーザー体験」に好影響 |
| モバイル対応・タッチターゲット | モバイルフレンドリー評価の向上 |
「アクセシビリティのために対応する」のではなく、「やって当然の品質基準」として捉えることで、結果的にSEOも改善されます。
よくある誤解
「障がい者向けの特別な対応でしょ？」
違います。アクセシビリティはすべてのユーザーの使いやすさを向上させます。高齢者、スマホユーザー、一時的にケガをしている方、通信環境が悪い方など、恩恵を受ける人は多いです。
「対応すると莫大なコストがかかるのでは？」
新規制作時にアクセシビリティを考慮すれば、追加コストはほとんどかかりません。問題になるのは「後から直す」場合です。最初から正しいHTMLを書き、基本的なルールを守るだけで、多くの基準をクリアできます。
「うちは小さい会社だから関係ない」
ホームページを持っている時点で関係があります。特に、官公庁案件への参入を考えている企業や、高齢者をターゲットにしている企業にとっては、ビジネスの成否に直結するテーマです。
「100%完璧に対応しないと意味がない」
そんなことはありません。WCAG 2.2のレベルAAAを完全に満たしているサイトはほとんど存在しません。レベルAAの基準を目標に、できるところから少しずつ改善していくのが現実的なアプローチです。
まとめ
ウェブアクセシビリティは、「やった方がいい」から「やらなければならない」へと変わりつつあります。
| ポイント | 内容 |
|---|---|
| 基準 | WCAG 2.2 レベルAAを目標にする（JIS X 8341-3も自動的にカバー） |
| 法制度 | 2024年4月から民間企業にも合理的配慮が義務化 |
| 官公庁 | アクセシビリティ対応は入札・プロポーザルの前提条件 |
| SEO | アクセシビリティ改善はSEO改善に直結 |
| 対応方法 | まずは10のチェックリストから。完璧でなくてもOK |
ホームページは、あなたの会社の「顔」です。その顔が、一部の人にしか見えない状態になっていませんか？
アクセシビリティに配慮したサイトは、より多くの人に届き、より多くの信頼を得られます。
First CH合同会社では、アクセシビリティに配慮したWeb制作を行っています。新規制作はもちろん、既存サイトのアクセシビリティ改善もご相談いただけます。
「うちのサイト、大丈夫かな？」と思った方は、お気軽にお問い合わせください。
