JavaScriptでアクセシビリティを向上させる方法 – JavaScriptで始めるプログラミング

キーボードナビゲーションのサポート

多くのユーザーがキーボードを使用してWebページを操作します。したがって、キーボードナビゲーションのサポートが必要です。以下のコードスニペットでは、キーボードナビゲーションの基本例を示します。

document.addEventListener('keydown', (event) => {
  if (event.key === 'Tab') {
    // フォーカス要素を移動する処理
  }
});

ARIA属性の使用

ARIA（Accessible Rich Internet Applications）属性を使用することで、画面読み上げソフトウェアと連携しやすくなります。例えば、モーダルウィンドウに対応する方法は次の通りです。

<div role="dialog" aria-labelledby="dialogTitle" aria-describedby="dialogDescription">
  <h2 id="dialogTitle">モーダルタイトル</h2>
  <p id="dialogDescription">モーダルの内容</p>
  <button aria-label="閉じる">×</button>
</div>

フォーカス管理

インタラクティブな要素において、フォーカスが適切に管理されることが必要です。次に示すコードは、モーダルウィンドウが開かれたときにフォーカスを移動する方法の一例です。

const modal = document.querySelector('#modal');
const focusableElements = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
const firstFocusableElement = focusableElements[0];
const lastFocusableElement = focusableElements[focusableElements.length - 1];

document.addEventListener('keydown', (event) => {
  if (event.key === 'Tab') {
    if (document.activeElement === lastFocusableElement) {
      firstFocusableElement.focus();
      event.preventDefault();
    }
    if (document.activeElement === firstFocusableElement && event.shiftKey) {
      lastFocusableElement.focus();
      event.preventDefault();
    }
  }
});

適切な色のコントラスト

アクセシビリティのためには、テキストと背景の色のコントラストが十分であることが重要です。色のコントラストを確認するためのツールも提供されています。色のコントラストチェッカー(外部リンク)を利用することで、簡単に確認できます。

動的なコンテンツの通知

動的に更新されるコンテンツは、ユーザーに知らせる必要があります。ここでは、ARIAのliveリージョンを使用して通知する方法を紹介します。

<div aria-live="polite" id="notification"></div>

document.querySelector('#notification').innerText = '新しいメッセージがあります';

まとめ

JavaScriptを使用してWebサイトのアクセシビリティを向上させる方法はいくつかあります。キーボードナビゲーションのサポート、ARIA属性の使用、フォーカス管理、適切な色のコントラスト、動的なコンテンツの通知などを実装することで、すべてのユーザーがサイトを利用しやすくなります。これらの技術を取り入れることが、インクルーシブなWeb体験を提供する鍵となります。