JavaScript

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

JavaScript のこのような使用（または過剰使用）は、大量のコードによる長い読み込み時間、セマンティックでない HTML 要素の使用、JavaScript による HTML と CSS のインジェクションなど、多くの懸念すべき傾向をもたらしました。また、これらの各要素にユーザー補助がどのように適合するかが不明な場合もあります。

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

トリガー イベント

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

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

すべきでないこと
<div role="button" tabindex="0" onclick="doAction()">Click me!</div>
すべきこと
<button onclick="doAction()">Click me!</button>

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

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

ページタイトル

ドキュメント モジュールで学んだように、ページのタイトルはスクリーン リーダーのユーザーにとって不可欠です。ユーザーが現在どのページにいて、新しいページに移動したかどうかをユーザーに伝えます。

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

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

動的コンテンツ

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

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

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

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

CSS は、setAttribute を使用して同様の方法で適用できます。

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

大きな力には大きな責任が伴います。残念ながら、HTML と CSS の JavaScript 挿入は、アクセスできないコンテンツを作成するために誤用されてきました。よくある不正使用を以下に示します。

不正使用の可能性 正しい使用方法
セマンティックでない HTML の大きなチャンクをレンダリングする セマンティック HTML の小さな部分をレンダリングする
支援技術が動的コンテンツを認識する時間を与えていない setTimeout() 時間遅延を使用して、ユーザーがメッセージをすべて聞くことができるようにする
onFocus() のスタイル属性を動的に適用する CSS スタイルシート内の関連する要素に :focus を使用します。
インライン スタイルを適用すると、ユーザー スタイルシートが正しく読み込まれない テーマの一貫性を保つために、スタイルを CSS ファイルに保持する
非常に大きな JavaScript ファイルを作成し、サイト全体のパフォーマンスを低下させる JavaScript の使用量を減らす。CSS で同様の機能（アニメーションや固定ナビゲーションなど）を実行できる場合、解析が速く、パフォーマンスが向上します。

CSS の場合は、インライン スタイルを追加するのではなく、CSS クラスを切り替えます。これにより、再利用と簡素化が可能になります。ページの非表示コンテンツと切り替えクラスを使用して、動的 HTML のコンテンツを非表示または表示します。JavaScript を使用してページにコンテンツを動的に追加する必要がある場合は、シンプルで簡潔に、そしてもちろんアクセスできるようにします。

フォーカス管理

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

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

コンポーネント レベル

コンポーネントのフォーカスが適切に管理されていない場合は、キーボード トラップを作成できます。キーボード トラップは、キーボードのみのユーザーがコンポーネントから抜け出せなくなった場合や、フォーカスが維持されるべきときに維持されない場合などに発生します。

ユーザーがフォーカス管理の問題に直面する最も一般的なパターンの 1 つは、モーダル コンポーネントです。キーボードのみのユーザーがモーダルに出くわした場合、モーダルの操作可能な要素間をタブで移動できるようにする必要がありますが、モーダルを明示的に閉じることなくモーダルの外部に移動できるようにしてはいけません。このフォーカスを適切にトラップするには JavaScript が必要です。

すべきでないこと
すべきこと

ページレベル

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

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

これを行うには、複数の方法があります。

  • aria-live 通知でメインコンテナにフォーカスを配置します。
  • メイン コンテンツにスキップするリンクにフォーカスを戻します。
  • 新しいページの最上位の見出しにフォーカスを移動します。

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

状態管理

JavaScript がユーザー補助にとって重要なもう 1 つの領域は、状態管理です。つまり、コンポーネントまたはページの現在の視覚状態が、ロービジョン、盲目、またはろう盲のユーザー補助技術のユーザーに伝えられる場合です。

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

コンポーネント レベル

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

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

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

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

ページレベル

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

これまで、JavaScript は動的であるため、aria-live やアラート領域でコンテンツを通知するのが困難でした。DOM にコンテンツを非同期で追加すると、AT がリージョンを検出して通知するのが難しくなります。コンテンツを適切に読み取るには、読み込み時に Live Region またはアラート領域が DOM に存在している必要があります。そうすれば、テキストを動的にスワップアウトできます。

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

一般的な JavaScript フレームワークのライブパッケージは次のとおりです。

最新の JavaScript は、ウェブ デベロッパーが堅牢なウェブ アプリケーションを作成できる強力な言語です。これにより、オーバーエンジニアリングにつながり、拡張によってアクセスできないパターンが生じることがあります。このモジュールの JavaScript パターンとヒントに沿ってアプリを作成すると、すべてのユーザーがアプリを簡単に利用できるようになります。

理解度を確認する

JavaScript に関する知識をテストする

JavaScript で要素のスタイルを変更する場合、次のうちどの方法が最適ですか。

JavaScript を使用して、HTML 要素内に直接動的スタイルを適用します。
これにより、JavaScript ファイルが肥大化し、非効率になります。
JavaScript を使用して要素のクラスを切り替え、CSS スタイルシートにスタイルを追加します。
スタイルは CSS スタイルシートに残し、軽量な JavaScript を使用してクラス名を変更します。

すべての JavaScript アクションでキーボード ユーザーをサポートできますか？

はい。ただし、追加の作業が必要になる場合があります。
セマンティック HTML はデフォルトでキーボード ユーザーをサポートしていますが、アクションを含むセマンティック以外の要素には追加の JavaScript が必要です。
はい。すべてのアクションは、キーボード ユーザーを自動的にサポートします。
キーボードのフォーカスを自動的にサポートするのは、セマンティック HTML のみです。
いいえ。キーボード ユーザーをサポートできるのは、セマンティック HTML を使用した場合のみです。
すべての HTML 要素は、キーボード ユーザーをサポートできます。