2024年4月に障害者差別解消法が施行され、国や地方公共団体だけでなく、民間事業者にも合理的配慮の提供が義務化されました。これにより、企業や団体は、あらゆるサービスで、障害のある利用者に対してアクセスしやすい環境を整える責任を負うこととなりました。

特にウェブサイトにおいては、JIS X 8341-3:2016に準拠したウェブサイトを作り、ウェブアクセシビリティを確保することがこれに当たります。また、ウェブアクセシビリティは、単なる法令遵守の問題ではなく、より多くのユーザーにとって使いやすいサイトを提供し、信頼性を高める重要な要素でもあります。
そこで今回は、ウェブアクセシビリティについて、基本をわかりやすくご紹介します。

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

ウェブアクセシビリティとは、障害の有無にかかわらず、すべてのユーザーがウェブサイトを利用できる状態を指します。具体的には、視覚や聴覚に障害がある人、あるいは高齢者など、多様なユーザーが情報にアクセスしやすくするための工夫が求められます。アクセシビリティを確保することで、全ての利用者が快適にウェブサイトを利用できるだけでなく、SEOの向上やユーザーエンゲージメントの強化にもつながります。

法改正が求める合理的配慮の提供

「合理的配慮」とは、障害のある人が他の人と同じようにウェブサイトを利用できるよう、技術的や操作面での改善を行うことを指します。例えば、視覚障害者のためにスクリーンリーダーが読みやすい構造にする、代替テキストを画像に付ける、キーボードだけで操作できるナビゲーションを提供するなどが挙げられます。法改正により、これらの配慮が義務化され、対応の重要性がさらに増しています。

ウェブアクセシビリティの基本的なチェックポイント

ウェブサイトをアクセシブルにするためには、いくつかの基本的なチェックポイントを押さえる必要があります。それぞれのポイントはユーザーが使いやすいウェブサイト作りに直結します。以下、詳しく解説します。

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

• フォントサイズ: テキストは読みやすいサイズで提供しましょう。最低でも16px以上のサイズが推奨され、多くのユーザーが快適に読めるよう調整します。さらに、ユーザーがブラウザの設定でフォントサイズを自由に変更できるようにすることが大切です。
• 色のコントラスト: 背景色と文字の色のコントラストは十分に高く保つ必要があります。視覚障害や色覚異常のあるユーザーにとって、適切なコントラストは情報を読み取る上で重要です。
• 読みやすさ: 長い文章は適切に段落を分け、見出しや箇条書きを使って視覚的に整理されたコンテンツにします。特に難しい言葉や専門用語を避け、平易な表現を使うことが望ましいです。

画像・動画のアクセシビリティ

• 代替テキスト（alt text）: 画像には必ず適切な代替テキストを付けましょう。視覚に障害があるユーザーはスクリーンリーダーを使ってこのテキストを読み上げます。画像の内容や目的を簡潔かつ具体的に説明することが重要です。
• 動画の字幕と音声説明: 聴覚障害のあるユーザーには、動画に字幕を付けることが必須です。また、視覚障害者向けには、映像の内容を説明する「音声ガイド」やテキスト版の説明を提供することも効果的です。
• 画像の意味合い: 装飾目的の画像には代替テキストを付けず、空白の「alt=””」を使用することで、スクリーンリーダーが無視できるようにするのも重要な配慮です。

ナビゲーションのアクセシビリティ

• キーボード操作: 一部のユーザーはマウスを使わずにキーボードだけで操作するため、全ての機能がキーボードでアクセス可能である必要があります。タブキーを使って重要なリンクやボタンに簡単に移動できるか確認しましょう。
• リンクとボタンの識別: リンクやボタンは視覚的に認識しやすいデザインにしましょう。リンクは通常のテキストと区別できるよう、色やスタイル（下線など）を明確に分けることが重要です。また、リンクテキストには「こちらをクリック」ではなく、リンク先の内容を具体的に説明する言葉を使うのが望ましいです。
• 見やすいメニュー: サイトのメニューは簡単にアクセスでき、階層が深くなりすぎないように注意します。ハンバーガーメニューやドロップダウンメニューは、キーボード操作やスクリーンリーダーに対応させる工夫が必要です。

フォームのアクセシビリティ

• ラベルの使用: フォーム内の入力フィールドには必ずラベルを付けてください。ラベルはフィールドの用途を明確にし、スクリーンリーダーで正確に読み上げられるようにします。例えば、名前入力欄には「名前」というラベルを見やすく表示します。
• エラーメッセージの視覚的補助: 入力エラーが発生した場合、エラー内容を明確に表示し、視覚障害者にもわかりやすく伝える必要があります。赤字のエラーメッセージだけでなく、アイコンや文書でエラーの理由を説明すると良いでしょう。
• フィールドの順序とタブ順序: フォーム内のフィールドは論理的な順序で配置し、キーボードでタブキーを使った際に自然な流れで移動できるようにします。

拡大・縮小とレスポンシブ対応

現代のウェブブラウザやスマートフォン、PCには、ユーザーが自由に文字サイズを変更したり、コントラストや色合いを調整したりするための機能が標準で備わっています。たとえば、ユーザーはブラウザのズーム機能やOSのアクセシビリティ設定を使って、自分に適した表示設定に変更できます。
現在のウェブアクセシビリティガイドラインでは、ユーザーがブラウザのズーム機能を使ってテキストを200%まで拡大しても、レイアウトが壊れないようにすることが推奨されています。

これらのアクセシビリティ対応は、障害のある方だけでなく、すべての人にとって使いやすい環境を提供するもので、それにより、サイト利用者・サイトの目的となるお問い合わせなどの増加、SEOの改善などの効果も期待できます。
※「政府広報オンラインのウェブアクセシビリティに関する記事」も参考としてご覧ください。

アクセシビリティに対応するには？

自社サイトのアクセシビリティをチェックするには、総務省が提供している「miChecker」など、各種無料ツールを利用できます。それらのツールを使用してサイトに重大な問題があった際には、年間600サイト以上の制作に携わっている私たちル・プロジェがお手伝いすることも可能です。

サイトのコンサルティングやサイト改修、サイトリニューアルまで、御社のご要望に合わせて様々なサポートができますので、お気軽にご相談ください。

社内150名のクリエイターを擁する弊社がワンストップで対応

弊社ル・プロジェは、社内に約150名のデザイナーを擁し、企業ホームページ・採用サイトの構築から、会社案内・採用ツールの制作、看板やサイネージの制作、キャンペーン・セミナー・イベントなど、4,000社近くの企業様との様々な実績があります。

企業・採用サイトの構築・リニューアルや採用ツールの制作、そして、それを元にした会社案内パンフや、セールスシート、セールスカタログ、各種商材・チラシなど、デジタルから紙までワンストップで対応可能ですのでお気軽にご相談ください。社内稟議を取るために概算見積・資料が必要などといった初期段階からサポートいたします。