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

フォーカス トラップは、Web アプリケーション内の非常に重要なアクセシビリティ機能です。この投稿では、最初にそれが何であるかを理解し、次にそれが重要である理由を説明し、最後に、必要に応じて Angular アプリ内でこの概念を迅速かつ簡単に追加する方法を示します。そして、Angular CDK のおかげで、それは非常に簡単です。さて、それでは始めましょう。

さまざまなデバイスで 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 には、そのアクセシビリティ モジュール内にいくつかのアクセシビリティ機能があり、 cdkTrapFocusディレクティブはその 1 つです。

したがって、インポートしたら、テンプレート内で使用できるようになります。フォームをラップする要素にそれを追加するだけです。

サインアップモーダル.component.html

 <div cdkTrapFocus> <app-sign-up-form (formSubmitted)="modalClose.emit()"></app-sign-up-form> ... </div> 

cdkTrapFocusAutoCapture @Inputを使用して初期化に重点を置く

良いニュースです。 cdkTrapFocusディレクティブには自動フォーカス機能が組み込まれています。 cdkTrapFocusAutoCapture @Inputを使用できます。この入力は、初期化時にディレクティブ内の最初のフォーカス可能な項目に自動的にフォーカスします。デフォルトは false なので、値 true を指定する必要があります。

 <div cdkTrapFocus [cdkTrapFocusAutoCapture]="true"> <app-sign-up-form (formSubmitted)="modalClose.emit()"></app-sign-up-form> ... </div>

これで、モーダルを開くと、名前フィールドが開いたときに適切にフォーカスされます。そして、タブを移動して閉じるボタンに到達すると、名前フィールドに戻ります。また、 shift + tab押して後方に移動すると、モーダルを離れることなくすべて逆の順序で移動します。

したがって、すべてのユーザーにとって非常に役立つだけでなく、実装も非常に簡単です。

最後に注意すべき点は、トラップ フォーカス ディレクティブは、初期化前に最後にフォーカスされた要素を追跡するため、モーダルを閉じると、モーダルを開いたボタンにフォーカスが戻ることです。

いいですね、大量の作業を節約し、モーダルをよりアクセスしやすくしました。

実際の動作を見てみたいですか?

以下の stackblitz の例で、デモ コードとこれらのテクニックの例を確認してください。ご質問やご意見がございましたら、お気軽にコメントを残してください。