JavaScript は、小さな動的コンポーネントから、React や Angular などの JavaScript フレームワークで実行される完全なプロダクトまで、私たちが作成するほとんどのものにおいて大きな役割を果たします。
こうした JavaScript の使用（または過剰使用）により、大量のコードによる読み込み時間の長い、非セマンティック HTML 要素の使用、JavaScript を介した HTML や CSS の挿入など、多くの憂慮すべき傾向が生まれています。こうした要素にそれぞれどのようにユーザー補助機能が適合するか理解できていないのではないでしょうか。
JavaScript は、サイトのアクセシビリティに大きく影響します。このモジュールでは、JavaScript によって強化されるユーザー補助の一般的なパターンと、JavaScript フレームワークの使用によって生じるユーザー補助の問題の解決方法について説明します。
トリガー イベント
JavaScript イベントを使用すると、ユーザーはウェブ コンテンツを操作したり、特定のアクションを実行したりできます。スクリーン リーダーのユーザー、細かい運動障がいのあるユーザー、マウスやトラックパッドを持たないユーザーなど、多くのユーザーがウェブの操作にキーボード サポートを利用しています。JavaScript アクションは上記のユーザーに影響するため、キーボード サポートを追加することが非常に重要です。
クリック イベントを見てみましょう。onClick() イベントを <button> や <a> などのセマンティック HTML 要素で使用すると、当然ながら、マウス機能とキーボード機能の両方が含まれます。ただし、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 logged in</p>';
setAttribute を使用して、同様の方法で CSS を適用できます。
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 を使用してページにコンテンツを動的に追加する必要がある場合は、シンプルかつ簡潔で、もちろんアクセスしやすいものにしてください。
フォーカス管理
キーボード フォーカス モジュールでは、フォーカスの順序とインジケーターのスタイルについて説明しました。フォーカス管理とは、フォーカスをいつどこでトラップすべきか、いつトラップすべきでないかを認識することです。
キーボードのみを使用するユーザーにとって、フォーカスの管理は不可欠です。
コンポーネント レベル
コンポーネントのフォーカスが適切に管理されていない場合は、キーボード トラップを作成できます。キーボード トラップは、キーボードのみのユーザーがコンポーネントから先に進まない場合、またはフォーカスが維持されるはずのときに維持されない場合に発生します。
フォーカス管理で問題が発生する最も一般的なパターンの一つは、モーダル コンポーネントです。キーボードのみを使用するユーザーがモーダルにアクセスしたとき、モーダルのアクション可能な要素を Tab キーで移動できるようにする必要がありますが、モーダルを明示的に閉じずにモーダルの外で移動できるようにしないでください。 JavaScript は、このフォーカスを適切にトラップするために不可欠です。
ページレベル
ユーザーがページ間を移動するときもフォーカスを維持する必要があります。これは、ブラウザの更新を行わず、すべてのコンテンツが動的に変更される SPA で特に当てはまります。ユーザーがリンクをクリックしてアプリ内の別のページに移動するたびに、フォーカスは同じ場所にあるか、まったく別の場所に配置される可能性があります。
ページ間（ルーティング）間を移動する際、開発チームはページの読み込み時にフォーカスする位置を決定する必要があります。
これを実現するには、次のような方法があります。
aria-liveの通知を表示して、メインコンテナにフォーカスします。- リンクにフォーカスを戻すと、メイン コンテンツにスキップできます。
- 新しいページの最上位の見出しにフォーカスを移動します。
フォーカスをどこに配置するかは、使用するフレームワークとユーザーに提供するコンテンツによって異なります。コンテキストやアクションに依存する場合があります。
状態管理
JavaScript がユーザー補助に不可欠なもう一つの領域は、状態管理です。つまり、コンポーネントまたはページの現在の表示状態が、ロービジョン、目の見えない、または目の見えない補助技術のユーザーに中継されるケースです。
多くの場合、コンポーネントやページの状態は、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 と react-a11y-announcer
- Angular:
LiveAnnouncer - ビュー: vue-a11y-utils
最新の JavaScript は、ウェブ デベロッパーが堅牢なウェブ アプリケーションを作成できるようにする強力な言語です。これは、過剰なエンジニアリング、ひいてはアクセス不能なパターンにつながる可能性があります。このモジュールで紹介した JavaScript のパターンとヒントを参考にすることで、すべてのユーザーがアプリを利用しやすくなります。
理解度チェック
JavaScript の知識をテストする
JavaScript で要素のスタイルを変更する最適な方法は、次のうちどれですか。
すべての JavaScript 操作でキーボード ユーザーがサポートされますか？