フォーカス トラップは、Web アプリケーション内の非常に重要なアクセシビリティ機能です。この投稿では、最初にそれが何であるかを理解し、次にそれが重要である理由を説明し、最後に、必要に応じて Angular アプリ内でこの概念を迅速かつ簡単に追加する方法を示します。そして、Angular CDK のおかげで、それは非常に簡単です。さて、それでは始めましょう。   https://youtu.be/JKHAjYJ5T2o?embedable=true さまざまなデバイスで Web を簡単に見たり聞いたり使用したりできる人にとって、アクセシビリティは理解するのが少し難しく、考えることさえ難しい場合があります。できません。 フォーカストラップとは何ですか? フォーカス トラップは、こうした人々のエクスペリエンスを向上させるのに役立つ機能です。これは、特定のコンテナ内でのユーザーのフォーカスを管理する方法です。 たとえば、モーダルを考えてみましょう。ユーザーがフォーカスを管理せずにモーダルを開いた場合、Tab キーを使用してキーボードでナビゲーションを開始すると、モーダルの背後にある項目がフォーカスを受け取り続けます。これは奇妙であり、ユーザーが期待するものではありませんよね?プログラムでモーダル内でそれらに焦点を当てる必要があります。 しかし、これでは十分ではありません。ここで停止すると、モーダル内をタブで移動することになり、最終的にはフォーカス可能な項目をすべてタブで移動してから、再びモーダルの背後にある元のドキュメント内でフォーカスのある項目に戻ることになります。 代わりに行う必要があるのは、ユーザーがモーダル内の最後の項目にフォーカスしたときに、次のタブのモーダル内の最初のフォーカス可能な要素にフォーカスが戻るようにフォーカスをトラップすることです。 さて、フォーカス トラップが何であるかがわかったので、おそらくこの機能を作成するにはある程度の努力が必要であることを認識し始めているのではないでしょうか? まあ、Angular 内ではありません。 CDK では、  の ディレクティブを使用すると、これは非常に簡単です。 A11yModule cdkTrapFocus  Angular  ディレクティブ cdkTrapFocus 例を見てみましょう。ここには、Vans シューズ ブランドの Web アプリがあります。  上部にはサインアップボタンがあります。これをクリックしてタブで移動すると、背景の項目の周囲にフォーカスが移動していることがわかります。  私たちが望んでいることではありませんよね？ さて、  を追加しましょう。これを使用するために最初に行う必要があるのは、  をインポートする必要があることです。 cdkTrapFocus A11yModule サインアップモーダル.component.ts   import { A11yModule } from '@angular/cdk/a11y'; @Component({ selector: 'app-sign-up-modal', ... imports: [A11yModule] }) export class SignUpModalComponent { } この頭字語に馴染みのない方のために説明しておくと、Ally はアクセシビリティという言葉の略語です。これは、単語が A で始まり Y で終わり、その間に 11 文字があるという概念に由来しています。   Angular CDK には、そのアクセシビリティ モジュール内にいくつかのアクセシビリティ機能があり、  ディレクティブはその 1 つです。 cdkTrapFocus したがって、インポートしたら、テンプレート内で使用できるようになります。フォームをラップする要素にそれを追加するだけです。 サインアップモーダル.component.html     <div cdkTrapFocus> <app-sign-up-form (formSubmitted)="modalClose.emit()"></app-sign-up-form> ... </div>     を使用して初期化に重点を置く cdkTrapFocusAutoCapture @Input 良いニュースです。  ディレクティブには自動フォーカス機能が組み込まれています。    を使用できます。この入力は、初期化時にディレクティブ内の最初のフォーカス可能な項目に自動的にフォーカスします。デフォルトは false なので、値 true を指定する必要があります。 cdkTrapFocus cdkTrapFocusAutoCapture @Input   <div cdkTrapFocus [cdkTrapFocusAutoCapture]="true"> <app-sign-up-form (formSubmitted)="modalClose.emit()"></app-sign-up-form> ... </div> これで、モーダルを開くと、名前フィールドが開いたときに適切にフォーカスされます。そして、タブを移動して閉じるボタンに到達すると、名前フィールドに戻ります。また、   +  押して後方に移動すると、モーダルを離れることなくすべて逆の順序で移動します。  shift tab したがって、すべてのユーザーにとって非常に役立つだけでなく、実装も非常に簡単です。 最後に注意すべき点は、トラップ フォーカス ディレクティブは、初期化前に最後にフォーカスされた要素を追跡するため、モーダルを閉じると、モーダルを開いたボタンにフォーカスが戻ることです。 いいですね、大量の作業を節約し、モーダルをよりアクセスしやすくしました。 実際の動作を見てみたいですか? 以下の stackblitz の例で、デモ コードとこれらのテクニックの例を確認してください。ご質問やご意見がございましたら、お気軽にコメントを残してください。   https://stackblitz.com/edit/stackblitz-starters-2bznzs?embed=1&file=src%2Fsign-up-modal%2Fsign-up-modal.component.html&embedable=true

Buy Me a Coffee

このオーディオは、ストーリーの元の言語で制作されています。

長すぎる; 読むには

Make resilience your competitive advantage

Angular CDK トラップフォーカスディレクティブの使用方法

About Author

コメント

ラベル

この記事は

Related Stories

海を航海する: データレイクを使用した本番環境レベルの RAG アプリケーションの開発

ワークフローを10倍に向上させる方法: 必須アプリ17選

暗号通貨の成長: 効果的なユーザーペルソナの作成

フロキのヴァルハラがインドのスリランカツアーのアソシエイトスポンサーに加わる

海を航海する: データレイクを使用した本番環境レベルの RAG アプリケーションの開発

ワークフローを10倍に向上させる方法: 必須アプリ17選

暗号通貨の成長: 効果的なユーザーペルソナの作成

フロキのヴァルハラがインドのスリランカツアーのアソシエイトスポンサーに加わる

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps

Angular CDK トラップ フォーカス ディレクティブの使用方法