So verwenden Sie die Angular CDK Trap Focus-Direktive

Eine Fokusfalle ist eine sehr wichtige Barrierefreiheitsfunktion innerhalb einer Webanwendung. In diesem Beitrag helfe ich Ihnen zunächst zu verstehen, was es ist, erklärt dann, warum es wichtig ist, und zeige schließlich, wie Sie das Konzept bei Bedarf schnell und einfach in Ihre Angular-Apps integrieren können. Und dank des Angular CDK ist es ziemlich einfach. Okay, lasst uns loslegen.

Barrierefreiheit kann ein wenig schwer zu verstehen oder auch nur schwer zu bedenken sein, wenn Sie jemand sind, der das Internet problemlos sehen, hören und mit verschiedenen Geräten nutzen kann. Daher kann es auch leicht sein, Dinge zu erstellen, die für diejenigen, die das nicht so gut funktionieren, nicht gut funktionieren kippen.

Was ist eine Fokusfalle?

Eine Fokusfalle ist eine Funktion, die dazu beiträgt, die Erlebnisse für diese Leute zu verbessern. Dies ist eine Möglichkeit, den Benutzerfokus innerhalb eines bestimmten Containers zu verwalten.

Nehmen wir zum Beispiel ein Modal. Wenn ein Benutzer ein Modal öffnet, ohne den Fokus zu verwalten, erhalten Elemente hinter dem Modal weiterhin den Fokus, wenn er mit der Navigation über die Tastatur mithilfe der Tabulatortaste beginnt. Das ist seltsam und nicht das, was der Benutzer erwarten würde, oder? Wir müssen sie programmatisch innerhalb des Modals fokussieren.

Aber das ist nicht genug; Wenn wir hier aufhören und durch das Modal scrollen, blättern wir schließlich durch alle fokussierbaren Elemente und konzentrieren uns dann wieder auf Elemente im Originaldokument hinter dem Modal.

Was wir stattdessen tun müssen, ist, den Fokus einzufangen, sodass, wenn der Benutzer auf das letzte Element im Modal fokussiert, der Fokus wieder auf das erste fokussierbare Element im Modal auf der nächsten Registerkarte gelegt wird.

Ok, jetzt, da wir wissen, was eine Fokusfalle ist, beginnen wir wahrscheinlich zu begreifen, dass es einige Anstrengungen geben wird, diese Funktionalität zu schaffen, oder?

Nun ja, nicht innerhalb von Angular. Mit dem CDK ist dies mit der Direktive cdkTrapFocus aus dem A11yModule ziemlich einfach.

Die Angular cdkTrapFocus Direktive

Schauen wir uns ein Beispiel an. Hier haben wir eine Web-App für die Schuhmarke Vans.

Oben haben wir einen Anmelde-Button. Wenn wir darauf klicken und dann mit der Tabulatortaste herumfahren, können wir sehen, dass sich der Fokus um die Elemente im Hintergrund bewegt.

Nicht das, was wir wollen, oder?

Ok, fügen wir den cdkTrapFocus hinzu. Um es nutzen zu können, müssen wir zunächst das A11yModule importieren.

sign-up-modal.component.ts

 import { A11yModule } from '@angular/cdk/a11y'; @Component({ selector: 'app-sign-up-modal', ... imports: [A11yModule] }) export class SignUpModalComponent { }

Für diejenigen unter Ihnen, die mit diesem Akronym nicht vertraut sind: Ally ist eine Abkürzung für das Wort Barrierefreiheit. Es beruht auf dem Konzept, dass das Wort mit einem A beginnt, mit einem Y endet und dazwischen elf Zeichen stehen.

Das Angular CDK verfügt über mehrere Barrierefreiheitsfunktionen in seinem Barrierefreiheitsmodul, und die cdkTrapFocus Direktive ist eine davon.

Sobald wir es importiert haben, können wir es nun in der Vorlage verwenden. Wir müssen es nur einem Element hinzufügen, das unser Formular umschließt.

sign-up-modal.component.html

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

Bereitstellung eines Fokus auf die Initialisierung mit dem cdkTrapFocusAutoCapture @Input

Gute Nachrichten, die cdkTrapFocus Direktive verfügt über eine integrierte Autofokus-Funktion. Wir können cdkTrapFocusAutoCapture @Input verwenden. Diese Eingabe fokussiert automatisch das erste fokussierbare Element innerhalb der Direktive, wenn diese initialisiert wird. Der Standardwert ist „false“, daher müssen wir den Wert „true“ angeben.

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

Wenn wir nun das Modal öffnen, ist das Namensfeld beim Öffnen richtig fokussiert. Und wenn wir mit der Tabulatortaste die Schaltfläche „Schließen“ erreichen, kehren wir zum Namensfeld zurück. Wenn wir außerdem shift + tab drücken, um rückwärts zu navigieren, gehen wir in umgekehrter Reihenfolge vor, ohne das Modal zu verlassen.

Es ist also nicht nur super hilfreich für alle Benutzer, sondern auch super einfach zu implementieren.

Eine letzte Sache, die noch zu beachten ist: Die Trap-Focus-Direktive verfolgt das zuletzt fokussierte Element vor seiner Initialisierung. Wenn wir also das Modal schließen, wird der Fokus auf die Schaltfläche zurückgesetzt, die es geöffnet hat.

Schön, wir haben gerade eine Menge Arbeit gespart und unser Modal zugänglicher gemacht.

Möchten Sie es in Aktion sehen?

Schauen Sie sich den Democode und Beispiele dieser Techniken im Stackblitz-Beispiel unten an. Wenn Sie Fragen oder Gedanken haben, zögern Sie nicht, einen Kommentar zu hinterlassen.