HTML
Tabs ve accordion
ARIA tab ve accordion desenlerini uygularsın.
Tabs deseni: tablist, tab, tabpanel
Sekmeli bir arayüz üç parçadan kurulur: role="tablist" sekme başlıklarını saran kapı, role="tab" her bir sekme, role="tabpanel" de o sekmenin içeriğidir. Sekme ile içeriği aria-controls ve id ile bağlarsın.
Standart yapı: <div role="tablist"><button role="tab" aria-selected="true" aria-controls="p1">Genel</button></div> ve ardından <div role="tabpanel" id="p1">...</div>. Klavyeyle ok tuşları sekmeler arasında dolaşır; bu yüzden tabindex de buna göre ayarlanır.
aria-selected ve aria-controls
Bir sekme seçiliyse aria-selected="true", değilse "false" yazılır. Aynı anda yalnızca bir sekme seçili olur. aria-controls ise sekmenin denetlediği panelin id'sini taşır; böylece ekran okuyucu sekmeden panele geçebilir.
Panel tarafında aria-labelledby ile panelin başlığını sekme metnine bağlamak iyi bir uygulamadır. Örnek: <div role="tabpanel" id="p1" aria-labelledby="t1"> ve <button role="tab" id="t1" aria-controls="p1">. Bu çift yönlü bağlantı erişilebilirliği tamamlar.
Accordion deseni
Akordiyon (accordion) genişleyip daralan başlık ve içerik çiftlerinden kurulur. Her başlık bir <button> olur ve aria-expanded ile açık/kapalı durumu, aria-controls ile de denetlediği içerik id'si taşır.
İçerik bölgesi ya düz bir <div>'tir ya da role="region" alır. <button aria-expanded="false" aria-controls="b1">Bölüm 1</button> örneğinde başlık kapalı bir bölgeyi yönetir. Bir akordiyonda birden çok başlık aynı anda açık olabilir; tek-sekme davranışı isteniyorsa JavaScript ile yönetilir.
Uygulama İki sekmeli bir tablist yaz
Body içine bir <div role="tablist"> ekle; içine iki <button role="tab"> koy. Birinci sekmenin id'si t1, aria-selected'i true, aria-controls'i p1, metni Genel olsun. İkinci sekmenin aria-selected'i false, aria-controls'i p2, metni Ayrıntılar olsun. Body içine bir <div role="tabpanel" id="p1" aria-labelledby="t1"> ekle; içinde bir <p> ve Genel içerik. metni olsun.
Örnek çözümü göster
<body>
<div role="tablist">
<button role="tab" id="t1" aria-selected="true" aria-controls="p1">Genel</button>
<button role="tab" aria-selected="false" aria-controls="p2">Ayrıntılar</button>
</div>
<div role="tabpanel" id="p1" aria-labelledby="t1">
<p>Genel içerik.</p>
</div>
</body>
Kendini test et
-
Bir sekme içeriğini sarmak için hangi role kullanılır?
- role="tab"
- role="tablist"
- role="heading"
- role="tabpanel"
Cevabı göster
role="tabpanel" — Doğru. role="tabpanel" bir sekmenin içerik bölgesini sarmak için kullanılır.
-
Seçili sekmenin değerini yaz
<button role="tab" aria-selected="____" aria-controls="panel-1">Genel</button>
Cevabı göster
<button role="tab" aria-selected="true" aria-controls="panel-1">Genel</button>
-
Rolü yeriyle eşleştir
- role="tablist"
- Sekme listesi kabı
- role="tab"
- Tek sekme
- role="tabpanel"
- Sekme içeriği
- aria-selected="true"
- Seçili sekme
Sıradaki ders: Menu ve menubar
