Table

Rol ve anlam

• Table gerçek bir <table> öğesidir: <caption>, <thead>, <tbody>, <tfoot>, <tr>, <th> ve <td>. Ekran okuyucu satır ve sütun sayısını duyurur ve hücre başına başlıkları okur.
• Tablonun adı caption’dan gelir (getByRole('table', { name })). captionHidden başlığı görsel olarak gizler ama adı korur.
• Table.HeaderCell scope="col", Table.RowHeader scope="row" taşır; hücre okunurken satır ve sütun adı birlikte duyulur.
• scrollable (varsayılan) iken tabloyu saran div, role="region", tabindex="0" ve başlığa bağlı aria-labelledby taşır. Böylece klavye kullanıcısı taşan tabloyu kaydırabilir.
• selected satırda yalnızca data-selected vardır. aria-selected yalnızca grid ya da treegrid rolünde geçerlidir; düz tabloda kullanılmaz. Seçimin anlamı önemliyse metinle de belirtin.
• Tablo yerleşim için kullanılmaz; yalnızca veri için.

Klavye

Tuş	Davranış
Tab	Kaydırma bölgesine odaklanır (scrollable iken). Tablonun içindeki hücreler odak almaz.
Ok tuşları	Bölge odaktayken tabloyu kaydırır.
Page Up, Page Down, Home, End	Bölge odaktayken tarayıcının kaydırma davranışı.

Hücreler içinde bağlantı ya da buton varsa bunlar kendi sekme duraklarıdır ve bölgeden sonra gelir.

Odak

Odak halkası kaydırma bölgesindedir: 2 px kalınlıkta ve bölgenin içine çizilir, böylece kaydırma kapsayıcısı tarafından kesilmez. Halka yalnızca klavye odağında görünür. Tablo kaydırılmıyorsa (scrollable={false}) odak durağı yoktur.

Ekran okuyucu

Örnek	Okunan
Bölge	“Öğe listesi, bölge”
Tablo	“Öğe listesi, tablo, 3 satır, 5 sütun”
Sütun başlığı	“Adet, sütun başlığı”
Satır başlığı	“Birinci öğe, satır başlığı”
Hücre	“1.240” (sütun ve satır adıyla birlikte, ekran okuyucunun tablo gezinmesinde)

Kontrast

Metin her markada ve modda en az 4.5:1’dir; değerler bigbang ve fixture token çıktısından hesaplandı.

Çift	Açık mod	Koyu mod
color-text-default / table-header-background	15.44:1	15.44:1
color-text-subtle (üst bilgi) / table-header-background	8.38:1	9.23:1
color-text-default / table-row-background-hovered	15.44:1	13.49:1
color-text-default / table-row-background-selected (en düşük)	15.04:1	13.98:1
color-text-default / table-row-background-striped	15.44:1	18.08:1
color-text-subtle / table-row-background-selected (en düşük)	8.16:1	8.36:1
color-focus-ring / color-surface-default (en düşük)	5.97:1	8.09:1

Satır çizgisi (table-border, color-border-subtle, 1.22:1) süstür: satırları metin ve boşluk ayırır, çizgi bilgi taşımaz.

WCAG 2.2

Ölçüt	Table nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	Gerçek tablo öğeleri, scope ve caption.	İlk hücreyi Table.RowHeader yapın; yerleşim için tablo kullanmayın.
1.4.1 Renk kullanımı	Şerit ve seçim yalnızca destekleyicidir.	Satır durumunu Badge ile metin olarak verin.
1.4.3 Metin kontrastı	Tüm arka planlarda en az 8.16:1 (ikincil), 13.49:1 (varsayılan metin).	Hücrelere özel renk vermeyin.
1.4.10 Yeniden akış	Geniş tablo kapsayıcıda yatay kayar; sayfa kaymaz.	Çok geniş tabloları kaydırma bölgesinde bırakın.
2.1.1 Klavye	Kaydırma bölgesi Tab ile odak alır ve ok tuşlarıyla kayar.	Bölgeyi scrollable={false} ile kapatmayın, tablo taşabiliyorsa.
2.4.7 Odak görünür	Halka bölgenin içinde.	className ile outline kaldırmayın.
2.5.8 Hedef boyutu	Table’ın kendi hedefi yoktur; içindeki bağlantı ve butonlar kendi boyutunu taşır.	Hücre içindeki denetimleri en az 24 px yapın.
4.1.2 Ad, rol, değer	Tablo ve bölge caption ile adlandırılır.	Başlığı anlamlı yazın.