ウェブアクセシビリティの基本 ― すべての人のためのウェブサイト構築

世界中で10億人以上が何らかの障害を抱えて生活しています。これは世界人口の約15％にあたります。視覚障害のある方、聴覚障害のある方、運動機能に制限のある方、認知面での違いがある方、また骨折やめまいといった一時的な状態の方も含まれます。

こうした現実を考慮せずにウェブサイトを構築することは、単に不便を生むだけではありません。他の人が当然のように利用できる情報やサービス、機会から、人々を締め出してしまうことを意味します。アクセシビリティは付加機能ではなく、責任です。

ウェブアクセシビリティとは

ウェブアクセシビリティとは、障害のある人がウェブサイトを知覚し、理解し、ナビゲートし、操作できるようにウェブサイトを設計・開発することです。また、ウェブに貢献できることも意味します。

これはスクリーンリーダーだけの話ではありません。アクセシビリティは以下の領域を含みます：

• 視覚：全盲、弱視、色覚異常
• 聴覚：聴覚障害、難聴
• 運動機能：細かい動作の制限、振戦、麻痺
• 認知：失読症、ADHD、記憶障害、学習障害
• 一時的・状況的：手首の骨折、画面への直射日光、騒がしい環境、低速インターネット

重要なのは、アクセシブルなデザインはすべての人に恩恵をもたらすということです。字幕は騒がしい場所で役立ちます。高コントラストは明るい環境で役立ちます。キーボードナビゲーションはパワーユーザーに役立ちます。明確な文章は母国語でない人に役立ちます。アクセシビリティは特別なモードではなく、良いデザインそのものです。

WCAG 標準

**Web Content Accessibility Guidelines（WCAG）**は、W3C が発行するウェブアクセシビリティの国際標準です。現行バージョンは WCAG 2.2 で、POUR という頭字語で知られる4つの原則に基づいています：

知覚可能（Perceivable）

情報はすべてのユーザーが知覚できる方法で提示されなければなりません。

• テキスト代替：すべての画像に内容を説明する alt 属性が必要です。装飾的な画像には alt="" を使用します。
• 字幕とトランスクリプト：動画コンテンツには字幕が、音声コンテンツにはトランスクリプトが必要です。
• 適応可能な構造：スタイルを除去してもコンテンツが意味を持つようにします。視覚的なスタイリングだけでなく、セマンティック HTML（<h1>、<nav>、<main>、<article>）を使用します。
• 識別可能なコンテンツ：十分な色のコントラスト、リサイズ可能なテキスト、色だけで情報を伝えないこと。

操作可能（Operable）

ユーザーはインターフェースを操作できなければなりません。

• キーボードアクセシブル：すべてのインタラクティブ要素がキーボードだけで到達・操作できること。マウストラップを作らないこと。
• 十分な時間：コンテンツに時間制限がある場合、ユーザーが延長または無効化できること。
• 発作の防止：1秒間に3回以上点滅するコンテンツを避けること。
• ナビゲーション可能：明確なページタイトル、論理的な見出し構造、スキップナビゲーションリンク、視認可能なフォーカスインジケーター。

理解可能（Understandable）

コンテンツとインターフェースは理解できなければなりません。

• 読みやすいテキスト：ページの言語を指定する（lang 属性）。可能な限り明確でシンプルな言葉を使う。
• 予測可能な動作：ナビゲーションは一貫していること。ページが予期せずコンテキストを変更しないこと。
• 入力支援：フォームフィールドに明確なラベルを付ける。何が間違っていて、どう修正するかを説明する有用なエラーメッセージを提供する。

堅牢（Robust）

コンテンツは現在および将来の技術で動作するのに十分な堅牢性を持つ必要があります。

• 有効な HTML：支援技術が確実に解釈できる適切なセマンティックマークアップ。
• 名前、役割、値：カスタムコンポーネントはアクセシビリティ API にその目的を公開する必要があります（必要に応じて ARIA を使用）。

適合レベル

WCAG は3つのレベルを定義しています：

世界中のほとんどの法律がレベル AA の準拠を要求しています。これが目指すべきレベルです。

よくある障壁とその修正方法

画像の alt テキストの欠如

問題：スクリーンリーダーのユーザーは「画像」とだけ読み上げられるか、何も聞こえません。

修正方法：すべての情報画像に説明的な alt テキストを追加します。装飾的な画像には alt="" を使用して、スクリーンリーダーがスキップするようにします。

<!-- Good -->
<img
  src="chart.png"
  alt="Bar chart showing a 40% increase in sales from January to June 2025"
/>

<!-- Decorative -->
<img src="divider.svg" alt="" />

不十分な色のコントラスト

問題：弱視や色覚異常のある方がテキストを読めません。

修正方法：通常テキストで最低 4.5:1、大きなテキスト（18px 以上または 14px 太字）で 3:1 のコントラスト比を確保します。コントラストチェッカーツールを使って色の組み合わせを確認しましょう。

フォームラベルの欠如

問題：スクリーンリーダーのユーザーがフォームフィールドの目的を理解できません。

修正方法：すべての入力フィールドに for 属性で関連付けられた表示可能な <label> 要素が必要です。

<!-- Good -->
<label for="email">Email address</label>
<input type="email" id="email" name="email" />

<!-- Bad: placeholder is not a label -->
<input type="email" placeholder="Email address" />

キーボードナビゲーションの欠如

問題：マウスを使用できないユーザーが操作できません。

修正方法：デフォルトでキーボードアクセシブルなネイティブ HTML 要素（<button>、<a>、<select>）を使用します。カスタムコンポーネントを構築する場合、フォーカス可能でキーボードイベントに応答するようにします。代替手段を提供せずにフォーカスアウトラインを削除しないでください。

ページ構造の欠如

問題：スクリーンリーダーのユーザーが効率的にナビゲートできません。

修正方法：セマンティック HTML を使用します。ページごとに1つの <h1>、論理的な見出し階層（レベルをスキップしない）、ランドマーク（<nav>、<main>、<footer>）。

メディアの自動再生

問題：予期しない音声がスクリーンリーダーのユーザーを妨げます。自動再生動画は発作を引き起こしたり、不安を与える可能性があります。

修正方法：音声を自動再生しないでください。動画が自動再生される場合、デフォルトで音声をオフにし、一時停止コントロールを提供してください。

色だけでは不十分

情報を伝える唯一の方法として色に依存しないでください。以下を検討してください：

• エラーを示す赤い枠線のフォームフィールドには、エラーアイコンまたはテキストメッセージも必要
• 色付き線のチャートには、パターン、ラベル、または凡例も必要
• 本文中のリンクには、色の変更だけでなく、下線やその他の視覚的手がかりが必要

**男性の約8％、女性の約0.5％**が何らかの色覚異常を持っています。これを念頭に置いたデザインはエッジケースではなく、基本的なインクルーシビティです。

アクセシビリティのテスト

自動テスト

自動ツールはアクセシビリティの問題の約30〜40％を検出します。良い最初のステップですが、完全なソリューションではありません。

• axe DevTools（ブラウザ拡張機能）― ページをスキャンして WCAG 違反を報告
• Lighthouse（Chrome DevTools 内蔵）― アクセシビリティ監査を含む
• WAVE（ウェブベースツール）― 問題を示すビジュアルオーバーレイ

手動テスト

多くのアクセシビリティの問題には人間の判断が必要です：

• キーボードテスト：マウスを外して、Tab、Enter、Escape、矢印キーでサイト全体をナビゲートします。すべてに到達できますか？フォーカス順序は論理的ですか？
• スクリーンリーダーテスト：VoiceOver（Mac）、NVDA（Windows、無料）、TalkBack（Android）を試してください。読み上げられたときにコンテンツは意味が通りますか？
• ズームテスト：ブラウザを200％にズームします。レイアウトはまだ機能しますか？コンテンツが切り取られたり重なったりしていませんか？
• モーション軽減：OS 設定で「視差効果を減らす」を有効にします。アニメーションはこの設定を尊重しますか？

ユーザーテスト

最も価値あるフィードバックは、日常生活で実際に支援技術を使用している方々から得られます。予算が許す場合は、障害のあるユーザーをテストプロセスに含めてください。

アクセシビリティはチェックボックスではなく、スペクトラムです

アクセシビリティはゴールラインのある一度きりのプロジェクトではありません。継続的な実践です。ウェブサイトは変化し、コンテンツが追加され、更新のたびに新しい障壁が生まれる可能性があります。

目指すのは完璧ではありません。目指すのは継続的な改善と、あなたが構築したものを使う人々への真摯な配慮です。最もインパクトのある変更（色のコントラスト、alt テキスト、キーボードナビゲーション、フォームラベル）から始めて、そこから積み上げていきましょう。

あなたが取り除く障壁の一つ一つが、誰かに開かれる扉です。

クイックチェックリスト

• すべての画像に意味のある alt テキストがある（装飾的な場合は alt=""）
• 色のコントラストが WCAG AA を満たしている（テキスト 4.5:1、大きなテキスト 3:1）
• すべてのフォームフィールドに表示可能なラベルがある
• サイト全体がキーボードでナビゲート可能
• 見出しが論理的な階層に従っている
• フォーカスインジケーターが視認可能
• ページ言語が設定されている（<html> の lang 属性）
• 色だけで情報を伝えていない
• 動画に字幕がある
• アニメーションが prefers-reduced-motion を尊重している