Webrydayのやまだです。
2024年4月の法改正により、ウェブアクセシビリティが注目されるようになりました。今回の改正を踏まえ、本記事では法改正の内容、ウェブアクセシビリティの意味、その重要性、具体的な対応方法について解説します。

■ウェブアクセシビリティとは何か？

Webサイトにおいて「全ての人にとっての使いやすさ」を意味します。
障害の有無、年齢、技術的な制約に関わらず、全てのユーザーがWebサイトから情報を等しく得られる環境を提供することが理想です。視覚や手に障害がある方、高齢者など、様々な状況の人々がサイトを利用する際の困難を軽減するための対応が必要です。

ウェブアクセシビリティ向上のメリット

ウェブアクセシビリティを高めることには多くの利点があります。
以下に主なメリットを紹介します。

ウェブアクセシビリティが必要なユーザー

アクセスできない、しにくいユーザーに関して、いくつか例を紹介します。

■ウェブアクセシビリティの対応例

ウェブアクセシビリティを向上させるための対応例をいくつか紹介します。

対応例01： テキストのコントラスト比

テキストの読みやすさを向上させるためには、テキストとその背景色との間に十分なコントラスト比が必要です。色覚障害者や弱視の方がテキストをはっきりと識別できるように、最低でも4.5:1のコントラスト比を保つことが推奨されています。

比率を調べるために、コントラストチェックツールがいくつか公開されているので、デザイン制作の際に使用してみることをお勧めします。
コントラストチェッカー(https://colorbase.app/ja/tools/contrast-checker)

対応例02： 画像の代替テキスト

これは、視覚障害を持つユーザーや画像が表示されない状況でウェブを使用しているユーザーに対して、画像内容をテキストで説明するものです。

代替テキストの設定は、通常、ウェブページのコーディング時に`alt`属性として設定します。また、WordPressなどのCMSを使用している場合は、画像をアップロードする際に簡単に追加できます。

代替テキストの良い例、悪い例を紹介します。
悪い例としては、代替テキストが設定されていない場合や、多数のキーワードを羅列したものが挙げられます。

これに対し、「子犬」というシンプルな説明は、何を表しているかを適切に伝えます。これでも情報は伝わるので問題ないですが「トイプードルの子犬が熟睡しています」とできるだけ詳細を加えた方が、より親切な対応になります。

対応例03：スライドショー

自動的に切り替わるスライドショーは、情報を読むのに、一般的な人よりも長い時間が必要なユーザーや認知障害を持つユーザーにとっては、読みきれないという場合があります。

そのため、スライドショーには一時停止ボタンをつけ、ユーザーのペースで読めるようにすることが大事です。

対応例04: モーダルウィンドウ

モーダルウィンドウは多くのウェブサイトで使用されていますが、キーボードのみで操作するユーザーにとっては閉じる操作が困難になることがあります。
たとえば、キーボード操作がモーダルの背後のコンテンツに移動してしまい、閉じることができない、またはESCキーで閉じることができないなどの問題が挙げられます。
これを解決するためには、キーボード操作のみでも閉じることができるよう、ESCキーで簡単に閉じられる機能や、フォーカスの管理をコーディング時に対応することが必要です。

対応例05: フォームの必須項目

必須項目を色のみで区別すると、色覚障害を持つ方にとって、理解しづらいフォームになってしまいます。その代わりに、「必須」という言葉を明記することが推奨されています。
よく見かけるのが、赤いアスタリスク（*）を使うデザインですが、これよりも「必須」と記載した方が、その項目が必須であることを明確に伝えることができます。

■2024年4月の法改正について

2024年4月1日に施行された法改正では、障害者差別解消法という法律の一部が改訂されました。
「ウェブアクセシビリティ対応が義務化」ということを聞いた方もいるかもしれませんが実際には義務にはなっていません。どういうことなのか詳しく説明していきます。

法改正の具体的な内容

「合理的な配慮をするように努めなければならない。」が改訂され「合理的な配慮をしなければならない」という表現に変更されました。
これにより「合理的な配慮」が努力義務から義務になりました。

合理的な配慮とは？

今回義務化になった「合理的な配慮」とは、障害を持つ個人からの具体的な要望に対して、適切に対応する行動を指します。対応方法に制限はなく、電話やメールなど可能な方法で対応します。
例えば、以下のようなケースが考えられます

ウェブアクセシビリティは合理的な配慮に含まれるのか？

政府が定める障害者差別解消の基本方針によると、Webアクセシビリティ対応は「合理的な配慮」には含まれず、「環境の整備」として扱われています。

基本方針の「ウェブサイトの改良」がウェブアクセシビリティ対応に該当するため、義務化となった合理的配慮に含まれていないことになります。

ウェブアクセシビリティ対応の重要性

法的義務ではないとされても、前述したメリットでも挙げたように、SEO対策の強化やUX向上につながるため、ウェブアクセシビリティの向上は非常に重要です。

■ウェブアクセシビリティ対応の流れ

ウェブアクセシビリティの対応は、いくつかのステップを通じて進めていきます。

Step 1: 目標とするアクセシビリティ基準の設定

最初のステップは、達成すべきウェブアクセシビリティの基準と対応範囲を決めることです。基準とは、国際的なガイドラインや国内規格があるため、その中から達成する基準を選びます。
対応範囲とは、サイトのどのページに対して行うかを決めます。

ガイドラインと規格について
代表的なものに「WCAG」ガイドラインと「JIS X 8341-3:2016」という国内規格があります。

WCAG (Web Content Accessibility Guidelines)
現在、世界標準としても、日本の国内標準としても採用されている基準です。いくつかのバージョンがあり2024年4月現在WCAG 2.2が最新のものとなります。
今後WCAG 3.0の勧告が予定されています。

JIS X 8341-3:2016
日本国内でWCAG 2.0を基に作成された規格で、内容はWCAG 2.0と同じなので、同じチェックツール、同じチェック方法がそのまま使えます。
国内では、このJIS規格に準拠しているサイトが多く見られます。

WCAG3つの適合レベル
WCAGでは、3つの適合レベルが設定されています。

Step 1ではここまでで説明した「ガイドライン・規格」と「適合レベル」から目標とする基準を決め、サイトのどの範囲で行うかを決めます。
例えば以下のような具体的な目標を設定します。

Step 2: 試験実施

設定した基準に基づき、アクセシビリティ試験を行います。この試験は、設定されたアクセシビリティ基準が適切に実装されているかどうかを確認するためのもので、チェックツールや手動で一つ一つ確認します。JIS X 8341-3:2016 試験実施ガイドラインからダウンロードできる「実装チェックリスト」があるため、そのようなリストを活用するのも問題ありません。
ただし、基本的には手作業でチェックしていくことになるので、非常に時間のかかる作業となります。

試験結果は、特定のアクセシビリティ基準にどれだけ準拠しているかを示す形で記載されます。例えば、「JIS X 8341-3:2016 の適合レベルAAに準拠」という表現を使用することで、そのウェブサイトがJISの規格に基づく適合レベルAAの要件を全て満たしていることを示します。

このアクセシビリティの準拠状態は以下の3つに分類されます

Step 3: アクセシビリティ試験結果の記載と公開

試験が完了した後、その結果とstep1で決定した対応範囲と共に公開します。
多くのサイトではアクセシビリティポリシーを専用のページに記載し、それを通じて公開しています。

例)
デジタル庁(https://www.digital.go.jp/accessibility-statement)
内閣府(https://www.cao.go.jp/notice/webaccessibility.html)

■まとめ

この記事では、ウェブアクセシビリティの基本から対応例、法改正、対応の流れについて解説しました。
紹介した対応策を実施することにより、ウェブサイトはより多くのユーザーにとって使いやすくなり、様々な人が情報を平等にアクセスできるようになります。
ウェブアクセシビリティ対応は法的に義務付けられていないものの、SEOの強化やUXの向上など、多くのメリットがあるため、積極的に対応していくことをおすすめします。

Webrydayへのご依頼も、ぜひご検討ください