Webフロントエンド - 基礎

アクセシビリティあくせしびりてぃ

ウェブアクセシビリティWCAGWAI-ARIAユニバーサルデザインスクリーンリーダーバリアフリー

アクセシビリティについて教えて

簡単に言うとこんな感じ！

「誰でも使えるWebサイト・アプリ」を作るための考え方だよ！目が見えない人・耳が聞こえない人・手が不自由な人でも、ちゃんと情報にたどり着けるように設計するってこと。バリアフリーのデジタル版だね！

アクセシビリティとは

アクセシビリティ（Accessibility）とは、「誰もが情報やサービスに支障なくアクセスできること」を指します。IT・Web分野では特に、身体的・認知的な障害を持つ人を含むすべてのユーザーが、Webサイトやアプリを問題なく利用できるかどうかを意味します。英語の省略形として「a11y（エーイレブンワイ）」と書くこともあります（aとyの間に11文字あるため）。

実務でよく出てくる場面は、Webサイトのリニューアルや新規システム発注のタイミングです。「色だけで情報を伝えていないか」「画像に代替テキストがあるか」「キーボードだけで操作できるか」といった観点が、アクセシビリティ対応の具体的なチェックポイントになります。日本では2024年の改正障害者差別解消法により、民間事業者にも合理的配慮の提供が義務化されたことで、Webアクセシビリティへの注目が一気に高まりました。

アクセシビリティは障害のある人のためだけではありません。スマホを片手で操作するシーン、強い日差しの下でスクリーンを見るシーン、日本語が母国語でないユーザーなど、あらゆる「使いにくさ」を減らすことで、すべてのユーザー体験が向上します。これを「カーブカット効果」と呼びます（歩道の段差をなくすと、車椅子の人だけでなく荷物カートや自転車の人も助かる、というたとえから）。

アクセシビリティの4大原則（POUR原則）

Webアクセシビリティの国際標準であるWCAG（ウェブコンテンツアクセシビリティガイドライン）は、4つの原則「POUR」に基づいています。

原則	英語	意味	具体例
知覚可能	Perceivable	すべての情報を何らかの形で知覚できる	画像に代替テキスト（alt属性）を付ける
操作可能	Operable	すべての機能をさまざまな手段で操作できる	キーボードだけでメニューを操作できる
理解可能	Understandable	コンテンツと操作方法が理解できる	エラーメッセージを分かりやすい言葉で表示する
堅牢性	Robust	支援技術を含む多様な環境で正しく動作する	スクリーンリーダーで読み上げられる構造にする

覚え方：「ポウル（POUR）」で覚えよう！

Perceivable・Operable・Understandable・Robust の頭文字を並べると「POUR（注ぐ）」になります。「すべての人に情報を注ぎ届ける」とイメージすると覚えやすいですよ。

WCAGの適合レベル（A / AA / AAA）

レベル	難易度	目安
A（最低限）	低	絶対に対応すべき基本事項
AA（推奨）	中	日本の公共機関・多くの企業が目標とするレベル
AAA（最高）	高	達成困難な項目も含む。全ページ対応は現実的でない

日本のJIS規格（JIS X 8341-3）や政府のガイドラインでは、WCAGレベルAA相当への準拠を求めています。

歴史と背景

1990年 — 米国でADA（障害を持つアメリカ人法）が制定。デジタル空間のバリアフリーも議論の対象に
1994年 — W3C（World Wide Web Consortium）設立。Webの標準化が始まる
1997年 — W3C内にWAI（Web Accessibility Initiative）が発足。Webアクセシビリティの標準化を担う組織
1999年 — WCAG 1.0が勧告。14のガイドラインを定義
2008年 — WCAG 2.0が勧告。POUR原則を導入し、技術非依存の記述に刷新
2018年 — WCAG 2.1が勧告。モバイルや認知障害への対応項目を追加
2023年 — WCAG 2.2が勧告。さらに13の達成基準を追加
2024年 — 日本の改正障害者差別解消法が施行。民間事業者にも合理的配慮の提供が義務化され、Webアクセシビリティ対応が急加速

主な対応技術と手法の比較

アクセシビリティを実現するための技術・仕組みを整理します。

セマンティックHTMLとは

HTMLには「意味（セマンティクス）」を持つタグがあります。たとえば <button> はボタンであることをブラウザや支援技術に伝えますが、<div> をボタンに見せかけても機能だけでは意味が伝わりません。正しいタグを正しい目的で使うことがアクセシビリティの第一歩です。

WAI-ARIAとは

WAI-ARIA（Web Accessibility Initiative – Accessible Rich Internet Applications）は、JavaScriptで動的に作られたUI部品（タブ、ドロップダウン、モーダルなど）の状態や役割をスクリーンリーダーに伝えるための属性セットです。「HTMLだけでは表現しきれない意味を補う拡張仕様」と理解しておけば十分です。

よくある対応漏れチェックリスト

確認項目	NG例	OK例
画像の代替テキスト	`<img src="logo.png">`	`<img src="logo.png" alt="会社ロゴ">`
色だけで情報を伝えない	赤字だけでエラー表示	赤字＋「エラー」テキスト
コントラスト比	薄いグレー文字	4.5:1以上（AA基準）
キーボード操作	マウスのみで動くメニュー	Tabキーで全操作可能
動画の字幕	字幕なし動画	クローズドキャプション付き
フォームのラベル	`<input placeholder="名前">`	`<label>名前<input></label>`

規格番号	内容
WCAG 2.2	W3C勧告。Webコンテンツアクセシビリティガイドラインの最新版（2023年）
WAI-ARIA 1.2	W3C勧告。アクセシブルなリッチインターネットアプリケーション仕様
JIS X 8341-3	日本産業規格。高齢者・障害者等配慮設計指針（WCAG 2.1に対応）
Section 508	米国リハビリテーション法508条。米国連邦政府機関のICTアクセシビリティ要件