HTML tabloları tablo verilerini (ilişkili verilerin satırları ve sütunları) sunar — düzen değil. Erişilebilir bir tablo, ekran okuyucuların her hücre için başlıkları duyurabileceği şekilde uygun yapı kullanır.
Q2 Sales by Region
Region
Revenue
North
$12,000
South
$9,500
Total$21,500
<th> ve scope — başlık hücrelerini işaretler. Sütun başlıkları için scope="col", satır başlıkları için scope="row". Ekran okuyucular daha sonra bağlam olmadan hücreleri okumak yerine "Kuzey, Gelir: $12,000" duyurur.<caption> — tüm tablo için bir başlık, <table> öğesinin ilk çocuğu; kullanıcıları yönlendirmek için okunur.<thead>/<tbody>/<tfoot> — başlık, gövde ve özet satırlarını gruplandırır; gezinmeye yardımcı olur ve yazdırırken başlığın tekrarlanmasını sağlar.<!-- ❌ this was 1990s practice — use CSS grid/flexbox instead -->
<table><tr><td>sidebar</td><td>content</td></tr></table>
Düzen tabloları ekran okuyucuları karıştırır (veri tablosu semantiğini duyururlar) ve esnek değildir. Sayfa düzeni için CSS Grid/Flexbox kullanın.
Doğru tablo semantiği (<th scope>, <caption>, bölümlendirme), veri tablolarını ekran okuyucu kullanıcıları için kullanılabilir hale getirir — her değeri satır ve sütun başlıklarıyla bağlarlar.
<table> öğesini kesinlikle gerçek tablo verilerine ayırın.