Bileşenlerde Hareketli tabindex Yönetimi
Ok tuşlarının birleşik bir denetim içinde hareket etmesini sağlayın.
Bileşenlerde Hareketli tabindex Yönetimi, CoddyKit'te ücretsiz bir Web Accessibility Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Web Accessibility Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
Tüm Bileşen İçin Tek Durak
Bir araç çubuğunda veya radyo grubunda Sekme, her öğeye değil, bileşene bir kez ulaşmalıdır. Roving tabindex kalıbı bunu sağlar.
Temel Fikir
Aynı anda tam olarak bir öğe tabindex="0" değerini taşır. Diğer her öğe tabindex="-1" alır; böylece Sekme gruba tek bir noktadan girer.
Başlangıç Ayarı
Yükleme sırasında ilk veya seçili öğeye tabindex="0" verin ve geri kalanını tabindex="-1" olarak ayarlayın. Bu, grubun bekleme durumudur.
<button tabindex="0">Bold</button>
<button tabindex="-1">Italic</button>Ok Tuşları İçeride Geçiş Sağlar
Odak içeri girdikten sonra kullanıcı öğeler arasında Sekme ile değil, ok tuşlarıyla geçer. Sekme yine tüm bileşenden çıkar.
Roving Adımı
Bir oka basıldığında iki şey yaparsınız: eski öğeyi -1, yeni öğeyi 0 olarak ayarlayın ve ardından yeni öğede focus() çağırın. 🧭
old.tabIndex = -1;
next.tabIndex = 0;
next.focus();Neden Yalnızca Bir Sıfır
Tek bir tabindex="0" tutmak, Sekme'nin her zaman kullanıcının son kullandığı öğeye gelmesini sağlar; bu nedenle bileşene geri dönmek doğal hissettirir.
APG Kalıbına Uyun
ARIA Authoring Practices Guide, her bileşen için kullanılacak tam tuşları belirtir. Kendiniz bir tane icat etmek yerine onun klavye eşlemesini izleyin.
İsteğe Bağlı Sarmalama
Birçok bileşik araç, ok tuşlarıyla hareketi döngüye sokar: son öğede sağ oka basıldığında ilk öğeye geçilir. Örüntünüzün döngüye girmesi gerekip gerekmediğini APG'den kontrol edin.
Home ve End de
Bileşik araçlar, ilk ve son öğelere atlamak için genellikle Home ve End tuşlarını da destekler; bu küçük ayrıntı gezinmeyi hızlandırır.
Gezinen tabindex ve aria-activedescendant
Gezinen tabindex, gerçek DOM odaklanmasını taşır. Diğer seçenek olan aria-activedescendant ise odağı bir kapsayıcıda tutar ve sanal etkin öğeye işaret eder.
Tüm Döngüyü Test Edin
Tab ile içeri girin, her öğede ok tuşlarıyla ilerleyin, Tab ile çıkın; ardından yeniden Tab ile içeri girip odağın son kullanılan öğeye döndüğünü doğrulayın.
Hızlı Kontrol
Gezinen tabindex kullanan bir araç çubuğunda, herhangi bir anda kaç öğenin tabindex="0" değeri vardır?
Özet
Gezinen tabindex kullanımında ustalaştınız: bir öğenin değeri 0, diğerlerinin değeri -1 olur; ok tuşları 0 değerini öğeler arasında taşır ve Tab tüm aracın ötesine geçer. 🚀
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 30
- Dersler
- 120
Sıkça Sorulan Sorular
“Bileşenlerde Hareketli tabindex Yönetimi” dersi ücretsiz mi?
Evet — “Bileşenlerde Hareketli tabindex Yönetimi” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Web Accessibility Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
“Bileşenlerde Hareketli tabindex Yönetimi” dersinde ne öğreneceğim?
Ok tuşlarının birleşik bir denetim içinde hareket etmesini sağlayın. Web Accessibility Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Web Accessibility Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Web Accessibility Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Bileşenlerde Hareketli tabindex Yönetimi” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Web Accessibility Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Web Accessibility Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- tabindex 0, -1 ve Pozitif Değerlerden Kaçınma
- Bir Eylemden Sonra Odağı Taşıma
- Bir Katman Kapandığında Odağı Geri Getirme
- Bileşenlerde Hareketli tabindex Yönetimi