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.