Webアクセシビリティとは、年齢、障害の有無、利用する機器や周囲の環境にかかわらず、情報や機能を利用できるように設計する考え方です。
対象は障害のある人に限らず、加齢によって見え方や操作方法が変わった人、けがで一時的に片手しか使えない人、音を出せない場所にいる人にも広がります。
この記事では、Webアクセシビリティの意味、合理的配慮との関係、JISとWCAGの位置づけ、サイトを改善する手順を実務に沿って解説します。
利用を妨げる壁と改善例
Webサイトの使いにくさは、利用者の特性だけで決まるものではなく、コンテンツや操作方法との組み合わせによって生じます。
| 利用状況 | 生じやすい壁 | 主な改善例 |
|---|---|---|
| 画面が見えない、見えにくい | 画像だけで情報を示す、文字と背景の差が小さい | 画像の目的に合う代替テキスト、見分けやすい配色、論理的な見出し |
| 音声を聞けない | 動画や音声だけで内容を伝える | 字幕、文字による説明、必要に応じた代替手段 |
| マウスを使いにくい | クリックでしか操作できない、現在位置が分からない | キーボード操作、見えるフォーカス表示、自然な操作順序 |
| 内容を理解しにくい | 専門用語が多い、見出しと本文の関係が曖昧 | 平易な説明、見出しとリストによる整理、一貫した名称 |
ユニバーサルデザインは、年齢や能力を問わず使いやすい製品や環境を目指す広い考え方です。
Webアクセシビリティは、その考え方と重なりながら、Web上の情報を知覚し、操作し、理解できるかを具体的に扱います。
両者の違いを詳しく確認したい場合は、Webアクセシビリティとユニバーサルデザインの違いも参考になります。
合理的配慮と環境の整備を分けて考える
改正障害者差別解消法により、2024年4月1日から事業者による合理的配慮の提供が義務になりました。
内閣府の事業者向け案内では、障害のある人から社会的な壁を取り除いてほしいとの意思が示され、実施に伴う負担が過重でない場合に、必要かつ合理的な対応を検討する考え方が説明されています。
環境の整備は、不特定多数の利用者を想定し、情報アクセシビリティの向上などを事前に進める取り組みです。
合理的配慮と環境の整備は役割が異なりますが、利用しやすいサイトを準備しておけば、個別の相談を受けたときにも選択肢を示しやすくなります。
ただし、2024年の法改正は「すべての民間サイトが特定のJISまたはWCAG適合レベルを一律に満たさなければならない」という意味ではありません。
事業者は業種別の対応指針を確認し、利用者との対話を通じて必要な対応を検討する必要があります。
制度とサイト運用の関係は、民間企業のWebアクセシビリティ対応と合理的配慮でも整理しています。
JIS X 8341-3とWCAGの関係
JIS X 8341-3:2016は、日本でWebコンテンツのアクセシビリティを検討するときに参照される規格で、WCAG 2.0を基礎にしています。
WCAGは、W3Cが公開する国際的なガイドラインで、知覚可能、操作可能、理解可能、堅牢という四つの原則の下に達成基準を置いています。
W3CのWCAG 2.2勧告はWCAG 2.1を拡張し、タッチ操作や認知面を含む利用上の課題への基準を追加しています。
JIS X 8341-3:2016とWCAG 2.2は同じ文書ではないため、発注や改修では、どちらの何を目標にするのかを仕様書に明記します。
適合レベルはA、AA、AAAの順に積み上がり、AAへの適合にはAとAAの達成基準を満たす必要があります。
WCAG 2.2の追加項目は、WCAG 2.2で追加された達成基準の実務解説で詳しく確認できます。
実装で確認したい六つの領域
- 文書構造：ページタイトル、見出し、リストをHTMLの役割に沿って記述し、見た目だけで階層を表さない。
- 画像と動画：情報を伝える画像には目的に合う代替テキストを付け、音声を含む動画には内容を把握できる字幕や説明を用意する。
- キーボード操作：メニュー、リンク、ボタン、フォームをキーボードで操作でき、現在位置を見失わないようにする。
- 色と表示：文字と背景を見分けやすくし、エラーや状態を色だけで伝えない。
- フォーム：入力欄にラベルを関連付け、エラーの場所と直し方を文章で伝える。
- 動きのある表現：点滅や自動再生を慎重に扱い、必要に応じて停止できるようにする。
代替テキストは画像の外見を機械的に説明する欄ではなく、その画像がページ内で果たす役割を伝えるためのものです。
同じ画像でも、商品を選ぶ画面と装飾として置かれた画面では、必要な説明が変わります。
自動チェックと手動確認の役割
自動チェックツールは、HTMLの構造、代替テキストの有無、コントラストなど、機械的に判定できる問題を効率よく探すために使います。
miChecker、WAVE、UUUのWebアクセシビリティチェックなどが選択肢になりますが、利用条件や判定範囲は導入時に確認してください。
一方、代替テキストが文脈に合っているか、リンク名だけで移動先が分かるか、キーボードの移動順が自然か、字幕が内容を正確に伝えるかは、人が実際に操作して判断します。
ツールの結果を適合の保証とみなさず、手動確認と組み合わせることが必要です。
具体的な確認順序は、Webアクセシビリティチェックの進め方で解説しています。
UUUを利用するときの考え方
UUUは、表示や操作を利用者側で調整するウィジェットと、サイトの問題を自動解析するチェックツールを提供しています。
ウィジェットでは、文字サイズ、コントラスト、読み上げ、文字間隔、アニメーション停止などを利用者が選べます。
チェックツールは改善候補を把握する入口になりますが、ウィジェットの導入や自動判定だけで、元のHTMLやコンテンツにあるすべての問題が解決するわけではありません。
導入後も、見出し構造、フォーム、キーボード操作、代替テキストを点検し、必要な修正を続けます。
デジタル庁のガイドブックを実務に使う
デジタル庁は、行政官や事業者が基礎から学べるWebアクセシビリティ導入ガイドブックを公開しています。
規格の説明だけでなく、スマートフォンへの配慮、実践の進め方、調達で使う資料への入口も用意されているため、社内説明や発注準備の共通資料として活用できます。
ただし、ガイドブックは取り組みを始めるための資料であり、個別サイトの適合を自動的に示すものではありません。
公開後も続ける改善手順
- 対象を絞る：トップページ、問い合わせ、予約や申請など、利用者の目的に直結するページから確認する。
- 機械的に確認する：自動ツールで共通する問題を洗い出し、修正候補を整理する。
- 人が操作する：キーボード、画面拡大、読み上げ環境などで、目的の操作を完了できるか確かめる。
- 優先順位を決める：利用できない問題、誤解につながる問題、複数ページに共通する問題から直す。
- 再確認して記録する：修正後に同じ手順で確認し、更新時に再利用できるチェック項目として残す。
Webアクセシビリティは、公開時に一度だけ合否を付ける作業ではありません。
コンテンツや機能の追加に合わせて確認を繰り返し、利用者が目的を達成できる状態を保つ運用です。
利用できる状態を保つことが目標
Webアクセシビリティへの対応は、規格名やツールを知るだけでは完了しません。
利用上の壁を具体的に見つけ、合理的配慮と事前の環境整備を分けて考え、自動チェックと人の操作確認を組み合わせることで、改善点が明確になります。
- JISとWCAGの版や適合目標を混同しない。
- 自動ツールの結果だけで適合を判断しない。
- 利用者が目的の情報や操作に到達できるかを確かめる。
- 公開後も更新に合わせて点検を続ける。
まずは利用者の多い一つの手続きや問い合わせ経路を選び、キーボード操作と情報の伝わり方を確認するところから始められます。
この記事に関連する株式会社greedenの取り組み
アクセシビリティは、一度の修正で終えず、確認と改善を重ねることが大切です。株式会社greedenは、UUUウェブアクセシビリティサービスを通じ、表示や読み上げの補助機能とサイトのチェックを提供しています。