th, scope ve caption Öğesi
Bir tabloya başlık ve uygun başlık hücreleri ekleyin.
th, scope ve caption Öğesi, CoddyKit'te ücretsiz bir Web Accessibility Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Web Accessibility Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
Veri Tabloları Anlam Taşır
Gerçek bir veri tablosu, satırlar ve sütunlar arasındaki ilişkileri gösterir. İşaretlemeyi doğru yaparsanız ekran okuyucular her değerin hangi başlığa ait olduğunu duyurabilir.
Basit Bir Tablo Kafa Karıştırır
Her hücre yalnızca bir td ise ekran okuyucu sayıları bağlam olmadan okur. Kullanıcı değerleri duyar, ancak bunların ne anlama geldiğini öğrenemez.
<table>
<tr><td>Name</td><td>Score</td></tr>
<tr><td>Ada</td><td>92</td></tr>
</table>Başlık Hücrelerinde th Kullanın
Başlık hücrelerini td yerine th olarak değiştirin. Böylece tarayıcı bu hücrelerin veriyi taşımadığını, verileri etiketlediğini bilir ve onları başlık olarak sunar.
<tr><th>Name</th><th>Score</th></tr>th Neden Her Şeyi Değiştirir
Bir th öğesi başlık olarak duyurulur ve açıkladığı hücrelerle ilişkilendirilebilir. Yalnız görünen sayıların anlam kazanmasını sağlayan bağlantı budur.
scope Özelliği
Kapsadığı hücreleri belirtmek için her th öğesine scope ekleyin. Sütun başlığı için değer col, satır başlığı için row olur.
<th scope="col">Score</th>Üst Başlıklar İçin scope=col
Sütunun üstündeki başlıkta scope=col kullanın. Kullanıcı aşağı doğru ilerledikçe altındaki her hücre bu etiketi devralır.
<th scope="col">City</th>Yan Başlıklar İçin scope=row
Bir satırın adını belirten ilk hücrede scope=row kullanın; örneğin sol kenarda bir kişinin veya tarihin yer aldığı durumda.
<th scope="row">Ada</th>caption Tabloyu Adlandırır
caption öğesi tüm tabloya bir başlık verir. Ekran okuyucu kullanıcıları bunu önce duyar ve neyi inceleyeceklerini bilir.
<table>
<caption>Quiz scores by student</caption>
</table>caption İlk Sırada Gelmelidir
caption öğesini tablo içindeki ilk alt öğe olarak, açılış etiketinin hemen ardından yerleştirin. Başka bir konum geçersizdir ve yok sayılabilir.
caption Bir Başlıktan Daha İyidir
Yakındaki bir h2 yeterli değildir. caption program aracılığıyla tabloya bağlanır; böylece kullanıcılar tablolar arasında geçiş yaparken bile başlığı keşfeder.
Eksiksiz ve Basit Bir Tablo
caption, scope içeren th başlık satırı ve ardından veri satırları. Bu temel yapı, çoğu basit tabloyu hiç ARIA kullanmadan tamamen erişilebilir kılar.
<table>
<caption>Scores</caption>
<tr><th scope="col">Name</th><th scope="col">Score</th></tr>
<tr><th scope="row">Ada</th><td>92</td></tr>
</table>Hızlı Kontrol
Bir tablonun üst kısmındaki sütun başlığını etiketliyorsunuz.
Özet: Üç Temel Yapı Taşı
Erişilebilir tabloların üçlüsünü öğrendiniz: başlıklar için th, başlıkların yönünü belirtmek için scope ve tabloyu adlandırmak için caption. İşin büyük bölümü tamamlandı.
Sıkça Sorulan Sorular
“th, scope ve caption Öğesi” dersi ücretsiz mi?
Evet — “th, scope ve caption Öğesi” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Web Accessibility Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
“th, scope ve caption Öğesi” dersinde ne öğreneceğim?
Bir tabloya başlık ve uygun başlık hücreleri ekleyin. Web Accessibility Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Web Accessibility Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Web Accessibility Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“th, scope ve caption Öğesi” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Web Accessibility Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Web Accessibility Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- th, scope ve caption Öğesi
- Satır ve Sütun Başlıklarını Doğru Kullanma
- Karmaşık Tablolar: headers ve id Eşleştirmesi
- Düzen Tabloları Bir Tuzaktır