JavaScriptのアクセシビリティ対応：初心者向け基本ガイド

JavaScript
2024.10.22

目次
  1. 1. JavaScriptとアクセシビリティの重要性
  2. 2. JavaScriptのアクセシビリティ対応ポイント
  3. 3. 実践的なアクセシビリティ対応のチェックリスト
  4. 4. まとめ：アクセシビリティに配慮したJavaScriptを実装しよう

1. JavaScriptとアクセシビリティの重要性

webデザインにJavascriptを取り入れるようになると、デザインの幅がぐっと広がりますね。ボタンをクリックしたときの動作、フォーム入力時のエラーメッセージ、スライドショーなどなど…ユーザーにとってもクライアントにとってもデザイナーにとっても、JavaScriptはとても魅力的な技術です。

が、アクセシビリティに配慮した設計がなされていないと、一部のユーザーにとって操作が難しくなることがあります。
　Webデザインにおけるアクセシビリティの重要性

具体的には、視覚多様性者やスクリーンリーダー利用者、キーボードのみで操作するユーザーにとって、次のような問題が生じる可能性があります。

  • 重要な情報が読み上げられない
    JavaScriptによって動的に生成されるコンテンツが、スクリーンリーダーに認識されない場合があります。ユーザーが画面を操作しても何が起こっているのかがわからず、目的の情報にたどり着けないことがあります。
  • キーボード操作ができない
    マウスではクリックできるボタンが、キーボードだけでは操作できない場合、視覚多様性者や身体の不自由なユーザーには利用が難しくなります。
  • アニメーションや動きによる不快感
    一部のユーザーにとっては、過度なアニメーションや点滅が不快感やストレスを引き起こす原因になります。設定によって動きを抑制するなどの配慮が必要です。
  • 動画の自動再生音声がスクリーンリーダーの読み上げと被ってしまう
    動画の音声が自動で再生されると、スクリーンリーダーの読み上げと音声情報が重なってしまうため、サイトの内容を把握しにくくなる場合があります。

アクセシビリティ対応がなされていないWebサイトは、特定のユーザー層にとって「使えないサイト」となり、結果としてサイトやビジネスへの評価にも影響を及ぼす可能性があります。すべての人が快適に利用できるよう、JavaScriptを実装する際には、アクセシビリティに配慮する対策を取るようにしましょう。
　スクリーンリーダーについてはこちらの記事をどうぞ。
　視覚障害者とスクリーンリーダーの世界: より自由な生活を目指して

2. JavaScriptのアクセシビリティ対応ポイント

具体的には、どのような対応を取ればよいのでしょうか？
JavaScriptによるアクセシビリティ対応の具体的なポイントを紹介します。

1. JavaScript無効時のフォールバック対応

フォールバックとは、システムや機能に何らかの不具合が生じたとき、代わりの機能を使用して解消する方法のことです。出典：【CDN】フォールバックとは？

あなたのサイトに訪れるユーザーが、みんなJavaScript機能を有効にしているとは限りません。JavaScriptを無効にしているユーザーでも、必要な情報や機能にアクセスできるように設計しておくことが重要です。

  • 基本情報はHTMLで提供する
    コンテンツの基本情報は、JavaScriptなしでもHTMLで表示できるようにしましょう。
  • 「JavaScriptを有効にしてください」というメッセージ
    JavaScriptが無効な場合に表示されるメッセージを<noscript>タグで追加し、必要な機能を使用するにはJavaScriptが必要であることを伝えます。

<noscript>

  <p>この機能を利用するには、JavaScriptを有効にしてください。</p>

</noscript>

2. ARIA属性の活用

JavaScriptで意図した表現がスクリーンリーダーなどの支援技術に正しく伝わるようにするために、ARIA属性（Accessible Rich Internet Applications属性）を使います。

aria-expanded属性
アコーディオンメニューやドロップダウンメニューなどの開閉状態を示すために使用します。開かれているときにはaria-expanded="true"、閉じているときにはaria-expanded="false"に設定して、スクリーンリーダーが状態を読み上げられるようにします。


<button aria-expanded="false" onclick="toggleMenu(this)">
  メニューを開く
</button>

<script>
  function toggleMenu(button) {
    const expanded = button.getAttribute("aria-expanded") === "true";
    button.setAttribute("aria-expanded", !expanded);
  }
</script>

aria-live属性
動的に追加されるメッセージ（例：フォームエラーメッセージや通知）に対し、aria-live="assertive"やaria-live="polite"を使ってスクリーンリーダーに読み上げさせます。


<div aria-live="polite" id="notification">
  <!-- JavaScriptで動的に追加されるメッセージをここに表示 -->
</div>

3. キーボード操作への対応

キーボードのみで操作するユーザーが快適に操作できるようにしましょう。ここで重要になってくるのはフォーカスです。

フォーカスの管理
モーダルウィンドウやドロップダウンメニューを開いた際に、自動的にその要素にフォーカスが移るように設定します。また、閉じたときには元の要素にフォーカスが戻るように配慮しましょう。
※モーダルウィンドウ：指定された操作を完了するかキャンセルするまで、他のウィンドウを開くことができないウィンドウのこと。出典：モーダルウィンドウとは？モーダル表示の役割とデメリットを解説


function openModal() {
  const modal = document.getElementById("modal");
  modal.style.display = "block";
  modal.setAttribute("tabindex", "-1");
  modal.focus();
}

function closeModal() {
  const modal = document.getElementById("modal");
  modal.style.display = "none";
  document.getElementById("openModalButton").focus();
}

タブインデックスとtabindex属性
JavaScriptで生成される要素やカスタムボタンにはtabindex="0"を追加して、キーボードでフォーカスが当たるように設定します。

4. アニメーションの配慮

アニメーションが苦手なユーザーや、動きに敏感なユーザーのために、アニメーションの自動再生を抑える方法を検討しましょう。

prefers-reduced-motionの活用
prefers-reduced-motionメディアクエリを使用すると、OSの設定に基づき、動きの少ないバージョンのサイトを提供できます。JavaScriptで確認し、アニメーションを制御することも可能です。


if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
  // アニメーションをオフにする処理
} else {
  // アニメーションを実行する処理
}

5. エラーメッセージや通知の表示方法

フォームのエラーメッセージや操作の通知は、視覚的だけでなく音声や支援技術にも対応させましょう。

具体的でわかりやすいエラーメッセージ
フォームに不備があった場合、エラーメッセージでどの部分に何の問題があるかを具体的に記載します。また、エラーメッセージの表示にaria-live属性を活用し、スクリーンリーダーでの読み上げも行うようにします。


<div id="error-message" aria-live="assertive">
  <!-- エラーメッセージをJavaScriptでここに挿入 -->
</div>

6. 動画の自動再生に対する配慮

動画の自動再生機能も、JavaScriptで制御することができます。ページの読み込みと同時に動画を再生させたり、特定のタイミングで再生されるよう設定することも可能ですが、アクセシビリティの観点からすると、ユーザーの意図しないタイミングでの動画再生機能を付けることはお勧めできません。

以下のような配慮が必要となります。

自動再生をオフにするオプションを設ける
動画の近くに「再生」や「停止」ボタンを設置し、ユーザーが簡単に再生を制御できるようにします。

音声なしの自動再生を検討
音声がない状態で自動再生することを検討しましょう。ユーザーが希望する場合のみ音声を出すなどの配慮が必要です。

prefers-reduced-motionを使用する
JavaScriptでprefers-reduced-motionメディアクエリを利用し、ユーザーの設定に応じて動画の自動再生を止めることも重要です。たとえば、次のようなコードで確認できます。


if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
  // 自動再生をオフにする
} else {
  // 自動再生をオンにする
}

3. 実践的なアクセシビリティ対応のチェックリスト

実際に、あなたの作ったサイトがアクセシビリティに対応できているかを確認するためのチェックリストを紹介します。また、テストするためのツールについてもご紹介しますので、参考にしてください。

JavaScriptでのアクセシビリティ対応チェックリスト

1. JavaScriptが無効な環境でも情報にアクセスできるか

  • フォールバックとして、HTMLやCSSだけでも最低限の情報が表示されるか確認します。
  • JavaScriptが無効の場合、機能が動かないことを知らせる<noscript>タグを利用していますか？

2. 動的なコンテンツがスクリーンリーダーで認識されるか

  • 動的に生成される要素（通知メッセージ、エラー表示など）にaria-liveを設定していますか？
  • 状態が変わる要素（ドロップダウン、アコーディオンメニューなど）に、aria-expandedやaria-hiddenを正しく設定していますか？

3. キーボード操作に対応しているか

  • 全てのインタラクティブ要素（ボタン、リンク、メニューなど）がキーボードで操作可能ですか？
  • タブキーで移動する順番が自然で、重要な要素にフォーカスが当たるようになっていますか？
  • モーダルウィンドウやポップアップを開いた際、適切にフォーカスが管理されていますか？

4. アニメーションが負担にならない設計になっているか

  • アニメーションや動きが必要以上に速すぎたり、過剰ではありませんか？
  • prefers-reduced-motionメディアクエリを使用し、ユーザーの動作軽減設定に対応していますか？
  • 動画やスライドショーに一時停止や再生ボタンが用意されていますか？

5. エラーメッセージや通知がわかりやすいか

  • フォームのエラーメッセージが具体的で、修正方法を明確に伝えていますか？
  • エラーメッセージや成功通知が視覚的にだけでなく、音声でも伝わるように設計されていますか？

アクセシビリティ対応をテストするためのツール

以下のツールを使用すると、アクセシビリティ対応の確認が効率的に行えます。初心者でも扱いやすいツールを厳選しました。

1. Chrome DevTools（アクセシビリティタブ）
Chromeブラウザの開発者ツールに組み込まれている機能です。以下のポイントを確認できます：

  • フォーカスの順番
  • 各要素に設定されたARIA属性
  • 要素のアクセシビリティツリー

使い方：ページ上で右クリックし、「検証」を選択。Accessibilityタブに移動して詳細を確認できます。

2. WAVE（Web Accessibility Evaluation Tool）
WAVEは、Webページのアクセシビリティをオンラインでチェックできるツールです。アクセシビリティの問題点が視覚的にハイライトされるので、初心者にもわかりやすいです。

  • URL: https://wave.webaim.org/
  • 特徴: 無料で使用可能。ARIA属性やコントラストの問題も確認できます。

3. Axe DevTools
Axe DevToolsは、アクセシビリティの問題を検出して修正方法を提示してくれるChromeの拡張機能です。自動的にチェックが行えるため、JavaScriptを使ったページの確認に最適です。

  • インストール: Chromeウェブストアから無料で入手可能。
  • 特徴: 詳細な問題の説明と修正方法の提案が表示されます。

4. スクリーンリーダー（NVDAやVoiceOver）
実際にスクリーンリーダーを使用して、動的なコンテンツやナビゲーションがどのように読み上げられるかを確認します。特に、aria-liveやaria-expandedが意図通りに動作しているかを検証するのに役立ちます。

  • Windowsユーザー向け: NVDA（無料）
  • Macユーザー向け: VoiceOver（MacOSに標準搭載）

4. まとめ：アクセシビリティに配慮したJavaScriptを実装しよう

JavaScriptを使えば、Webサイトに動きやインタラクティブな機能を加え、ユーザーに楽しく便利な体験を提供できます。しかし、アクセシビリティに配慮せずに実装すると、視覚多様性者にとって操作が難しくなってしまいます。2024年より「障害者差別解消法」が改訂されたこともあり、視覚多様性者にとって使いやすいサイトを提供することは、より重視されるようになっていきます。
障害者差別解消法について、詳しくはこちらをご覧ください。
障害者差別解消法とは？初心者Webデザイナー向けアクセシビリティ対応ガイド

アクセシビリティ対応は一度だけ意識すればよいというものではありません。継続的な見直しが必要になります。

アクセシビリティ対応が行き届いたWebサイトは、すべての人に使いやすく、快適な体験を提供します。これにより、ユーザーの満足度が向上するだけでなく、検索エンジンにも高く評価されるため、SEOの観点でも有利になります。また、誰もが平等にアクセスできるサイトを提供することは、社会的な意義も大きいといえます。
アクセシビリティとSEOについてはこちらの記事もどうぞ↓
SEO強化に役立つアクセシビリティ：ユーザーのための改善ポイント

アクセシビリティ対応を取り入れることで、JavaScriptの力を最大限に活かしながら、誰にとっても親しみやすいWebサイトを実現していきましょう。

アクセシビリティについての記事をまとめました↓

WCAGガイドラインで実現する誰もが使いやすいWebサイト
1. WCAGガイドラインとは WCAGガイドライン、またはWeb Content Accessibility Guidelinesは、ウェブコンテンツのアクセシビリティを向上させ、特に障害を持つ方々にもアクセスしやすい環境を構築するための...
howtobecomewebdesigner.com
2024.10.30
見やすいサイト作りの第一歩：カラーアクセシビリティを理解しよう
1. カラーアクセシビリティとその必要性 カラーアクセシビリティという言葉をご存知でしょうか。これは、視覚に障害のある方や、色覚異常の方（色覚多様性者）など、全ての人がWebサイトやアプリなどのデジタルコンテンツを、平等に利用できるようにす...
howtobecomewebdesigner.com
2024.11.06
Webアクセシビリティとは？タイポグラフィでできるユーザー配慮のポイント
1. デジタル社会におけるアクセシビリティの重要性 現代の生活には、インターネットが欠かせない存在になっています。ニュースを読んだり、趣味の情報を探したり、毎日Webサイトを利用するのが当たり前になりましたよね。それだけに、使いやすく、誰で...
howtobecomewebdesigner.com
2024.11.07

コメント

タイトルとURLをコピーしました