HTML Academy · Ders

Tablo Erişilebilirliği: scope, summary ve caption

Ekran okuyucu desteği için açıklamalar ve scope öznitelikleri eklemeyi öğrenin.

Tablo Erişilebilirliği: scope, summary ve caption, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 4. 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, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

Tablo Erişilebilirliği Neden Önemlidir?

Ekran okuyucu kullananlar veri tablolarında hücre hücre gezinir — okudukları her veri hücresi için başlık bağlamına ihtiyaç duyarlar.

Uygun işaretleme olmadığında ekran okuyucular, sütun veya satır bağlamı olmadan yalnızca ham değerleri okur
Erişilebilir tablolar verilerin herkes tarafından anlaşılmasını sağlar

caption Öğesi

<caption>, tablo için görünür bir başlık sağlar:

<table>
  <caption>Q4 2024 Product Sales by Region</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>
<!-- caption is the first child of table -->
<!-- Screen readers announce it when entering the table -->
<!-- Helps all users understand the table's purpose at a glance -->

caption Biçimlendirme

caption'ı CSS ile biçimlendirin ve konumlandırın:

caption {
  caption-side: bottom;  /* or top (default) */
  font-style: italic;
  font-size: 0.875rem;
  color: #666;
  text-align: left;
  padding: 0.5rem 0;
}

th Üzerinde scope Özniteliği

scope özniteliği, ekran okuyuculara bir başlığın hangi hücreler için geçerli olduğunu bildirir:

<thead>
  <tr>
    <th scope="col">Name</th>      <!-- header for a column -->
    <th scope="col">Score</th>
    <th scope="col">Grade</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">Alice</th>    <!-- header for a row -->
    <td>95</td>
    <td>A</td>
  </tr>
</tbody>

scope Değerleri

scope özniteliğinin değerleri:

col — başlık aynı sütundaki hücreler için geçerlidir
row — başlık aynı satırdaki hücreler için geçerlidir
colgroup — başlık bir sütun grubundaki hücreler için geçerlidir
rowgroup — başlık bir satır grubundaki hücreler için geçerlidir (tbody/thead)

Karmaşık Başlıklar için scope

Yayılan başlıklarda colgroup veya rowgroup scope kullanılır:

<thead>
  <tr>
    <th rowspan="2" scope="col">Name</th>
    <th colspan="2" scope="colgroup">2024</th>   <!-- colgroup -->
  </tr>
  <tr>
    <th scope="col">Q1</th>
    <th scope="col">Q2</th>
  </tr>
</thead>

td Üzerinde headers Özniteliği

Çok karmaşık tablolar için hücreleri başlıklarına açıkça bağlamak amacıyla headers kullanın:

<thead>
  <tr>
    <th id="hname">Name</th>
    <th id="hq1">Q1</th>
    <th id="hq2">Q2</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th id="ralice" headers="hname">Alice</th>
    <td headers="hq1 ralice">95</td>
    <td headers="hq2 ralice">88</td>
  </tr>
</tbody>

scope ile headers Ne Zaman Kullanılır?

Yönergeler:

Tek satırlı başlıklara sahip basit tablolar → scope="col" ve scope="row" kullanın
Karmaşık, yayılan başlıklar → ID başvurularıyla headers özniteliğini kullanın
WCAG 1.3.1, tablo başlıklarının veri hücreleriyle programatik olarak ilişkilendirilmesini gerektirir

table üzerinde aria-label

caption görsel olarak uygun olmadığında aria-label kullanın:

<!-- caption with visually-hidden class -->
<table aria-label="Q4 2024 Product Sales by Region">
  ...
</table>
<!-- Or use aria-labelledby to reference a heading -->
<h2 id="table-title">Sales Data</h2>
<table aria-labelledby="table-title">...</table>

Tablo Erişilebilirliğini Sınama

Tablonuzun erişilebilir olduğunu nasıl doğrularsınız:

Ekran Okuyucu'daki Tablolar panelini kullanın (VoiceOver, NVDA)
axe DevTools tarayıcı uzantısını yükleyin
Sayfa URL'nize karşı pa11y CLI çalıştırın
W3C Markup Validator, eksik caption kullanımını yakalar

summary Özniteliği (Kullanımdan Kaldırıldı)

summary özniteliği karmaşık tablolarda ekran okuyucular için kullanılıyordu — artık HTML5'te kullanımdan kaldırılmıştır:

<!-- Old HTML 4.01 — do not use: -->
<table summary="This table shows quarterly sales...">

<!-- Modern HTML5 replacement: -->
<table>
  <caption>This table shows quarterly sales...</caption>
</table>
<!-- Or: aria-describedby to a paragraph -->

Erişilebilir Tablo Denetim Listesi

Veri tabloları için erişilebilirlik denetim listesi:

Tabloyu etiketlemek için <caption> kullanın
Tüm başlık hücreleri için <th> kullanın
Tüm <th> öğelerine scope ekleyin
Yapı için <thead>, <tbody>, <tfoot> kullanın
Karmaşık tablolar için id + headers kullanın

Hızlı Kontrol

Bir sütunun tamamının başlığı olan th için hangi scope değerini kullanmalısınız?

Özet: Tablo Erişilebilirliği

Erişilebilir tabloların temel noktaları:

<caption> — ekran okuyucular tarafından seslendirilen görünür tablo başlığı
scope="col" — sütun başlığı
scope="row" — satır başlığı
scope="colgroup/rowgroup" — yayılan başlıklar
id + headers — karmaşık, çok düzeyli başlıklar için
axe, pa11y veya VoiceOver ile sınayın

Sıkça Sorulan Sorular

“Tablo Erişilebilirliği: scope, summary ve caption” dersi ücretsiz mi?

Evet — “Tablo Erişilebilirliği: scope, summary ve caption” 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 HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“Tablo Erişilebilirliği: scope, summary ve caption” dersinde ne öğreneceğim?

Ekran okuyucu desteği için açıklamalar ve scope öznitelikleri eklemeyi öğrenin. HTML 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.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML 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 4. dersidir.

“Tablo Erişilebilirliği: scope, summary ve caption” 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 HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML 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

table, tr, td ve th
thead, tbody ve tfoot Yapısı
Birleştirme için colspan ve rowspan
Tablo Erişilebilirliği: scope, summary ve caption

← HTML Academy Sayfasına Dön