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.   https://youtu.be/JKHAjYJ5T2o?embedable=true  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   aus dem   ziemlich einfach. cdkTrapFocus A11yModule  Die Angular   Direktive cdkTrapFocus  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   hinzu. Um es nutzen zu können, müssen wir zunächst das   importieren. cdkTrapFocus A11yModule  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   Direktive ist eine davon. cdkTrapFocus  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   Direktive verfügt über eine integrierte Autofokus-Funktion. Wir können     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. cdkTrapFocus cdkTrapFocusAutoCapture @Input   <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   +   drücken, um rückwärts zu navigieren, gehen wir in umgekehrter Reihenfolge vor, ohne das Modal zu verlassen.  shift tab  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.   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

Dieses Audio ist in der Originalsprache der Geschichte produziert!

So verwenden Sie die Angular CDK Trap Focus-Direktive

About Author

KOMMENTARE

Hängeetiketten

DIESER ARTIKEL WURDE VORGESTELLT IN

Related Stories

This Black Friday & Holiday Season, HackerNoon Has Your Tech Marketing Covered 🎁 💚

HackerNoon Decoded 2024: Wir feiern die Community unserer Technologieunternehmen!

HackerNoon Decoded 2024: Celebrating Our Management Community!

Starting 2025 with New Features: Settings Dashboard, HackerNoon Decoded, Updated Search UI, and More

This Black Friday & Holiday Season, HackerNoon Has Your Tech Marketing Covered 🎁 💚

HackerNoon Decoded 2024: Wir feiern die Community unserer Technologieunternehmen!

HackerNoon Decoded 2024: Celebrating Our Management Community!

Starting 2025 with New Features: Settings Dashboard, HackerNoon Decoded, Updated Search UI, and More

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps