Webアクセシビリティの基本｜すべての人が使えるサイト作りの第一歩

「アクセシビリティ」という言葉を耳にしたことはあるでしょうか。Webアクセシビリティとは、障害の有無に関わらず、すべての人がWebサイトを利用できるようにする設計の考え方です。日本でも2024年のJIS X 8341-3改正を機に、公共機関・企業サイトへの対応要求が高まっています。

Webアクセシビリティとは

対象となるユーザー

Webアクセシビリティが改善されることで恩恵を受けるユーザーには、以下のような方々が含まれます：

• 視覚障害：全盲・弱視・色覚多様性（色盲・色弱）
• 聴覚障害：難聴・聾
• 運動障害：手の震えや麻痺でマウス操作が困難
• 認知障害：読字障害（ディスレクシア）・学習障害・高齢者

なぜアクセシビリティが重要か

• 日本の障害者人口は約960万人（2023年内閣府データ）
• 高齢化社会により、見づらさ・操作しづらさを感じる人は増加傾向
• アクセシブルなサイトはSEO（検索エンジン最適化）にも有利
• 法令対応：障害者差別解消法の改正（2024年施行）で民間事業者も「合理的配慮」が義務化

アクセシビリティチェックHTMLのWCAG準拠状況を自動診断

WCAGの4原則（POUR）

Web Content Accessibility Guidelines（WCAG）はW3Cが策定したWebアクセシビリティの国際標準です。4つの原則（POUR）に基づいています。

P – Perceivable（知覚可能）

情報とUIコンポーネントは、ユーザーが知覚できる方法で提示する必要があります。

主な実践ポイント：

• 画像に代替テキスト（alt属性）を設定する
• 動画に字幕・音声解説を付ける
• 色だけで情報を伝えない（例：エラー表示は「赤」だけでなく「×」アイコンも）
• テキストと背景のコントラスト比を4.5:1以上にする（WCAG AA基準）

O – Operable（操作可能）

UIコンポーネントとナビゲーションは操作可能でなければなりません。

主な実践ポイント：

• すべての機能をキーボードだけで操作できるようにする
• フォームやボタンにフォーカスインジケーター（フォーカスリング）を表示する
• 動く・点滅するコンテンツには停止・一時停止ボタンを付ける
• リンクテキストは「こちら」でなく「〇〇のページへ」のように内容を説明する

U – Understandable（理解可能）

情報とUIの操作は理解可能でなければなりません。

主な実践ポイント：

• ページの言語をHTMLのlang属性で指定する
• エラーメッセージは具体的に（「入力値が無効です」より「メールアドレスの形式で入力してください」）
• フォームのラベルを明示する

R – Robust（堅牢）

コンテンツは様々なユーザーエージェント（ブラウザ・スクリーンリーダー）で解釈できるように堅牢である必要があります。

主な実践ポイント：

• セマンティックなHTMLを使用する（<button>を<div>で代用しない）
• ARIA属性を適切に使用する
• HTMLのバリデーションエラーを修正する

アクセシビリティチェックHTMLのWCAG準拠状況を自動診断

すぐに実践できる改善チェックリスト

画像・メディア

• すべての意味のある画像にalt属性がある
• 装飾目的の画像にはalt=""が設定されている
• 動画に字幕がある

テキスト・色

• テキストと背景のコントラスト比が4.5:1以上
• フォントサイズが最低でも16px
• 色だけで情報を伝えていない

操作性

• Tabキーだけでページ全体を操作できる
• フォーカスが視覚的に分かる（フォーカスリング非表示にしていない）
• リンクテキストが内容を説明している

コード

• ページにlang属性がある
• フォームにラベルが設定されている
• 見出しが階層的に使用されている（h1→h2→h3）

よくある質問

Q: WCAGのレベルA・AA・AAAの違いは何ですか？ A: レベルが上がるほど要求水準が高くなります。一般的な商用サイトはAA（レベルA+AA）への適合が目標となります。AAAは専門機関や政府サイトなど、より高いアクセシビリティが要求される場合に使用されます。日本のJIS X 8341-3はWCAG 2.1に対応しています。

Q: アクセシビリティ対応にどのくらいの費用・時間がかかりますか？ A: 新規サイトであれば開発時から取り組むことで追加コストは最小限です。既存サイトの改修では、まず自動チェックツールで検出される問題から対応することをおすすめします。重大な問題（色コントラスト・alt属性・キーボード操作）から順に対応することが効率的です。

Q: スクリーンリーダーでのテストはどうすれば良いですか？ A: macOSには「VoiceOver」（無料・標準搭載）、Windowsには「NVDA」（無料）・「JAWS」（有料）などがあります。まずはVoiceOverやNVDAでサイトを読み上げながら操作し、コンテンツが適切に伝わるか確認することをおすすめします。

まとめ

Webアクセシビリティは「特定の人向けの特別対応」ではなく、より多くの人が使いやすいサイトを作るための普遍的な設計原則です。まずはアクセシビリティチェッカーで現在のサイトの状態を確認し、コントラスト・alt属性・キーボード操作性の3点から改善を始めましょう。