突然ですが、とあるWebサイトのキャプチャとなる以下の画像をご覧ください。
この画像には、2024年4月1日から施行された障害者差別解消法改正の趣旨に照らして、配慮が不十分とみなされる部分があります。

ウェブアクセシビリティ(Web Accessibility)とは、利用者の障がいなどの有無やその度合い、年齢や利用環境にかかわらず、あらゆる人々がWebサイトで提供されている情報やサービスを利用できること、またその到達度を意味します。法改正により、特に公共機関では一定の基準を満たすことが義務となっており、民間事業者に対しても対応が強く推奨されています。

2025年の達成期限まであと少し

海外では、アクセシビリティに対応していない企業サイトが訴訟対象となり、敗訴した事例も報道されています。日本でも、デジタル庁が「誰一人取り残さない、人に優しいデジタル化」の実現を目指し、公共機関に対して2025年3月末までの対応を推奨しています。今後、バリアフリーやユニバーサルデザインと同様に、ウェブアクセシビリティも当たり前の考え方として普及していくでしょう。

ウェブアクセシビリティに関する国際的な基準は、2023年10月にW3C勧告となった「WCAG 2.2（Web Content Accessibility Guidelines 2.2）」です。このガイドラインでは、情報の知覚・操作・理解・堅牢性の4原則に基づいて、多数の達成基準が定められています。

また、日本国内では「JIS X 8341-3:2016」が準拠規格として位置づけられています。今後はWCAG 2.2を基にした改訂も予定されています。

「非干渉」を満たす4つの必須条件

これらは、達成しないと利用者に重大な影響を及ぼすため、特に優先すべき項目です。

音声の自動再生を避ける

3秒以上の音声自動再生は不可。ミュート・停止ボタンの設置が必須。

キーボード操作に対応する

参考：WCAG 2.2達成基準：［ 2.1.2｜キーボードトラップなし ］

点滅・閃光を避ける

1秒間に3回を超える点滅は禁止。特に赤色閃光は注意。

一時停止・停止・非表示の機能の提供

自動スライドなどは、停止・一時停止ボタンが必要。

次に優先対応すべき12の必須条件

非干渉の次に優先して対応すべき必須条件については以下の通りです。

画像に代替テキスト（alt属性）を設定する

ロゴ、写真、イラスト、図表などの意味があるものであれば、要約は簡潔にし、画面読み上げの流れを妨げないよう配慮します。目安として80字以内が一般的です。
意味がなければ、alt=""とします。画像がリンクの場合は代替テキストがリンク先を示す内容とします。

参考：WCAG 2.2達成基準 ：［ 1.1.1｜非テキストコンテンツ ］

キーボード操作のみですべての機能にアクセスできる

Tabキーなどで選択でき、フォーカス・入力時に勝手に動作するなどの妨げがないようにする。

操作に時間制限を設けない

閲覧や入力の操作においては時間制限を設けないようにします。また、時間制限を設ける必要のある場合は、利用者が延長、一時停止などを選択できるようにします。

色や位置だけで情報を伝えてはいけない

赤字や、右図、丸いボタンなどで表現しない。必須や注意などの言葉で伝わる表現を用いる。

スクリーンリーダーで意味が通る構造にする

言葉の間に空白行があると、例えば「日時」であればスクリーンリーダーでは「ひ、とき」と誤読してしまいます。また、「同意する」ボタンの前に同意事項が読み上げられないと、何の同意か判断しづらいです。余計なスペース、意味のある順序でサイト構成をします。

見出しは内容を表現しているものにする

例えば見出しが「リスト」「項目」だけでは内容がわかりません。「AWSサービス検討リスト」など内容がわかるものにすることと、長文の場合は内容を推測できる見出しがあればスクリーンリーダーで読み飛ばしができ、概要理解に役立ちます。その他、見出し要素は強調のためには使用しません。

文字と背景のコントラスト比を十分に保つ

文字色とその背景色のコントラスト比は4.5:1以上、太字18ポイント以上もしくは太字でなければ22ポイント以上 の大きいテキストでは3:1以上のコントラスト比が必要です。

テキストのサイズ変更をしても文字を読み取ることができる

ブラウザ上で、文字を拡大した時に文字が重なったり見切れたりしないように注意が必要です。また、拡大縮小を制限する要素のHTMLタグである「user-scalable=no」は使用しません。

ページタイトルはページ内容を明確に反映する

「ページのタイトル｜サイト名」とすることを推奨します。ページタイトルとそのページの主要見出し（H1タグ）が一致していると、使用者が安心して使用できます。

リンクを適切に表現する

リンクがどこへのリンクなのか、単体で、または前後の文脈から容易に理解できるようにします。

ナビゲーション要素に一貫性をもたせる

ページによって検索窓などのナビゲーション位置が異なると、ページ切り替えの都度探さなくてはいけなくなりますので、一貫性を持たせた配置にします。

同じ機能には同じラベル名称や説明を提供する

同じ機能を複数ページで提供する場合は、ボタン要素などのコンポーネント、アイコン、リンクなどに一貫性を持たせ、同じラベル、同様の使用法で提供されるようにします。

参考：WCAG 2.2達成基準：［3.2.4｜一貫した識別］

ここまでが必須条件です。かなり長くなってしまいましたが、以上が概要です。ウェブアクセシビリティの道も一歩から。これからのサイト制作の際に活用していただけると嬉しいです。

それでは、これまでの流れを踏まえて、冒頭のクイズの答え合わせをしてみましょう。

答えは

1.  登録用フォームの文字色と背景色のコントラスト比が2.86：1で見えづらいので不適切
2. 枠という形のみで場所を指定しているので視覚に頼りすぎて不適切
3. 名前、住所という言葉の間に余計なスペースがあり、スクリーンリーダーで読み取りづらいので不適切
4. ※(こめじるし)のみによる必須項目の指定は不適切
5. 順番に読み進めていくと「同意する」項目の内容の説明が後にあるため、わかりづらく不適切
6. こちらのリンクが何を指すかわからないため不適切

でした。
本記事ではWCAG 2.2のうち、特に重要な基準を中心に紹介しています。

他人事ではないウェブアクセシビリティ

義務というと負担に感じられるかもしれませんが、少しの配慮と工夫で誰にとっても優しいWebサイトをつくることができます。そして、将来の自分自身が恩恵を受ける立場になるかもしれないことを考えれば、その価値はより身近に感じられるはずです。

出典