ウェブアクセシビリティについて

こんにちは。Webフロントエンド担当の熊野です。

「2024年4月に施行される障害者差別解消法の改正により、民間事業者もウェブアクセシビリティの配慮が義務化されます。」という情報からこの記事の作成を始めて色々調べての結論ですが、義務化されるって部分は間違いでした。
義務化されたのは、「障害のある人への合理的配慮の提供」であり、ウェブアクセシビリティの対応は義務化されていませんし、ウェブアクセシビリティの対応に関して法的な罰則等はありません。
しかしながら、障害者差別解消法が2016年4月に施行された時からあったウェブアクセシビリティの努力義務のニュアンスがより強化されています。また、海外ではウェブアクセシビリティの対応が法律で義務化されている国もあり、世界的な流れからもウェブアクセシビリティの重要性は高まっています。今後もますます、すべてのユーザーが平等にウェブを利用できる環境が求められると考えれます。

アクセシブルなウェブサイトは、多くの人に利用してもらえることで、企業の信頼性向上や新しいビジネスチャンスの創出にも繋がります。

この記事では、エンジニア向けにウェブアクセシビリティの基本的な説明と、具体的な対応について説明しています。

ウェブアクセシビリティの基本概念

アクセシビリティとは何か

アクセシビリティとは、障害を持つ人々を含むすべてのユーザーが平等にウェブコンテンツにアクセスし、利用できるようにすることを指します。たとえば、視覚障害のあるユーザーのために、画像に代替テキストを付けることや、キーボード操作だけでウェブサイトを利用できるようにすることが含まれます。

ユーザビリティとは何か

ユーザビリティは、特定のユーザーにとって使いやすく、満足できるデザインを目指す概念です。たとえば、購入手続きを簡単にすることで、ショッピングサイトのユーザビリティを向上させます。ユーザビリティの目的は、特定のユーザー層に対して快適で効率的な体験を提供することです。

ユーザビリティとアクセシビリティの違い

全ての人が満足できるウェブサイトを作ることは通常難しいです。たとえば、弱視の人のために文字サイズを大きくすると、視覚に問題がない人は文字を小さくして欲しいと思うかもしれません。ユーザビリティとアクセシビリティの違いをざっくり定義します。

• ユーザビリティ: 特定のユーザーにとって使いやすく、満足できるデザインを目指す。
• アクセシビリティ: すべてのユーザーが利用できない状態をなくすことを目指す。

アクセシビリティとは、ありとあらゆる全ての人が使えない状態を無くす事を目指し、すべてのユーザーが平等にウェブを利用できるようにすることです。

ウェブアクセシビリティのガイドライン

ウェブアクセシビリティのガイドラインとして、WCAG、ISO/IEC 40500:2012、JIS X 8341-3:2016の３つがあります。 今回は、WCAGとJIS X 8341-3:2016について概要と基準について記載します。

WCAGの概要

WCAG（Web Content Accessibility Guidelines）は、ウェブコンテンツのアクセシビリティを確保するための国際的なガイドラインです。最新のWCAG 2.2では、以下の基本原則に基づく具体的な基準が設定されています：

• 知覚可能: 情報やUI要素をユーザーが知覚できるようにする。
• 操作可能: ユーザーがインターフェースを操作できるようにする。
• 理解可能: 情報や操作が理解しやすいようにする。
• 堅牢: 現在および将来の技術でコンテンツが利用できるようにする。

アクセシビリティ基準とは何か？

アクセシビリティ基準とは、ウェブコンテンツが障害を持つ人々を含むすべてのユーザーに対してアクセスしやすくなるように設計されたガイドラインです。これらの基準は、ウェブコンテンツがどのように構築されるべきかを規定し、ユーザーが情報にアクセスしやすくすることを目的としています。アクセシビリティ基準は、国際的な標準化団体であるW3C（World Wide Web Consortium）によって策定され、WCAG（Web Content Accessibility Guidelines）として提供されています。

アクセシビリティ基準

アクセシビリティ基準は、主に以下の3つのレベルで構成されています。

• Aレベル: 最低限のアクセシビリティを確保するための基準
• AAレベル: 一般的に推奨される基準
• AAAレベル: 最高レベルのアクセシビリティを確保するための基準

日本の民間企業は、一般的に推奨されるAAレベルの基準を達成することを目指します。

JIS X 8341-3:2016 達成基準早見表

JIS X 8341-3:2016達成基準早見表（レベルA & AA）は、エンジニアが必要なアクセシビリティ要件を簡単に確認し、実装の参考にできる表です。

JIS X 8341-3:2016達成基準早見表

JIS X 8341-3:2016 達成基準 早見表（レベルA & AA）より https://waic.jp/resource/jis-x-8341-3-2016/

まずはここから、ウェブアクセシビリティの対応

ウェブアクセシビリティの基本的な対応として、以下の事から取り組む事をおすすめします。

• 画像
• 色のコントラスト
• 見出し
• キーボード
• 動画
• 動きのある仕組み

画像

画像には多くの情報が含まれていますが、視覚に障害があるユーザーにとっては、適切な説明がなければその情報を理解することができません。代替テキストを適切に提供することで、スクリーンリーダーを使用するユーザーも画像の内容を理解することができます。

ベストプラクティス:

• 画像に必ずalt属性を追加し、適切な代替テキストを記載する。
• 装飾目的の画像には空のalt属性（alt=""）を使用してスクリーンリーダーに無視させる。
• 画像リンクの場合、リンクの目的を明確にする代替テキストを記載する。

色のコントラスト

色のコントラストが不十分だと、視覚に障害があるユーザーや色覚異常のユーザーがコンテンツを読みづらくなります。十分なコントラストを確保することで、全てのユーザーがコンテンツを容易に読むことができます。

ベストプラクティス:

• テキストと背景のコントラスト比を最低でも4.5:1以上にする。
• 大きなテキストや太字のテキストの場合は、最低でも3:1以上のコントラスト比を確保する。
• カラーピッカーやコントラストチェッカーを使用してコントラスト比を確認する。

見出し

見出しはページの構造を示し、内容を階層的に理解する助けになります。スクリーンリーダーのユーザーは見出しを使用してページ内をナビゲートします。適切に構造化された見出しは、情報を効率的に伝えることができます。

ベストプラクティス:

• 見出しタグ（<h1>から<h6>）を論理的な順序で使用する。
• 主要な見出しは<h1>タグを使用し、サブセクションには適切な見出しレベルを使用する。
• 見出しタグを使用してページの構造を作成し、スタイルの調整はCSSで行う。

キーボード

全てのユーザーがマウスを使用できるわけではありません。一部のユーザーはキーボードや他の入力デバイスを使用してウェブサイトを操作します。キーボード操作が可能であることは、アクセシビリティにおいて非常に重要です。

ベストプラクティス:

• 全てのインタラクティブ要素（リンク、ボタン、フォーム要素など）がキーボードで操作可能であることを確認する。
• tabindex属性を正しく使用し、論理的なタブ順序を確保する。
• フォーカスのスタイルを明確にし、現在フォーカスされている要素を視覚的に強調する。

動画

動画には視覚と聴覚の両方の情報が含まれています。聴覚に障害があるユーザーや視覚に障害があるユーザーに対して、動画の内容を理解できるようにするための工夫が必要です。

ベストプラクティス:

• 字幕を提供し、聴覚に障害があるユーザーが音声情報を理解できるようにする。
• 音声解説を提供し、視覚に障害があるユーザーが視覚情報を理解できるようにする。
• 自動再生を避け、ユーザーが再生をコントロールできるようにする。

動きのある仕組み

カルーセルやスライダーなどで自動的に一定の間隔で動きのある仕組みとなっている場合があり、動きに敏感なユーザーや注意欠陥・多動性障害（ADHD）等のユーザーにとって不快感や混乱を引き起こすことがあります。自動的に動く仕組みとなっていてもユーザーがいつでも止められるように、一時停止ボタンなどを提供しましょう。

ベストプラクティス:

• 動きを伴うコンテンツは、ユーザーが操作や再生を停止できるオプションを提供する。
• prefers-reduced-motionメディアクエリを使用して、動きを減らした代替スタイルを提供する。
• 重要な情報を動きのある仕組みに依存しない方法で提供する。

アクセシビリティに対応しない選択

ウェブアプリやページの開発をする際に、あえてアクセシビリティに対応しない場合があります。このような場合、なぜ対応しないのかを説明できることが重要です。

なぜアクセシビリティに対応しないのか？

• ターゲットユーザーの明確な定義
  • ウェブサイトやアプリケーションが特定のプロフェッショナルや専門家集団向けであり、一般的なユーザーが利用することが想定されていない場合があります。
• リソースとコストの制約
  • アクセシビリティ対応には、追加のリソースやコストがかかることがあります。限られた予算やリソースの中で、他の重要な機能やサービスにリソースを集中させる必要がある場合もあります。
• ユーザビリティとアクセシビリティのトレードオフ
  • 一部のデザインや機能は、特定のユーザー体験を最大化するために設計されており、それが他のユーザーには適さない場合があります。

なぜ説明できることが重要か？

• ユーザー満足度の向上
  • なぜ特定のユーザーに向けた選択がされたのかを説明することで、不満を減らし、納得感を得るようにします。これにより、ユーザーエクスペリエンスの向上に繋げていきましょう。
• 将来的な改善のための計画
  • 現時点でアクセシビリティ対応を優先できない場合でも、将来的な改善計画を持っていることを示します。

これらのポイントを明確に説明できるようにすることで、アクセシビリティに対応しない選択が合理的であることを伝えるようにしましょう。また、将来的な改善計画を示すことで、ユーザーやステークホルダーに対して前向きな姿勢を見せていきましょう。

まとめ

ウェブアクセシビリティの確保は、すべてのユーザーに対して公平なアクセスを提供し、企業の社会的責任を果たすために非常に重要です。2024年4月に施行された障害者差別解消法の改正もあり、アクセシビリティに対応することには多くの意義があります。

• すべてのユーザーに優しい: 障害を持つユーザーにも情報やサービスを公平に提供し、社会全体のインクルージョンを促進します。
• 企業の信頼性向上: アクセシビリティに配慮することで、社会的責任を果たしている企業としての信頼性が向上します。
• ビジネスチャンスの拡大: アクセシブルなウェブサイトはより多くのユーザーにリーチでき、ビジネスの成長に繋がります。

ウェブアクセシビリティについて調べて思った事の一つは、コードの書き方や構成などの機械寄りな話がとても多いです。機械が読み取りやすく、高速に処理できる事が大事な要素となっています。機械に優しいWebは人類にも優しい。
ウェブアクセシビリティに取り組めばSEO対策にもなり、人工知能が使いやすいものにもなりそうです。

なにより、ウェブアクセシビリティは、単なる技術的な対応ではなく、すべてのユーザーに対する思いやりと責任を示すものです。この記事が、エンジニアがアクセシビリティの向上に取り組む一助となれば幸いです。

参考リンク

ガイドや情報提供

• デジタル庁 ウェブアクセシビリティ導入ガイドブック
  • デジタル庁が提供するウェブアクセシビリティに関する情報ページです。
• WCAG 2.2
  • 最新のWeb Content Accessibility Guidelines (WCAG) 2.2に関する詳細情報が掲載されています。
• ウェブアクセシビリティ基盤委員会 (WAIC)
  • 日本のウェブアクセシビリティに関する情報やガイドラインを提供しています。

ウェブアクセシビリティチェックツールの紹介

1. 自動化テストツール

• axe
  • axeは、ウェブサイトのアクセシビリティ問題を自動的に検出するブラウザ拡張機能です。

2. 手動テストツール

• WAVE
  • WAVEは、ウェブページのアクセシビリティ評価を手動で行うためのオンラインツールです。

3. ウェブサイト品質チェックツール

• Lighthouse
  • LighthouseはGoogleが提供しているウェブサイトの品質チェックツールで、ウェブアクセシビリティのチェックとしても使えます。

4. 色コントラストチェッカー

• Contrast Checker
  • Contrast Checkerは、ウェブページのテキストと背景色のコントラスト比をチェックするためのツールです。