Sekmeler Kalıbı: tablist, tab, tabpanel
Bir sekme kümesinin ihtiyaç duyduğu üç rolü bağlayın.
Sekmeler Kalıbı: tablist, tab, tabpanel, CoddyKit'te ücretsiz bir Web Accessibility Academy dersidir. Bu, 4 dersinin 1. 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.
Sekme Kümesi Gerçekte Nedir
Bir sekme kümesi aynı anda bir panel gösterir ve kullanıcıların paneller arasında geçiş yapmasını sağlar. Yardımcı teknolojiler için birbirinden kopuk bağlantılar gibi değil, tek bir bileşen gibi görünmelidir.
Üç Rol Birlikte Çalışır
Bu örüntü üç ARIA rolüne dayanır: sekmeleri içeren bir tablist, her sekme ve her sekmenin gösterdiği panel. Üçünü de doğru şekilde uygulayın.
Kapsayıcı bir tablist'tir
Sekme sıranızı role="tablist" içeren bir elementin içine alın. Bu, ekran okuyuculara içerideki alt öğelerin ilişkili bir sekme kümesi olduğunu bildirir.
<div role="tablist">...</div>Her Sekme Bir Düğmedir
Her sekmeyi role="tab" içeren gerçek bir button elementinden oluşturun. Düğme kendiliğinden odaklanabilir ve tıklanabilir olduğundan ek bağlantı kurma işinden kurtulursunuz.
<button role="tab">Profile</button>Panel bir tabpanel'dir
Her sekmenin gösterdiği içeriğe role="tabpanel" verilir. Bu, içeriği o anda seçili olan sekmenin denetlediği bölge olarak işaretler.
<div role="tabpanel">Profile details</div>Seçili Sekmeyi İşaretleyin
Etkin sekmede aria-selected="true", diğerlerinde false değerini kullanın. Ekran okuyucular hangi sekmenin seçili olduğunu bildirir.
<button role="tab" aria-selected="true">Profile</button>Sekmeyi Paneline Bağlayın
Her sekmeyi aria-controls ile paneline yönlendirin ve bu niteliğe panelin id değerini verin. Kullanıcılar sekmenin hangi bölgeyi açtığını öğrenir.
<button role="tab" aria-controls="p1">Profile</button>Paneli Sekmesinden Adlandırın
Panele, kendi sekmesine geri yönlendiren bir aria-labelledby verin. Böylece panel, erişilebilir adı olarak sekmenin metnini kullanır.
<div role="tabpanel" aria-labelledby="tab1">...</div>Etkin Olmayan Panelleri Gizleyin
Aynı anda yalnızca bir panel gösterilmelidir. Sekmesi seçili olmayan panellere hidden niteliğini ekleyerek sayfadan çıkmalarını sağlayın.
<div role="tabpanel" hidden>...</div>Tablist'e Etiket Verin
Bir tablist, Account settings gibi amacını açıklayan bir aria-label içermelidir. Kullanıcılar tüm sekme kümesinin ne işe yaradığını duyar.
<div role="tablist" aria-label="Account settings">...</div>Kullanıcıya Nasıl Duyulur
Hepsi bir araya getirildiğinde ekran okuyucu Profile, tab, selected, 1 of 3 gibi bir ifade duyurur. Sekmeleri kullanılabilir yapan yönlendirme tam olarak budur.
Hızlı Kontrol
Sekme sıranızı içeren kapsayıcıyı bağlıyorsunuz. Üzerinde hangi rol bulunmalıdır?
Özet: Sekme Örüntüsü
tablist, tab, tabpanel üçlüsünü öğrendiniz. Seçili sekmeyi işaretleyin, her sekmeyi paneline bağlayın ve etkin olmayanları gizleyin.
Sıkça Sorulan Sorular
“Sekmeler Kalıbı: tablist, tab, tabpanel” dersi ücretsiz mi?
Evet — “Sekmeler Kalıbı: tablist, tab, tabpanel” 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.
“Sekmeler Kalıbı: tablist, tab, tabpanel” dersinde ne öğreneceğim?
Bir sekme kümesinin ihtiyaç duyduğu üç rolü bağ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 1. dersidir.
“Sekmeler Kalıbı: tablist, tab, tabpanel” 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
- Sekmeler Kalıbı: tablist, tab, tabpanel
- Sekmeler Arasında Ok Tuşlarıyla Gezinme
- Düğme ve aria-expanded ile Akordeonlar
- Açılır Bölüm mü Sekmeler mi: Doğru Seçimi Yapın