JavaScript

JavaScript は作成するほぼすべてのものにおいて重要な役割を果たします。 JavaScript フレームワーク上で実行される完全なプロダクトに React または Angular です。

JavaScript のこうした使用（または過剰使用）により、憂慮すべきトレンドが数多く発生しています。 たとえばコードの量が多いために読み込みに時間がかかる、セマンティックでない HTML 要素を使用している、 JavaScript を介した HTML と CSS の挿入などのオプションがあります。また、 各要素にアクセシビリティが どのように当てはまるのかがわかっていません

JavaScript はサイトのアクセシビリティに大きな影響を与えます。この このモジュールでは、ユーザー補助機能の汎用的なパターンと、 テクノロジーや、アクセシビリティの問題に対する解決策が 実装する方法を学びました

トリガー イベント

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

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

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

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

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

ページタイトル

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

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

SPA の場合、document.title には、 手動で追加することも、ヘルパー パッケージを使用して追加することもできます（ あります。このたび、 更新されたページタイトル 追加の作業が必要になることがありますが、 動的コンテンツなどのオプションがあります

動的コンテンツ

JavaScript の最も強力な機能の 1 つは、HTML を追加できることです。 ページ上の任意の要素に適用します開発者は動的アプリケーションを作成可能 基づいて予測を行います

たとえば、ユーザーがウェブサイトにログインしたときにメッセージを送信する必要があるとします できます。白い背景から目立たせ、中身が伝わるように 「You are now signed in.」というメッセージが表示されます。

innerHTML 要素を使用できます。 次のように設定します。

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

同様の方法で CSS を適用するには、 setAttribute:

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

優れたパワーには大きな責任が伴います。残念ながら、JavaScript は HTML と CSS のインジェクションは、アクセス不能なコンテンツを作成するために悪用されてきました。 説明します。よくある誤りを次にいくつか示します。

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

CSS では、インライン スタイルを追加する代わりに CSS クラスを切り替えます。これは、 再利用性と簡素化が実現します。ページ上の非表示コンテンツを使用する。 クラスを切り替えて、ダイナミック HTML のコンテンツの表示と非表示を切り替えます。kubectl の を使用してページにコンテンツを動的に追加する場合は、 簡潔に、そしてもちろんアクセスしやすいものにします。

フォーカス管理

キーボード フォーカス モジュールでは、フォーカスについて学習しました。 表示スタイルを設定できます。フォーカス管理は、いつどこでトラップすべきかを知ること 捕捉すべきでないタイミングを見極めます

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

コンポーネント レベル

コンポーネントのフォーカスが適切に管理されていない場合に、キーボード トラップを作成できます。 キーボード トラップは、キーボードのみのユーザーが操作不能になった場合に発生します。 適切なときにフォーカスが維持されません。

フォーカス管理の問題が発生する最も一般的なパターンの一つ モーダル コンポーネントに含まれています。キーボードのみを使用しているユーザーにモーダルが表示されると、 モーダルのアクション可能な要素間を タブで移動できますが 明示的に閉じない限り、モーダル外では許可しないでください。 JavaScript は、こうした注目点を適切に取り除くために欠かせません。

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

ページレベル

ユーザーがページ間を移動するときもフォーカスを維持する必要があります。これは、 特に SPA では ブラウザが更新されない すべてのコンテンツが動的に変化しますユーザーがリンクをクリックしてアクセスしたとき アプリ内の別のページに移動する場合、フォーカスは 完全に別の場所に移動することも考えられます

ページ間の移行（またはルーティング）を行う際、開発チームは ページの読み込み時にフォーカスが当たる場所

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

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

どこに焦点を当てるかは、使用しているフレームワークによって異なります ユーザーに配信したいコンテンツを指定しますコンテキストや アクションに依存します。

状態管理

JavaScript がユーザー補助にとって重要となるもう一つの領域は、状態管理です。 コンポーネントやページの現在の表示状態がロービジョン、目の見えない方、または聴覚障がいのあるユーザーの支援技術のユーザーに伝えられるとき。

多くの場合、コンポーネントやページの状態は ARIA 属性で管理されます。 ARIA と HTML のモジュールで紹介しました。 ここでは、一般的な ARIA 属性のタイプをいくつか確認しておきましょう。 要素の状態を管理します。

コンポーネント レベル

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

たとえば、 aria-expanded 属性を使用して、プルダウン メニューまたはリストが展開されたか、または 閉じています。

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

ARIA 属性を適用する際は選択することが重要です。まず、 ユーザーフローを把握して、ユーザーに伝えたい重要な情報を把握します。

ページレベル

デベロッパーは多くの場合、サーバー モジュールと呼ばれる、視覚的に隠れた領域を ARIA ライブ リージョン 画面上での変更を通知し、支援技術にアラート メッセージを送ります。 （AT）のユーザーに限られます。この領域を JavaScript と組み合わせることで、 ページ全体を再読み込みすることなく、

これまで JavaScript は、HTML、CSS、JavaScript などの aria-live その動的な性質から、アラートの範囲を定めています。コンテンツを AT が地域を選択して通知することが困難になります。 コンテンツを正しく読み上げるには、ライブまたはアラートの領域が 場合、テキストは動的にスワップアウトできます。

JavaScript フレームワークを使用している場合、幸いなことに、ほとんどのフレームワークに "ライブ アナウンサー"すべての作業が自動的に行われ アクセスできるようにします。ライブ リージョンの作成やトランザクションの処理について すべてのコンポーネントが接続されます。

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

最新の JavaScript は、ウェブ デベロッパーが独自の 構築できますその結果 オーバーエンジニアリングが発生し アクセスできないパターンですJavaScript のパターンとヒントに従う このモジュールで学ぶ内容は、すべてのユーザーがアプリを利用しやすくする方法です。

理解度をチェックする

JavaScript の知識をテストする

JavaScript を使用して要素のスタイルを変更する最適な方法はどれですか。

JavaScript を使用して、HTML 要素内にダイナミック スタイルを直接適用します。
その結果、JavaScript ファイルが肥大化して非効率的になります。
JavaScript を使用して要素のクラスを切り替え、スタイルを CSS スタイルシートに追加します。
CSS スタイルシートのスタイルを維持し、軽量の JavaScript を使用してクラス名を変更します。

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

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