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.   https://youtu.be/JKHAjYJ5T2o?embedable=true  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,     yönergesini kullanarak oldukça kolaydır. A11yModule cdkTrapFocus  Açısal   Yönergesi cdkTrapFocus  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,   ekleyelim. Kullanmak için yapmamız gereken ilk şey   içe aktarmamız gerekiyor. cdkTrapFocus A11yModule  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   yönergesi bunlardan biridir. cdkTrapFocus  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>      ile Başlatmaya Odaklanma Sağlama cdkTrapFocusAutoCapture @Input  İyi haber,   direktifinin yerleşik bir otomatik odaklama özelliği var.     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. cdkTrapFocus cdkTrapFocusAutoCapture @Input   <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   +   tuşlarına basarsak, modaldan ayrılmadan ters sırada ilerleyeceğiz.  shift tab  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.   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

Bu ses hikayenin orijinal dilinde üretilmiştir!

Çok uzun; Okumak

Make resilience your competitive advantage

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

About Author

YORUMLAR

ETİKETLERİ ASIN

BU YAZI

Related Stories

HackerNoon Yazma Yarışmasını mı Kazanmak İstiyorsunuz? İşte #crypto-api Yarışması Kazananlarının Önerileri

Bu 18 Geliştirici Aracıyla Üretkenliğinizi Artırın 🚀🔥

AI/ML Datalake için Referans Mimarisi Oluşturmaya Yönelik Mimar Kılavuzu

Claude Sonnet 3.5 Sistem Bilgi Sızıntısı: Adli Analiz

HackerNoon Yazma Yarışmasını mı Kazanmak İstiyorsunuz? İşte #crypto-api Yarışması Kazananlarının Önerileri

Bu 18 Geliştirici Aracıyla Üretkenliğinizi Artırın 🚀🔥

AI/ML Datalake için Referans Mimarisi Oluşturmaya Yönelik Mimar Kılavuzu

Claude Sonnet 3.5 Sistem Bilgi Sızıntısı: Adli Analiz

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps