Webアクセシビリティ完全ガイド：誰もが使えるWebサイトの技術標準

1 はじめに

Webアクセシビリティ (Web Accessibility) とは、一言で言えば「高齢者や障害者を含むすべての人が、どのような環境でもWebの情報にアクセスし、利用できるようにすること」です。

これは「特定の人のための特別な対応」ではありません。「マウスが壊れた時」「屋外で画面が見づらい時」「通信が遅い時」など、あらゆるユーザーの不便を解消するユニバーサルな品質基準です。現在、法的要件（障害者差別解消法の改正など）への対応だけでなく、SEO（検索順位）の向上や、AI（マシンリーダブルな構造）への対応としても重要視されています。

2 ビギナー向け・ドキュメント

概要：歩道の「段差解消」と同じ

アクセシビリティを街づくりに例えてみましょう。歩道の段差をスロープにする（バリアフリー化）ことは、車椅子の人だけでなく、ベビーカーを押す人、重いスーツケースを持つ旅行者、台車を押す配達員にとっても便利です。 Webにおいても同様で、「マシン（スクリーンリーダーや検索エンジン）が理解しやすいコード」を書くことは、結果としてすべての人間にとって使いやすいサイトにつながります。

公式情報・ガイドライン

Webアクセシビリティには世界共通の明確な「規格」があります。 * W3C (WCAG): Web Content Accessibility Guidelines (WCAG) 2.1 / 2.2 - 世界標準のガイドライン。 * デジタル庁: ウェブアクセシビリティ導入ガイドブック - 日本の行政や企業向けに非常に分かりやすくまとめられた資料。 * MDN Web Docs: アクセシビリティ - 技術的な実装詳細。

導入：セマンティックなHTMLの実装

アクセシビリティの基本は、「見た目だけで判断させない」ことです。例えば、単なる <div> にクリックイベントをつけるのではなく、適切なタグ<button>を使うだけで、キーボード操作や読み上げ機能に自動対応できます。

<div onclick="submitForm()" class="btn">送信</div>
<button type="submit" class="btn">送信</button>

3 会話集

現場でアクセシビリティ対応を進める際によくあるQ&Aです。

Scene 1: 対応コストへの懸念

PM: 「アクセシビリティ対応って、工数が倍になるイメージがあるんだけど…」

エンジニア: 「後から修正すると大変ですが、初期段階で正しいHTMLを書けば、工数はほとんど変わりません。むしろ、セマンティックなコードは保守性が高く、バグも減るので、長期的にはコスト削減になりますよ。」

Scene 2: ターゲットユーザーの誤解

デザイナー: 「うちのターゲットは若者なので、高齢者対応は優先度低くないですか？」

ディレクター: 「アクセシビリティは『状況的障害』もカバーします。例えば、満員電車で片手しか使えない時、動画を音無しで見たい時（字幕）、屋外で画面が暗くて見えにくい時（コントラスト）。若者にとっても使いやすさに直結します。」

Scene 3: 自動チェックツールの限界

新人: 「Lighthouseのアクセシビリティスコアが100点になったので、完璧ですね！」

シニア: 「油断禁物だね。自動ツールはエラーの3〜5割しか検出できないと言われているよ。『画像にaltがあるか』はチェックできても、『その説明文が適切か』は人間が判断しないといけないからね。」

4 より深く理解する為に

アクセシビリティを支える技術的概念と、陥りやすい罠について解説します。

4つの原則 (POUR)

WCAGは以下の4つの原則に基づいて設計されています。 1. 知覚可能 (Perceivable): 情報が見える、聞こえる。（例：画像への代替テキスト、動画の字幕、十分なコントラスト比） 2. 操作可能 (Operable): マウスなしでもキーボードだけで全ての操作ができる。（例：フォーカスインジケーターの表示、適切なタブ順序） 3. 理解可能 (Understandable): 予測可能な動作をする。（例：入力エラーの明確な説明、一貫したナビゲーション） 4. 堅牢 (Robust): 異なる環境（ブラウザ、支援技術）でも動作する。（例：正しいHTML構文、仕様に沿ったARIAの使用）

WAI-ARIA の役割と注意点

HTMLタグだけでは表現しきれない動的なUI（タブ切り替え、モーダルウィンドウなど）の状態をスクリーンリーダーに伝えるための属性です。 * aria-expanded="true" （メニューが開いている） * aria-hidden="true" （視覚的にはあるが無視してほしい）

重要: 「ARIAの第一法則」 というものがあります。それは、「HTMLのネイティブ要素で実現できるなら、ARIAを使うな」 です。ARIAはあくまで補助輪であり、過剰な使用は逆にアクセシビリティを損なう原因になります。

よくある落とし穴：outline: none

デザイナーの要望でCSSに *:focus { outline: none; } と書いてしまうことがよくあります。これをすると、キーボードユーザーは「今どこを選択しているか」が全く見えなくなります。見た目をカスタマイズしたい場合は、消すのではなく、目立つスタイル（太い枠線や色変更）に上書きしてください。

5 関連ワード

スクリーンリーダー: 画面の文字を音声で読み上げるソフト。Windowsの「NVDA」、Mac/iPhoneの「VoiceOver」、Androidの「TalkBack」などが代表的。
セマンティックWeb: 文書構造を適切に記述すること（見出しは <h3>、リストは <ul> など）。アクセシビリティとSEOの根幹。
JIS X 8341-3: 日本産業規格におけるWebアクセシビリティの規格。内容は国際基準のWCAG 2.0/2.1と協調している。
カラーコントラスト比: 文字色と背景色の明るさの比率。WCAG AA基準では、通常の文字で「4.5:1」以上が必要。
axe DevTools: 自動チェックツールとして業界標準となっているブラウザ拡張機能。Google ChromeのLighthouse内部でも使われているエンジン。

6 要点チェック

HTMLが9割: 正しいHTMLタグ（セマンティックマークアップ）を使うだけで、アクセシビリティの大半は確保される。
キーボード操作: マウスを使わず「Tabキー」と「Enterキー」だけでサイトが使えるかテストする。
代替テキスト: 画像（<img>）には必ず alt 属性を入れる。装飾なら空（alt=""）にする。
フォーカスを消さない: ユーザーが今どこにいるかわからなくなるため、フォーカスリング（枠線）を安易に消さない。
マシンリーダブル: アクセシビリティ対応は、AIやクローラーがサイト内容を正しく理解する手助けにもなる。

アクセシビリティとは