Meydan okuma - ARIA tabpanel

Tam ARIA tabpanel deseniyle bir sekmeli arayüz yazarsın.

ARIA tabpanel düzeni

ARIA tabpanel, sekmeli içeriği erişilebilir kılan bir desendir. Kapsayıcıya role="tablist", her sekmeye role="tab" ve içerik alanlarına role="tabpanel" verilir. Sekmeler genellikle <button> olur; klavyeyle gezilebilmek için tabindex ayarlanır.

Seçili sekme aria-selected="true", diğerleri false alır. Her sekme aria-controls ile yönettiği panelin id'sine bağlanır; her panel de aria-labelledby ile sekmesine bağlanır. Bu ilişkiler ekran okuyucunun yapıyı sunmasını sağlar.

Uygulama İki sekmeli tabpanel yaz

İki sekmeli bir ARIA tabpanel yaz. Bir kapsayıcıya role="tablist" ver ve içine iki <button role="tab"> ekle; birine aria-selected="true" ver. Her sekme aria-controls ile bir panel id'sine bağlanmalı. Sonra iki role="tabpanel" içeren <div> ekle; her birinin id'si ilgili sekmenın aria-controls değeriyle eşleşmeli.

Örnek çözümü göster

Sekme listesinde iki tab, panellerde karşılık gelen id'ler olmalı.

Örnek çözüm:
<div role="tablist">
  <button role="tab" id="tab-1" aria-selected="true" aria-controls="panel-1">Genel</button>
  <button role="tab" id="tab-2" aria-selected="false" aria-controls="panel-2">Güvenlik</button>
</div>
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
  <p>Genel ayarlar.</p>
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2">
  <p>Güvenlik ayarları.</p>
</div>

Kendini test et

Sekme rollerini eşleştir

role="tablist"

Sekme listesi kapsayıcı
role="tab"

Tek bir sekme
role="tabpanel"

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

Seçili sekme durumu

Seçili sekmeyi işaretle

<button role="tab" ____ aria-controls="panel-1" id="tab-1">Genel</button>

Cevabı göster

<button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">Genel</button>

Hangi öznitelik seçili sekmeyi işaretler?
- aria-hidden="true"
- aria-selected="true"
- tabindex="0"
- role="tab"
Cevabı göster

aria-selected="true" — Doğru. aria-selected="true" seçili sekmeyi ekran okuyucuya bildirir.

Sıradaki ders: Meydan okuma - Çok dilli RTL

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler