Düğme ve aria-expanded ile Akordeonlar
Açık ve kapalı durumu bildiren bir açılır bölüm oluşturun.
Düğme ve aria-expanded ile Akordeonlar, CoddyKit'te ücretsiz bir Web Accessibility Academy dersidir. Bu, 4 dersinin 3. 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.
Akordeon Ne Yapar
Akordeon, içeriği göstermek için genişleyip daralan başlıklar yığınıdır. Sekmelerin aksine her bölüm kendi başına açılabilir.
Başlık Bir Düğmedir
Her akordeon başlığını gerçek bir düğme yapın. Düğmelere odaklanılabilir, Enter ve Space ile çalışırlar ve ekran okuyucular tarafından ek işlem gerektirmeden duyurulurlar.
<button>Shipping details</button>div Başlığı İşe Yaramaz
Başlık olarak tıklanabilir bir div kullanırken dikkatli olun. Buna odaklanılamaz, klavyeyi yok sayar ve yardımcı teknolojiye görevi hakkında hiçbir bilgi vermez.
<div onclick="toggle()">Shipping details</div>aria-expanded Temel Özelliktir
Ekran okuyucuların daraltılmış veya genişletilmiş durumunu duyurması için düğmeye aria-expanded ekleyin. Bir akordeonu erişilebilir yapan temel durum budur.
<button aria-expanded="false">Shipping details</button>Tıklamada Durumu Değiştirme
Kullanıcı düğmeyi etkinleştirdiğinde aria-expanded değerini true ile false arasında değiştirin. Bu değeri panelin gerçekten gösterilip gösterilmediğiyle eşzamanlı tutun.
btn.setAttribute("aria-expanded", String(open));Bölgeyi Belirtme
Düğmede, açtığı panelin id değerine ayarlanmış aria-controls kullanın. Kullanıcılar bu başlığın hangi içeriği gösterdiğini öğrenir.
<button aria-controls="sec1" aria-expanded="false">More</button>Daraltılmış Paneli Gizleme
Bir bölüm kapalıyken paneline hidden özniteliğini verin. Böylece panel, yeniden açılana kadar sayfadan ve erişilebilirlik ağacından kaldırılır.
<div id="sec1" hidden>Panel content</div>Başlıkları Gerçek Başlıkların İçine Alma
Her düğmeyi h3 gibi gerçek bir başlığın içine yerleştirin. Ekran okuyucu kullanıcıları daha sonra başlık gezinmesini kullanarak bölümler arasında atlayabilir.
<h3><button aria-expanded="false">FAQ</button></h3>Tekil Açılır Bölümlerde ARIA Kullanmayın
Tek başına gösterilip gizlenen bir bölüm, sekme kümesi değil açılır bölümdür. Yalnızca aria-expanded içeren bir düğmeye ihtiyaç duyar; tablist veya sekme rolleri hiç gerekmez.
Odağı Düğmede Tutma
Durumu değiştirdikten sonra odağı kullanıcının bastığı düğmede bırakın. Odağı panelin içine taşımayın; bu, klavye kullanıcıları için beklenmedik olur.
aria-expanded Neden Üstündür
Düğme kendi durumunu taşıdığı için ekran okuyucu her seferinde genişletilmiş veya daraltılmış olduğunu söyler. Kullanıcılar düğmeyi etkinleştirmenin ne yapacağını her zaman bilir.
Hızlı Kontrol
Bir bölümü açıp kapatan akordeon başlığı oluşturuyorsunuz. Durumunu erişilebilir kılan öznitelik hangisidir?
Özet: Erişilebilir Akordeonlar
Akordeon başlığının bir başlık içine yerleştirilmiş aria-expanded içeren bir düğme olduğunu öğrendiniz. Durumu değiştirin, paneli belirtin ve kapalıyken gizleyin.
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
“Düğme ve aria-expanded ile Akordeonlar” dersi ücretsiz mi?
Evet — “Düğme ve aria-expanded ile Akordeonlar” 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.
“Düğme ve aria-expanded ile Akordeonlar” dersinde ne öğreneceğim?
Açık ve kapalı durumu bildiren bir açılır bölüm oluşturun. 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 3. dersidir.
“Düğme ve aria-expanded ile Akordeonlar” 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