Tablo erişilebilirliği
summary (kaldırıldı), caption ve aria-* kullanımını öğrenirsin.
caption ve aria-*
Erişilebilir tabloda <caption> başlığa, scope ise başlık hücrelerine yardım eder. Bazen bu yetmez; tabloyu daha ayrıntılı açıklamak istersen aria-* özniteliklerini kullanırsın.
Örneğin aria-describedby, tabloyu açıklayan bir paragrafın id'sine işaret eder. Böylece ekran okuyucu tabloyu okumadan önce açıklamayı da söyler. Eski kodlarda görülen summary özniteliği ise HTML'den kaldırıldı; yerine caption ve aria-* kullanılır.
Tabloda aria-* uygulamaları
aria-describedby'e ek olarak tablolarda şu aria-* öznitelikleri de kullanılır:
aria-label: tabloya kısa bir ad veriraria-labelledby: tabloyu dış bir başlığa bağlarrole="table": tablo rolünü açıkça belirtir (özellikle ARIA grid'lerde)
Bunları yalnızca anlamı güçlendirmek için eklersin. Doğru yazılmış bir HTML tablosunda çoğu zaman caption ve scope yeter; fazlası yalnızca özel durumlarda gerekir.
Uygulama aria-describedby ile erişilebilir tablo kur
Bir tabloyu erişilebilir yap. <table>'ye aria-describedby özniteliği ver; değeri, tabloyu açıklayan paragrafın id'siyle eşleşmeli. Tablo içine dolu bir <caption>, <thead> (içinde <th scope="col">) ve <tbody> (içinde <td>) ekle. Tablodan sonra bir <p> yaz; id'si tablonun aria-describedby değerine eşit olsun ve içeriği boş olmasın.
Örnek çözümü göster
<table aria-describedby="tablo-notu">
<caption>Ürün Özellikleri</caption>
<thead>
<tr>
<th scope="col">Özellik</th>
<th scope="col">Değer</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ağırlık</td>
<td>180 g</td>
</tr>
<tr>
<td>Ekran</td>
<td>6.1 inç</td>
</tr>
</tbody>
</table>
<p id="tablo-notu">Tüm değerler üretici firmadan alınmıştır.</p>Kendini test et
-
Eski kodlarda görülen table summary özniteliği bugün neden kullanılmamalı?
- Çünkü caption etiketi de var
- Çünkü yalnızca İngilizce çalışıyor
- Çünkü tarayıcılar görüntülemez
- Çünkü HTML standartlarından kaldırıldı
Cevabı göster
Çünkü HTML standartlarından kaldırıldı — Doğru. summary özniteliği HTML5'ten itibaren standartlardan kaldırıldı; yerine caption ve aria-* kullanılır.
-
aria-describedby değerini yaz
<table aria-describedby="____"> <caption>Ürün Özellikleri</caption> <!-- thead ve tbody --> </table> <p id="tablo-notu">Değerler üreticiden alınmıştır.</p>Cevabı göster
<table aria-describedby="tablo-notu"> <caption>Ürün Özellikleri</caption> <!-- thead ve tbody --> </table> <p id="tablo-notu">Değerler üreticiden alınmıştır.</p> -
Erişilebilirlik öğesini rolüyle eşleştir
- caption
- Tabloya başlık verir
- scope
- th'nin yönünü söyler
- aria-describedby
- Açıklamaya bağlar
- summary
- Kaldırıldı, kullanılmaz