JavaScriptのアクセシビリティ対応の基礎知識

先生

JavaScriptでウェブをバリアフリーに！アクセシビリティ対応の基礎をしっかり学んで、誰でも使えるウェブサイトを作ろう。

JavaScriptアクセシビリティ対応の重要性

JavaScriptはウェブサイトにインタラクティブ性をもたらしますが、アクセシビリティを考慮せずに使用すると、一部のユーザーにとって利用が困難になる可能性があります。アクセシビリティ対応を行うことで、障がいを持つユーザーを含む、より多くの人々がウェブコンテンツを利用できるようになります。

具体的には、視覚障碍者、聴覚障碍者、運動障碍者、認知障碍者など、様々なニーズを持つユーザーがいます。JavaScriptを使用する際には、これらのユーザーが情報を取得し、操作できるように配慮することが重要です。

アクセシビリティ対応は、倫理的な責任であるだけでなく、SEO対策にもつながります。アクセシブルなウェブサイトは、検索エンジンにとってもクロールしやすく、評価が高くなる傾向があります。

WAI-ARIAの基礎

WAI-ARIA（Web Accessibility Initiative – Accessible Rich Internet Applications）は、動的なウェブコンテンツやリッチインターネットアプリケーション（RIA）のアクセシビリティを向上させるための仕様です。JavaScriptを使用して要素の役割、状態、プロパティを定義し、支援技術（スクリーンリーダーなど）に伝えることができます。

WAI-ARIAの主要な概念は、ロール（role）、プロパティ（property）、ステート（state）です。

ロール（role）は、要素の目的や種類を定義します。例えば、role="button"は要素がボタンであることを示します。

プロパティ（property）は、要素に関する追加情報を提供します。例えば、aria-label="閉じる"は要素のラベルを提供します。

ステート（state）は、要素の現在の状態を示します。例えば、aria-expanded="true"は要素が展開されていることを示します。

<button role="button" aria-label="閉じる" aria-expanded="false">×</button>

キーボードアクセシビリティ

キーボードのみでウェブサイトを操作できることは、運動障碍者やスクリーンリーダーを使用する視覚障碍者にとって非常に重要です。JavaScriptを使用して、キーボード操作を適切に処理するようにしましょう。

特に、カスタムのインタラクティブな要素（例えば、JavaScriptで作成したカスタムボタンやメニュー）には、キーボードフォーカスを適切に設定し、Tabキーでの移動を可能にする必要があります。

const button = document.getElementById('myButton');
button.addEventListener('keydown', (event) => {
  if (event.key === 'Enter' || event.key === ' ') {
    // ボタンのクリック処理
    button.click();
    event.preventDefault(); // デフォルトのスクロールを防ぐ
  }
});

上記の例では、EnterキーまたはSpaceキーが押されたときにボタンがクリックされるように設定しています。

フォーカスの管理

フォーカスは、現在キーボード操作を受け付ける要素を示すものです。JavaScriptを使用して、フォーカスを適切に管理することで、キーボードユーザーがウェブサイトをスムーズに操作できるようになります。

フォーカスを移動させるには、focus()メソッドを使用します。例えば、ダイアログを開いたときに、ダイアログ内の最初の要素にフォーカスを移動させることができます。

const dialog = document.getElementById('myDialog');
const firstFocusableElement = dialog.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');

dialog.addEventListener('shown.bs.modal', () => {
  firstFocusableElement.focus();
});

上記の例では、Bootstrapのモーダルが開かれたときに、モーダル内の最初のフォーカス可能な要素にフォーカスを移動させています。

アクセシブルなフォーム

フォームは、ユーザーが情報を入力するための重要な要素です。アクセシブルなフォームを作成するには、次の点に注意する必要があります。

各入力フィールドには、<label>要素を使用してラベルを関連付けます。これにより、スクリーンリーダーは入力フィールドの目的をユーザーに伝えることができます。

エラーメッセージは、視覚的にだけでなく、テキストとしても提供します。aria-describedby属性を使用して、エラーメッセージと入力フィールドを関連付けます。

<label for="name">名前:</label>
<input type="text" id="name" name="name" aria-describedby="name-error">
<span id="name-error" class="error-message">名前を入力してください。</span>

上記の例では、aria-describedby属性を使用して、入力フィールドとエラーメッセージを関連付けています。

参考リンク

まとめ

JavaScriptのアクセシビリティ対応は、ウェブサイトをより多くの人々に利用可能にするために不可欠です。WAI-ARIA、キーボードアクセシビリティ、フォーカスの管理、アクセシブルなフォームなどの基本的な知識を習得し、実践することで、アクセシブルなウェブサイトを構築することができます。アクセシビリティを考慮した開発は、ユーザーエクスペリエンスの向上だけでなく、SEO対策にもつながることを忘れないでください。