ウェブアクセシビリティ義務化とは?対応や重要性を解説

ウェブアクセシビリティ義務化とは?対応や重要性を解説のイメージ画像

2024年4月の障害者差別解消法改正によって大きな注目を集めているウェブアクセシビリティ。言葉として聞いたことがあっても、ウェブアクセシビリティとは何を指すのか、またどういった対応が求められているのかを詳しく理解していないも多いのではないでしょうか。

この記事では、ウェブアクセシビリティの考え方や実現に向けた具体的な対応内容を解説します。

目次

  1. ウェブアクセシビリティとは
    1. 1.1. ウェブアクセシビリティの重要性
    2. 1.2. ウェブアクセシビリティが確保できている状態とは
    3. 1.3. ウェブアクセシビリティは誰のための取り組み?
    4. 1.4. アクセシビリティとユーザビリティの違い
  2. ウェブアクセシビリティ義務化とは?法改正について
    1. 2.1. 2024年4月の「障害者差別解消法」改正とは
    2. 2.2. 「合理的配慮の義務化」とは
    3. 2.3. 義務化による影響は?罰則などのリスクはある?
  3. ウェブアクセシビリティを改善する意義と目的
    1. 3.1. 多くのユーザーにとって使いやすいサイトになる
    2. 3.2. さまざまな利用環境・状況に対応できる
    3. 3.3. サイトの品質向上により間接的なSEO効果が見込める
    4. 3.4. 企業の信頼やイメージアップにつながる
  4. ウェブアクセシビリティ対応をしないと起こりうるデメリット
  5. ウェブアクセシビリティに関する主な規格
    1. 5.1. WCAG
    2. 5.2. ISO/IEC 40500
    3. 5.3. JIS X 8341-3
    4. 5.4. その他
  6. ウェブアクセシビリティで何を改善・達成すべき?
    1. 6.1. 【重要】達成しないと利用者に重大な悪影響を及ぼすもの
      1. 6.1.1. (重要:1)音声は自動再生させない
      2. 6.1.2. (重要:2)抜け出せないコンテンツは作らない
      3. 6.1.3. (重要:3)激しい光の点滅は避ける
      4. 6.1.4. (重要:4)自動でコンテンツを切り替えない
    2. 6.2. 【必須】必ず達成しなければならないもの
      1. 6.2.1. (必須:1)画像・文字に関する改善
        1. 6.2.1.1. (必須:1-1)赤字・太字・下線・拡大などの単一表現のみで情報を伝えない
        2. 6.2.1.2. (必須:1-2)文字色と背景色は十分なコントラスト比を保つ
        3. 6.2.1.3. (必須:1-3)テキストの拡大・縮小時でも情報を読み取れるようにする
      2. 6.1.2. (必須:2)表示の見やすさに関する改善
        1. 6.2.2.1. (必須:2-1)見出し要素だけでセクションやブロックに含まれる要素を表現する
        2. 6.2.2.2. (必須:2-2)ページの内容を示すタイトルを適切に表現する
        3. 6.2.2.3. (必須:2-3)リンクを適切に表現する
        4. 6.2.2.4. (必須:2-4)ナビゲーションに一貫性をもたせる
        5. 6.2.2.5. (必須:2-5)同じ機能には同じラベルや説明をつける
      3. 6.1.3. (必須:3)操作に関する改善
        1. 6.2.3.1. (必須:3-1)キーボード操作だけでサービスの全機能にアクセスできるようにする
        2. 6.2.3.2. (必須:3-2)操作に制限時間を設けてはいけない
        3. 6.2.3.3. (必須:3-3)スクリーンリーダーで読み上げる際に意味が通じる順序にする
      4. 6.2.4. (必須:4)HTMLに関する改善
        1. 6.2.4.1. (必須:4-1)ロゴ・写真・イラストなどの画像が指し示している情報を代替テキストとして付与する
        2. 6.2.4.2. (必須:4-2)文字や文字コード、フォントに配慮する
    3. 6.3. 【個別対応】状況に応じて確認すべきこと
      1. 6.3.1. (個別対応:1)分かりやすい入力フォームにする
      2. 6.3.2. (個別対応:2)音声・映像に代替となる情報を添える
      3. 6.3.3. (個別対応:3)アニメーションは操作ができるようにする
      4. 6.3.4. (個別対応:4)スクリーンリーダーにも変化が分かるようにする
    4. 6.4. 【非推奨】導入に慎重な検討が必要
      1. 6.4.1. (非推奨:1)支援技術は必要な機能に限定する
      2. 6.4.2. (非推奨:2)文字サイズの変更などのプラグインは控える
  7. ウェブアクセシビリティ対応の手順と方法
    1. 7.1. ウェブアクセシビリティ対応の方針を定める
    2. 7.2. 規格に対応した設計と試験をおこなう
    3. 7.3. 試験結果を公開する
    4. 7.4. 継続的な運用をおこなう
  8. QTDAと課題解決!ウェブアクセシビリティへの対応を進めましょう
  9. まとめ

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

「ウェブアクセシビリティ」とは、「Web+Access+Ability」を組み合わせた造語で、Webサイトで提供されている情報やサービスに対するアクセスや利用のしやすさを意味します。

なぜ今ウェブアクセシビリティが求められているのか、どのような状態を目指す取り組みなのかを順にご紹介します。

1.1. ウェブアクセシビリティの重要性

ウェブアクセシビリティは、実は1990年代から存在している概念です。ウェブアクセシビリティの概念が生まれて以降、人の特性や環境が原因で得られる情報・サービスの差を埋めるため、世界各国で法整備が進んできました。

そして現在、ウェブアクセシビリティへの対応は世界規模で求められています。日本でも、デジタル庁の「誰一人取り残されない、人に優しいデジタル社会の実現」という方針のもと、ウェブアクセシビリティ導入ガイドブック策定などの取り組みがおこなわれています。

1.2. ウェブアクセシビリティが確保できている状態とは

では、ウェブアクセシビリティが確保できている状態とはどのような状態を指すのでしょうか?

Webサイトで提供している情報・サービスを、誰もが等しく円滑に利用できるのであれば「ウェブアクセシビリティが確保できている状態」といえます。具体的には以下のような状態を指します。

  • 視力に困難があっても情報が伝わる、操作できる
  • 麻痺などの身体障害によりマウス操作が難しい人でもキーボードだけで操作できる
  • 色覚に困難があっても得られる情報に差がない
  • 聴覚に困難があっても音声・動画コンテンツの内容が分かる

上記を実現するために具体的にどのような対応をおこなえばよいかは、記事の後半で詳しく解説します。

1.3. ウェブアクセシビリティは誰のための取り組み?

ウェブアクセシビリティは視覚や聴覚、身体などに障害のある方のための取り組みだと思われがちですが、本来は障害の有無に関わらず、Webサイトにアクセスするすべての人のために実施される取り組みです。以下のような状況にある方々に対しても等しく情報・サービスが提供できるよう配慮することが重要です。

  • 一時的な怪我や病気によって細かな操作が難しい方
  • 加齢によって小さい文字が読みにくくなった方
  • 海外からの旅行で日本語が分からない方
  • パソコンがなくスマートフォンしか持っていない方

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

アクセシビリティと似た言葉に「ユーザビリティ」があります。
ユーザビリティはユーザーにとっての使いやすさ・操作性を意味する言葉ですが、アクセシビリティもユーザビリティもさまざまな文脈で利用されるため、両者に明確な区分はありません。

一方で、ユーザビリティはWebサイトを利用する特定のユーザーにとっての使いやすさや操作性、アクセシビリティはすべての人にとってのアクセスのしやすさ、使いやすさであり、アクセシビリティはユーザビリティの要素を含んだ概念とする考え方もあります。

2. ウェブアクセシビリティ義務化とは?法改正について

ウェブアクセシビリティ義務化とは?法改正についてのイメージ画像

ここからは、ウェブアクセシビリティが注目を集めるきっかけとなった法改正や義務化について詳しく解説します。

2.1. 2024年4月の「障害者差別解消法」改正とは

障害者差別解消法とは、障害者に対する差別をなくし、すべての人が相互に人格と個性を尊重しあいながら共生する社会の実現のために、2016年4月に施行された法律です。その中では、不当な差別的取り扱いの禁止と合理的配慮の提供が義務付けられています。

2024年4月の改正前までは、この合理的配慮の提供は民間事業者に対しては努力義務となっていましたが、改正によって行政機関などと同様の法的義務に変わっています。
合理的配慮の提供は対面・オンラインの区分なく求められるものであり、ウェブアクセシビリティも対象に含まれます。これにより、ウェブアクセシビリティへの対応がより強く求められるようになりました。

2.2. 「合理的配慮の義務化」とは

そもそも「合理的配慮の提供」とはどのようなものなのでしょうか?
合理的配慮の提供とは、障害を持つ方が生活するうえでの障壁を、行政機関などや民間事業者の負担が可能な範囲で取り除くことを指します。
例えば、車椅子の方が施設を利用したいと思っているのに段差があって施設に入れない場合に、スロープを使って補助するといった取り組みが挙げられます。

前述の通り、合理的配慮の提供はインターネット上でも求められます。そのためどのような人でも同じようにWebサイトを利用できるよう整備する必要があります。

2.3. 義務化による影響は?罰則などのリスクはある?

現段階では、合理的配慮の提供義務に違反をしても罰則を課されるわけではありません。ただし、物理的な工事や人手が必要なケースに比べてウェブアクセシビリティは負担が軽いとみなされる可能性があるため、「実行可能にも関わらずしていない」と行政からの指導・勧告や民事訴訟などを受けるリスクはあります。
そうしたリスクを避けるためにも、能動的な取り組みが重要となるでしょう。

3. ウェブアクセシビリティを改善する意義と目的

ランサムウェア被害にあった病院で発生するリスクのイメージ画像

義務化されたという理由だけでなく、ウェブアクセシビリティの改善に取り組むことには多くのメリットがあります。ここでは4つのメリットをご紹介します。

3.1. 多くのユーザーにとって使いやすいサイトになる

ウェブアクセシビリティの本質は、すべての人にとって見やすく、使いやすいWebサイトを構築することです。
統一したレイアウトやナビゲーションルールを全サイトで適用し、ページタイトルやリンクテキストを適切な内容にしてウェブアクセシビリティの改善に取り組むことで、障害の有無に関わらず多くのユーザーにとって使いやすく読みやすいWebサイトになるでしょう。
Webサイトを改善することでユーザーは情報を探しやすくなり、結果としてより多くのユーザーに自社のWebサイトを使ってもらえるようになります。

3.2. さまざまな利用環境・状況に対応できる

現代ではインターネットを利用する環境や状況が多様化しています。
ウェブアクセシビリティを改善すれば、デバイスやOS、ブラウザ、支援技術(スクリーンリーダーや点字ディスプレイなど)といった技術的な違いや、室内・外出先といった利用する環境の違いに関係なく、どんなときでも使いやすいWebサイトを構築できるでしょう。

3.3. サイトの品質向上により間接的なSEO効果が見込める

ウェブアクセシビリティの改善によりユーザーにとって使いやすいWebサイトになれば、間接的なSEO効果が見込めるかもしれません。

なぜなら検索エンジンはユーザーが使いやすいWebサイトを評価する傾向にあるためです。「SEOのためにウェブアクセシビリティに取り組む」では手段と目的が逆転してしまうため注意が必要ですが、結果としてSEO効果が得られれば、より多くのユーザー獲得につながる可能性があるでしょう。

3.4. 企業の信頼やイメージアップにつながる

誰でも使いやすいWebサイトを提供することは、顧客からの信頼獲得やイメージアップにもつながります。
特に現代は企業の口コミがすぐに広まる時代です。どんな方にも配慮されたサイトになっていることが他の企業との差別化につながり、大きなブランディング効果を得られる可能性もあります。

4. ウェブアクセシビリティ対応をしないと起こりうるデメリット

ウェブアクセシビリティ対応をしないと起こりうるデメリットのイメージ画像

ウェブアクセシビリティの改善に取り組まないとどのようなデメリットを引き起こすのでしょうか?
まず、Webサイトが使いづらい状態だとユーザーが離れていき、誰にも利用されないWebサイトになってしまいます。それが企業イメージの悪化につながり、ユーザーを顧客として取り込む機会を失う可能性もあるでしょう。さらに、特定のユーザー層に対して配慮に欠けると見なされ、民事訴訟につながるリスクもあります。実際に海外では、視覚障害を持つユーザーに対応しておらず、「差別にあたる」として訴訟になった事例が存在します。

また、最初からウェブアクセシビリティを考慮してWebサイトを構築した場合と、あとからWebサイトでウェブアクセシビリティを向上させる場合とでは、後者のほうが大きな手間とコストがかかります。
こうしたコストを削減するためにも、あらかじめウェブアクセシビリティを考慮してWebサイトやコンテンツの設計をおこなう必要があります。

5. ウェブアクセシビリティに関する主な規格

ウェブアクセシビリティには、対応を標準化するための規格が定められています。どのような規格があるのかそれぞれ解説していきます。

5.1. WCAG

WCAG(Web Content Accessibility Guidelines)は、インターネットの各種技術の標準化をおこなう国際的な非営利団体W3Cが作成した規格です。WCAG2.0では、ウェブアクセシビリティにおける4つの原則が定義されています。

  • 知覚可能:ユーザーが情報とUIを知覚できること
  • 操作可能:ユーザーがUIやナビゲーションを操作できること
  • 理解可能:ユーザーが情報とUI操作を理解できること
  • 堅牢(robust):利用環境によらず正常に表示できること

なお、最新のWCAGはWCAG2.2となっています。

5.2. ISO/IEC 40500

ISO/IEC 40500:2012は、2012年にWCAG2.0が国際規格となったものです。WCAG2.0の内容がそのまま採用されているため、規格の位置づけ以外に差はありません。

5.3. JIS X 8341-3

JIS X 8341-3:2016は、2016年にWCAG2.0を日本国内の正式な規格として採用したもので、内容はWCAG2.0と同じです。ISO/IEC 40500とJIS X 8341-3はともに、WCAG2.2にあわせて改訂される見込みとなっています。

5.4. その他

その他に日本において参考となる基準として、「みんなの公共サイト運用ガイドライン」や「情報アクセシビリティ自己評価様式」があります。どちらも技術基準はJIS X 8341-3:2016に対応しているため、JIS X 8341-3:2016の内容が読み解きにくい、対応状況をチェックしたい場合に活用できるでしょう。

6. ウェブアクセシビリティで何を改善・達成すべき?

ウェブアクセシビリティで何を改善・達成すべき?のイメージ画像

ここまで、なぜウェブアクセシビリティに取り組む必要があるのかを様々な視点から解説してきました。
ここからは、ウェブアクセシビリティにおいて具体的に何を改善し、何を達成しなければならないのか、4つの項目に分けて具体的に解説します。

6.1. 【重要】達成しないと利用者に重大な悪影響を及ぼすもの

これから解説する4点は、コンテンツ理解のしやすさやユーザビリティを著しく低下させるだけでなく、発作などの症状を引き起こすリスクがあります。特に注意しましょう。

(重要:1)音声は自動再生させない

音声が自動再生になっていると、コンテンツ閲覧中に関係のない音声が流れることで理解の妨げになります。また、スクリーンリーダー併用時にスクリーンリーダーの読み上げを聞き取れなくなる影響もあります。音声は自動再生させず、利用者が自分で再生・停止を制御できる設計にしましょう。

(重要:2)抜け出せないコンテンツは作らない

キーボードだけで操作をおこなっているときに、キーボード操作では抜け出せないコンテンツを表示することは避けましょう。モーダルウィンドウのようにウィンドウ内で指定の操作を完了するまでは別の操作ができないコンテンツを表示してしまうと、利用者が見たいコンテンツを見られなくなってしまいます。

(重要:3)激しい光の点滅は避ける

激しい光の点滅は、光感受性発作などを誘発する要因となります。デジタル庁の「ウェブアクセシビリティ導入ガイドブック」では、1秒に3回以上点滅するコンテンツを避けることが推奨されています。

(重要:4)自動でコンテンツを切り替えない

スライドショーなどでコンテンツが自動で切り替わると、利用者が閲覧している最中にコンテンツが切り替わってしまう可能性があります。
また、常に動き続けているコンテンツがあると、別の箇所を見ているのに動きが気になってしまう利用者もいます。自動で切り替わるコンテンツを設置する場合は、コンテンツの停止や非表示などを利用者が制御できる機能を設置しましょう。

6.2. 【必須】必ず達成しなければならないもの

次に、ユーザーがコンテンツを理解・操作するために優先的に対応することが求められる基準について解説します。

(必須:1)画像・文字に関する改善

赤字・太字・下線・拡大などの単一表現のみで情報を伝えない

例えば入力必須の項目を赤字のみで表現してしまうと、色覚障害の方が内容を認識できません。複数の表現を組み合わせ、誰でも内容を認識できるようにする必要があります。

文字色と背景色は十分なコントラスト比を保つ

文字色と背景色の組み合わせにも注意が必要です。
例えば文字色が水色、背景色が青のように文字色と背景色を同系統にしてしまうと、文字が非常に読みにくくなります。コントラスト比を考慮し、文字色と背景色で十分なコントラスト比を保つ必要があります。

テキストの拡大・縮小時でも情報を読み取れるようにする

拡大・縮小によってテキストの重なりや崩れが発生すると、テキストの情報を確認できなくなってしまいます。拡大・縮小時もテキストが正常に表示されるようなレイアウト設計が必要です。

(必須:2)表示の見やすさに関する改善

見出し要素だけでセクションやブロックに含まれる要素を表現する

例えばリストを作成する際、具体的な内容を含めずに見出しを「リスト」にしてしまうと何のリストかが分かりにくくなります。一目で何のリストか分かるような見出しをつける必要があります。

ページの内容を示すタイトルを適切に表現する

見出しと同様、タイトルも、ページの内容が適切に伝わるようにつける必要があります。タイトルが重複し判別しにくくならないような注意も必要です。

リンクを適切に表現する

リンクを貼る場合、リンク先の内容が明確でなければ利用者が安心してリンクを開くことができません。リンク先の内容やファイル形式、作成組織などを明確に提示する必要があります。

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

ナビゲーションがページによってバラバラだと、ページごとに利用者がナビゲーションを探す手間が生まれます。ナビゲーションは同じ順序や表記となるよう一貫性をもたせる必要があります。

同じ機能には同じラベルや説明をつける

同じ機能にバラバラなラベルや説明をつけると、利用者が混乱する原因となります。同じ機能には同じラベル・説明となるよう一貫性をもたせる必要があります。

(必須:3)操作に関する改善

キーボード操作だけでサービスの全機能にアクセスできるようにする

抜け出せないコンテンツを作らないよう、キーボード操作だけですべての機能にアクセスできるようにするとともに、フォーカスインジケーターも表示される設計が必要です。

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

誤操作を誘発しないよう、操作に制限時間を設けないようにする必要があります。制限時間を設ける必要がある場合には、利用者側で制限時間切れを回避できる機能をつけましょう。

スクリーンリーダーで読み上げる際に意味が通じる順序にする

スクリーンリーダー利用時に正しく内容が認識できるよう、不要な空白文字を避ける、コンテンツの順番を考慮するなどの対策が必要です。

(必須:4)HTMLに関する改善

ロゴ・写真・イラストなどの画像が指し示している情報を代替テキストとして付与する

視覚に障害がある方が見る場合や、レイアウト崩れが発生している状況では、画像単体での情報は正しく伝わりません。どんな場合でも内容を理解できるよう、代替テキストを用意しておく必要があります。

文字や文字コード、フォントに配慮する

文字化けや表示崩れを防ぐために文字コードをUTF-8にするとともに、コピペ時やスクリーンリーダーでの読み取り時に別の文字に変換されないようフォントに配慮する必要があります。

6.3. 【個別対応】状況に応じて確認すべきこと

ここからは、状況に応じて対応が求められる基準について解説します。

(個別対応:1)分かりやすい入力フォームにする

入力フォームでは、入力内容や入力形式(半角・全角など)を利用者に分かりやすいよう提示し、エラー発生時にはエラー内容が明確に伝わるようにする必要があります。
また、法律や金融取引などに関わる入力フォームの場合、入力エラーのチェックや内容確認、送信取り消しなどの機能も求められます。

(個別対応:2)音声・映像に代替となる情報を添える

音声・映像コンテンツでは、代替コンテンツを添えて音声・映像コンテンツを利用できない方にも情報が伝わるようにする必要があります。
また、前述した自動再生の回避や停止、非表示などの制御機能も求められます。

(個別対応:3)アニメーションは操作ができるようにする

アニメーションやスライドショーなど動きがあるコンテンツを表示する場合、利用者側で制御ができるよう、一時停止や停止、非表示などの機能が必要になります。

(個別対応:4)スクリーンリーダーにも変化が分かるようにする

コンテンツの状況をスクリーンリーダーが正しく読み取れるよう、コンテンツの遷移やチェックボックス、ラジオボタンのオン・オフなどまで読み取るようにする必要があります。モーダルダイアログを表示する場合は、モーダルダイアログの情報を読み取れるようにする必要もあります。

6.4. 【非推奨】導入に慎重な検討が必要

ここで解説する項目は、状況によってアクセシビリティの改善につながらない、またはアクセシビリティを損ねる可能性があるため、慎重な導入が求められるものです。

(非推奨:1)支援技術は必要な機能に限定する

アクセシビリティ・オーバーレイなど、アクセシビリティ支援を目的としたさまざまなプラグインが開発されています。
これらのプラグインは状況によって他の支援機能と競合する可能性があるため、導入は慎重に検討し、必要な機能のみに限定する必要があります。

(非推奨:2)文字サイズの変更などのプラグインは控える

現在ではブラウザで文字サイズなどの基本的な変更が可能であるため、Webサイト側での文字サイズの変更プラグインは過剰な機能となる可能性があります。
かえって文字サイズなどの制御が難しくなる可能性があるため、導入は慎重に検討する必要があります。

7. ウェブアクセシビリティ対応の手順と方法

ウェブアクセシビリティ対応の手順と方法のイメージ画像

ウェブアクセシビリティの改善に取り組む際の具体的な流れを確認しておきましょう。

7.1. ウェブアクセシビリティ対応の方針を定める

まずはウェブアクセシビリティ対応の方針を固めましょう。
やみくもに対応をおこなっても、コストばかりが大きくなり、効率的な成果につながらない可能性があります。Webサイトの現状を把握し、どの項目をどの適合レベルにするか整理することが重要です。

7.2. 規格に対応した設計と試験をおこなう

方針が固まったら、方針にしたがって設計および実装を進めていきます。
適合レベルに準拠しているかは、前述した「情報アクセシビリティ自己評価様式」や下記の早見表などで確認するとよいでしょう。

7.3. 試験結果を公開する

ウェブアクセシビリティの対応度は、すべての達成基準に適合していれば「準拠」、1つでも達成基準に適合していない場合は「一部準拠」となります。Webサイトの対応度が伝わるよう、それぞれの試験結果を集計し、対応度を公開しましょう。

7.4. 継続的な運用をおこなう

ウェブアクセシビリティ改善は継続的に取り組む必要があり、定期的に方針を確認・修正するのが理想です。総務省からアクセシビリティの評価および関連知識の習得を支援するツールが公開されているため、ツールを活用しつつ継続的な運用をおこないましょう。

8. QTDAと課題解決!ウェブアクセシビリティへの対応を進めましょう

QTDAと課題解決!ウェブアクセシビリティへの対応を進めましょうのイメージ画像

障害者差別解消法改正によってウェブアクセシビリティ確保の重要性が高まっていますが、何から手をつければいいか分からない方も多いでしょう。まずは専門家に相談するのがおすすめです。QTnetが展開するデジタルエージェンシー事業のQTDAは「ゼロから相談できるパートナー」として、ウェブアクセシビリティの取り組みをサポートしています。

QTDAはQTnetが展開するデジタルエージェンシー事業です。デジタル広告の知見をベースに、ウェブアクセシビリティだけでなくマーケティングコミュニケーションのさまざまな課題解決をサポートしています。

9. まとめ

ウェブアクセシビリティは、Webサイトで提供している情報やサービスへのアクセス・使いやすさを意味する概念です。2024年4月の障害者差別解消法改正によって、これまで民間事業者では努力義務だった「合理的配慮の提供」が法的義務となったことで、ウェブアクセシビリティ確保の重要性はより高まっています。

ウェブアクセシビリティには多くの基準がありますが、一つひとつ基準を満たすことで誰でも使いやすいWebサイトになり、多くのメリットが得られます。ウェブアクセシビリティの改善をお考えの方は、ぜひQTnetが展開するデジタルエージェンシー事業「QTDA」へお気軽にお問合せください。

このブログでご紹介したサービス