CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Tabs ve accordion

HTML kursu · Uzman · Ders 10/39

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

  1. 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.

  2. 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>

  3. 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

Uzman bölümündeki tüm dersler

1 İleri erişilebilirlik

  1. WCAG ilkeleri
  2. Klavye navigasyonu
  3. Live regions
  4. Dialog ve modal
  5. Heading outline
  6. Özet - Erişilebilir widget

2 İleri ARIA desenleri

  1. ARIA roles
  2. States ve properties
  3. Grid ve tree
  4. Tabs ve accordion
  5. Menu ve menubar
  6. Özet - Erişilebilir tabpanel

3 Proje: Performanslı sayfa

  1. Proje: Performanslı sayfa
  2. Kritik kaynak sırası
  3. Görsel optimizasyonu
  4. Şablon ve noscript
  5. Proje sonu - Performans sayfası

4 Uluslararasılaştırma

  1. Lang ve dir
  2. Hreflang stratejisi
  3. Bidi ve bdo
  4. Rtl uyumlu işaretleme
  5. Çok dilli SEO
  6. Özet - Çok dilli sayfa

5 Proje: Güvenli sayfa

  1. Proje: Güvenli form sayfası
  2. Rel noopener
  3. CSP meta
  4. Referrer policy
  5. Proje sonu - Güvenli sayfa

6 İleri web bileşenleri

  1. Custom element registry
  2. Slot ve shadow boundary
  3. Declarative shadow DOM
  4. Form-associated custom element
  5. AOM ve accessibility tree
  6. Özet - Bileşen kütüphanesi iskeleti

7 Uzman finali

  1. Meydan okuma - Erişilebilir dialog
  2. Meydan okuma - ARIA tabpanel
  3. Meydan okuma - Çok dilli RTL
  4. Meydan okuma - Güvenlik paketi
  5. Meydan okuma - Uzman projesi