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 の最も強力な機能の 1 つは、ページ上の任意の要素に 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 属性で管理されます。詳しくは ARIA と HTML のモジュールをご覧ください。要素の状態を管理するために使用される 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 要素は、キーボード ユーザーをサポートできます。