JavaScript

JavaScript は、小さな動的コンポーネントから React や Angular などの JavaScript フレームワークで実行される完全なプロダクトまで、作成するほぼすべてのものに重要な役割を果たします。

JavaScript の使用（または過剰な使用）により、大量のコードによる読み込み時間の長さ、セマンティックでない HTML 要素の使用、JavaScript による HTML と CSS の挿入など、多くの懸念すべき傾向が生じています。また、アクセシビリティがこれらの各要素にどのように適合するかを確信できない場合もあります。

JavaScript はサイトのアクセシビリティに大きな影響を与える可能性があります。このモジュールでは、JavaScript によって強化されたアクセシビリティの一般的なパターンと、JavaScript フレームワークの使用によって発生するアクセシビリティの問題の解決策について説明します。

トリガー イベント

JavaScript イベントを使用すると、ユーザーはウェブ コンテンツを操作して特定のアクションを実行できます。スクリーン リーダーのユーザー、細かい運動能力に障がいのあるユーザー、マウスやトラックパッドを使用できないユーザーなど、多くの人がキーボード サポートを利用してウェブを操作しています。JavaScript アクションにキーボード サポートを追加することは、これらのすべてのユーザーに影響するため、非常に重要です。

クリック イベントを見てみましょう。 onClick() イベントを <button> や <a> などのセマンティック HTML 要素で使用すると、マウスとキーボードの両方の機能が自然に含まれます。ただし、 汎用的な <div> などのセマンティックでない要素に onClick() イベント を追加しても、キーボード機能は自動的に適用されません。

<div role="button" tabindex="0" onclick="doAction()">Click me!</div>

<button onclick="doAction()">Click me!</button>

CodePen でこの比較をプレビューします。

トリガー イベントにセマンティックでない要素を使用する場合は、 keydown/keyup イベント を追加して、Enter キーまたは Space キーの押下を検出する必要があります。セマンティックでない要素へのトリガー イベントの追加は忘れられがちです。残念ながら、忘れてしまうと、マウスでのみアクセスできるコンポーネントになってしまいます。キーボードのみを使用するユーザーは、関連するアクションにアクセスできなくなります。

ページタイトル

ドキュメント モジュールで説明したように、ページタイトルはスクリーンリーダーのユーザーにとって不可欠です。ユーザーは、どのページにアクセスしているか、新しいページに移動したかどうかを確認できます。

JavaScript フレームワークを使用する場合は、ページのタイトルの処理方法を検討する必要があります。これは、単一のindex.html ファイルから読み込まれる シングルページ アプリ（SPA）では特に重要です。遷移やルート（ページの 変更）ではページの再読み込みが行われないためです。ユーザーが SPA で新しいページを読み込むたびに、デフォルトではタイトルは変更されません。

SPA の場合、document.title の値は手動で追加することも、ヘルパー パッケージを使用して追加することもできます（ JavaScript フレームワークによって異なります）。更新されたページタイトルをスクリーンリーダーのユーザーに通知するには、追加の作業が必要になる場合がありますが、 動的コンテンツなどのオプションがあります。

動的コンテンツ

JavaScript の最も強力な機能の 1 つは、ページ上の任意の要素に HTML と CSS を追加できることです。デベロッパーは、ユーザーのアクションや動作に基づいて動的なアプリケーションを作成できます。

ウェブサイトやアプリにログインしたときに、ユーザーにメッセージを送信する必要があるとします。メッセージを白い背景から目立たせ、「ログインしました」というメッセージを伝えたいとします。

要素 innerHTML を使用してコンテンツを設定できます。

document.querySelector("#banner").innerHTML = '<p>You are now signed in</p>';

同様に、 setAttribute を使用して CSS を適用できます。

document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");

力には責任が伴います。残念ながら、HTML と CSS の JavaScript インジェクションは、アクセシビリティの低いコンテンツを作成するために誤用されてきました。一般的な誤用を以下に示します。

CSS の場合は、インライン スタイルを追加するのではなく、CSS クラスを切り替えます。これにより、再利用性とシンプルさが実現します。ページ上の隠しコンテンツを使用し、クラスを切り替えて動的 HTML のコンテンツの表示と非表示を切り替えます。JavaScript を使用してページに動的にコンテンツを追加する必要がある場合は、シンプルで簡潔なものにし、アクセシビリティを確保してください。

フォーカス管理

キーボード フォーカス モジュールでは、フォーカス 順序とインジケーター スタイルについて説明しました。フォーカス管理とは、フォーカスをトラップするタイミングと場所、トラップしないタイミングを把握することです。

フォーカス管理は、キーボードのみを使用するユーザーにとって非常に重要です。

コンポーネント レベル

コンポーネントのフォーカスが適切に管理されていない場合、キーボード トラップを作成できます。 キーボード トラップは、キーボードのみを使用するユーザーがコンポーネントでスタックした場合、またはフォーカスを維持する必要がある場合に維持されない場合に発生します。

ユーザーがフォーカス管理の問題を経験する最も一般的なパターンの 1 つは、モーダルコンポーネントです。キーボードのみを使用するユーザーがモーダルに遭遇した場合、モーダルの操作可能な要素間をタブで移動できますが、明示的に閉じるまでモーダルの外に出ることはできません。 このフォーカスを適切にトラップするには、JavaScript が不可欠です。

ページレベル

ユーザーがページ間を移動する際にも、フォーカスを維持する必要があります。これは、ブラウザの更新がなく、すべてのコンテンツが動的に変更される SPA では特に当てはまります。ユーザーがリンクをクリックしてアプリケーション内の別のページに移動すると、フォーカスは同じ場所に保持されるか、まったく別の場所に配置されます。

ページ間の遷移（またはルーティング）を行う場合、ページが読み込まれたときにフォーカスをどこに移動するかを開発チームが決定する必要があります。

これを実現するには、複数の方法があります。

• aria-live アナウンスを使用して、メイン コンテナにフォーカスを移動します。
• フォーカスをリンクに戻して、メイン コンテンツにスキップします。
• フォーカスを新しいページの最上位の見出しに移動します。

フォーカスをどこに配置するかは、使用しているフレームワークと、ユーザーに提供するコンテンツによって異なります。コンテキストやアクションによって異なる場合があります。

状態管理

JavaScript がアクセシビリティに不可欠なもう 1 つの領域は、状態管理です。コンポーネントまたはページの現在の視覚的な状態が、ロービジョン、全盲、聴覚障害のある支援技術のユーザーに伝達される場合です。

多くの場合、コンポーネントまたはページの状態は、ARIA と HTML モジュールで説明したように、ARIA 属性を使用して管理されます。要素の状態の管理に使用される最も一般的な ARIA 属性のいくつかを確認しましょう。

コンポーネント レベル

ページ コンテンツとユーザーが必要とする情報に応じて、コンポーネントに関する情報をユーザーに伝える際に考慮すべき ARIA の状態は 多数あります。

たとえば、 aria-expanded 属性を使用して、プルダウン メニューまたはリストが展開されているか 折りたたまれているかをユーザーに伝えることができます。

または、aria-pressed を使用して、ボタンが押されたことを示すこともできます。

ARIA 属性を適用する際は、選択的に行うことが重要です。ユーザー フローを検討して、ユーザーに伝えるべき重要な情報を把握します。

ページレベル

デベロッパーは、 ARIA ライブ リージョン と呼ばれる視覚的に非表示の領域を使用して、画面上の変更やアラート メッセージを支援技術 （AT）のユーザーに通知することがよくあります。この領域を JavaScript と組み合わせることで、ページ全体を再読み込みすることなく、ページに対する動的な変更をユーザーに通知できます。

これまで、JavaScript は動的な性質のため、コンテンツを aria-live とアラート領域に通知するのに苦労してきました。DOM に非同期でコンテンツを追加すると、AT が領域を取得して通知することが難しくなります。コンテンツを正しく読み取るには、読み込み時にライブ領域またはアラート領域が DOM に存在し、テキストを動的に入れ替える必要があります。

JavaScript フレームワークを使用している場合は、ほとんどすべてに「ライブ アナウンサー」パッケージがあり、すべての作業を自動的に行い、完全にアクセス可能であるため、心配する必要はありません。ライブ リージョンを作成して、前のセクションで説明した問題に対処する必要はありません。

一般的な JavaScript フレームワークのライブ パッケージをいくつか紹介します。

• React: react-aria-live and react-a11y-announcer
• Angular: LiveAnnouncer
• Vue: vue-a11y-utils

最新の JavaScript は、ウェブ デベロッパーが堅牢なウェブ アプリケーションを作成できる強力な言語です。これにより、過剰なエンジニアリングや、アクセシビリティの低いパターンが生じることがあります。このモジュールの JavaScript パターンとヒントに従うことで、すべてのユーザーがアプリにアクセスしやすくなります。