Açısal CDK Tuzak Odak Direktifi Nasıl Kullanılır

Odak tuzağı, bir web uygulamasında çok önemli bir erişilebilirlik özelliğidir. Bu yazıda, önce bunun ne olduğunu, ardından neden önemli olduğunu anlamanıza yardımcı olacağım ve son olarak, konsepti Angular uygulamalarınıza ihtiyaç duyulan yere hızlı ve kolay bir şekilde nasıl ekleyeceğinizi göstereceğim. Ve Angular CDK sayesinde bu oldukça kolaydır. Tamam, hadi konuya geçelim.

Web'i farklı cihazlarla kolayca görebilen, duyabilen ve kullanabilen biriyseniz, erişilebilirliği anlamak ve hatta düşünmek biraz zor olabilir; bu nedenle, iyi çalışmayan şeyler oluşturmak da kolay olabilir. yapamamak.

Odaklanma Tuzağı Nedir?

Odaklanma tuzağı bu insan için deneyimleri daha iyi hale getirmeye yardımcı olan bir özelliktir. Belirli bir kapsayıcı içindeki kullanıcı odağını yönetmenin bir yoludur.

Örneğin bir modeli ele alalım. Kullanıcı odağı yönetmeden bir modu açarsa, sekme tuşunu kullanarak klavyede gezinmeye başladığında, modun arkasındaki öğeler odak almaya devam eder. Bu çok tuhaf ve kullanıcının bekleyeceği bir şey değil, değil mi? Bunları modal içinde programlı olarak odaklamamız gerekiyor.

Ancak bu yeterli değil; Burada durursak, kipte gezinirken, sonunda tüm odaklanılabilir öğelerin üzerinden geçeceğiz ve ardından, kipin arkasındaki orijinal belgedeki öğelere odaklanmaya geri döneceğiz.

Bunun yerine yapmamız gereken, odağı tuzağa düşürmek, böylece kullanıcı kipteki son öğeye odaklandığında, odak bir sonraki sekmede kipteki ilk odaklanılabilir öğeye geri yerleştirilecektir.

Tamam, artık odak tuzağının ne olduğunu bildiğimize göre, muhtemelen bu işlevselliği yaratmak için biraz çaba sarf edilmesi gerektiğinin farkına varmaya başlıyoruz, değil mi?

Angular'ın içinde değil. CDK ile bu, A11yModule cdkTrapFocus yönergesini kullanarak oldukça kolaydır.

Açısal cdkTrapFocus Yönergesi

Bir örneğe bakalım. Burada Vans ayakkabı markasına ait bir web uygulamamız var.

Üst kısımda kayıt ol butonumuz var. Tıkladığımızda ve ardından sekme oluşturduğumuzda, odağın arka plandaki öğelerin etrafında hareket ettiğini görebiliriz.

İstediğimiz bu değil, değil mi?

Tamam, cdkTrapFocus ekleyelim. Kullanmak için yapmamız gereken ilk şey A11yModule içe aktarmamız gerekiyor.

kayıt-modal.component.ts

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

Bu kısaltmaya aşina olmayanlar için Ally, erişilebilirlik kelimesinin kısaltmasıdır. Kelimenin A ile başlayıp Y ile bitmesi ve arada on bir karakter bulunması kavramından gelmektedir.

Angular CDK'nın erişilebilirlik modülünde çeşitli erişilebilirlik özellikleri vardır ve cdkTrapFocus yönergesi bunlardan biridir.

Yani, onu içe aktardıktan sonra artık şablonun içinde kullanabiliriz. Formumuzu saran bir öğeye eklememiz yeterli.

kaydolma-modal.component.html

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

cdkTrapFocusAutoCapture @Input ile Başlatmaya Odaklanma Sağlama

İyi haber, cdkTrapFocus direktifinin yerleşik bir otomatik odaklama özelliği var. cdkTrapFocusAutoCapture @Input kullanabiliriz. Bu giriş, başlatıldığında direktif içindeki ilk odaklanılabilir öğeye otomatik olarak odaklanacaktır. Varsayılan olarak false olduğundan true değerini vermemiz gerekir.

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

Artık kipi açtığımızda isim alanı açıldığında düzgün bir şekilde odaklanıyor. Ve sekmeler arasında gezindikçe kapatma düğmesine geldiğimizde ad alanına geri döneceğiz. Ayrıca, geriye doğru gitmek için shift + tab tuşlarına basarsak, modaldan ayrılmadan ters sırada ilerleyeceğiz.

Yani, yalnızca tüm kullanıcılar için son derece yararlı olmakla kalmıyor, aynı zamanda uygulanması da son derece kolay.

Unutulmaması gereken son bir nokta, trap focus direktifi, başlatılmadan önce odaklanılan son öğenin izini sürer, böylece kipi kapattığımızda odak, onu açan düğmeye geri döner.

Harika, bir sürü işten tasarruf ettik ve modelimizi daha erişilebilir hale getirdik.

Bunu Çalışırken Görmek İster misiniz?

Aşağıdaki stackblitz örneğinde bu tekniklerin demo koduna ve örneklerine göz atın. Herhangi bir sorunuz veya düşünceniz varsa yorum bırakmaktan çekinmeyin.