Özet - Erişilebilir tabpanel

Tüm ARIA desenleriyle bir tabpanel bileşeni iskeleti yazarsın.

Bu grupta öğrendiklerimiz

Bu grupta ARIA desenlerini gördün:

role özniteliği ve dört sınıfı: widget, document, landmark, abstract.
State ve property ayrımı: aria-expanded, aria-hidden, aria-disabled.
Grid ve tree desenleri: role="grid", role="tree", role="treegrid".
Tabs ve accordion: tablist, tab, tabpanel, aria-selected.
Menu ve menubar: aria-haspopup, menuitem.

Şimdi tümünü bir erişilebilir tabpanel iskeletinde birleştireceğiz.

Uygulama Erişilebilir tabpanel iskeleti

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

Rolü anlamıyla eşleştir

role="tablist"

Sekme listesi
role="tab"

Tek sekme
role="tabpanel"

Sekme içeriği
aria-selected="true"

Seçili sekme
aria-controls="p1"

Sekmeden panele köprü
Bir sekmenin içerik bölgesini denetlediğini bildiren öznitelik hangisidir?
- aria-labelledby
- aria-controls
- aria-expanded
- aria-haspopup
Cevabı göster

aria-controls — Doğru. aria-controls bir öğenin denetlediği diğer öğenin id'sini taşır.

Seçili sekmenin özniteliğini tamamla

<button role="tab" aria-selected="____" aria-controls="p1">Genel</button>

Cevabı göster

<button role="tab" aria-selected="true" aria-controls="p1">Genel</button>

Sıradaki ders: Proje: Performanslı sayfa

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler