HTML Academy · Lekcja

Dostępność tabel: scope, summary i caption

Dodawać podpisy i atrybuty scope z myślą o obsłudze czytników ekranu.

Dostępność tabel: scope, summary i caption to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Dlaczego dostępność tabel ma znaczenie

Użytkownicy czytników ekranu poruszają się po tabelach danych komórka po komórce — potrzebują kontekstu nagłówków dla każdej odczytywanej komórki danych.

Bez prawidłowego oznaczenia czytniki ekranu odczytują jedynie surowe wartości, bez kontekstu kolumn i wierszy
Dostępne tabele sprawiają, że dane są zrozumiałe dla wszystkich

Element caption

<caption> zapewnia widoczny tytuł tabeli:

<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 -->

Stylizowanie caption

Stylizuj i pozycjonuj caption za pomocą CSS:

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

Atrybut scope elementu th

Atrybut scope informuje czytniki ekranu, których komórek dotyczy nagłówek:

<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>

Wartości scope

Wartości atrybutu scope:

col — nagłówek dotyczy komórek w tej samej kolumnie
row — nagłówek dotyczy komórek w tym samym wierszu
colgroup — nagłówek dotyczy komórek w grupie kolumn
rowgroup — nagłówek dotyczy komórek w grupie wierszy (tbody/thead)

scope dla złożonych nagłówków

W przypadku nagłówków obejmujących wiele komórek użyj wartości scope colgroup lub rowgroup:

<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>

Atrybut headers elementu td

W bardzo złożonych tabelach użyj headers, aby jawnie połączyć komórki z ich nagłówkami:

<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>

Kiedy używać scope, a kiedy headers

Wskazówki:

Proste tabele z nagłówkami w jednym wierszu → używaj scope="col" i scope="row"
Złożone nagłówki obejmujące wiele komórek → używaj atrybutu headers wraz z odwołaniami do identyfikatorów
WCAG 1.3.1 wymaga, aby nagłówki tabel były programowo powiązane z komórkami danych

aria-label elementu table

Gdy caption nie jest pożądany wizualnie, użyj aria-label:

<!-- 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>

Testowanie dostępności tabel

Jak sprawdzić, czy tabela jest dostępna:

Użyj panelu Tabele w czytniku ekranu (VoiceOver, NVDA)
Zainstaluj rozszerzenie przeglądarki axe DevTools
Uruchom interfejs wiersza poleceń pa11y dla adresu URL strony
W3C Markup Validator wykrywa brak elementu caption

Atrybut summary (przestarzały)

Atrybut summary służył czytnikom ekranu w przypadku złożonych tabel — obecnie jest przestarzały w HTML5:

<!-- 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 -->

Lista kontrolna dostępnej tabeli

Lista kontrolna dostępności tabel danych:

Używaj <caption>, aby opisać tabelę
Używaj <th> dla wszystkich komórek nagłówków
Dodaj scope do wszystkich elementów <th>
Używaj <thead>, <tbody>, <tfoot> do definiowania struktury
W przypadku złożonych tabel używaj id + headers

Szybkie sprawdzenie

Jakiej wartości scope należy użyć dla elementu th będącego nagłówkiem całej kolumny?

Podsumowanie: dostępność tabel

Najważniejsze informacje o dostępnych tabelach:

<caption> — widoczny tytuł tabeli odczytywany przez czytniki ekranu
scope="col" — nagłówek kolumny
scope="row" — nagłówek wiersza
scope="colgroup/rowgroup" — nagłówki obejmujące wiele kolumn lub wierszy
id + headers — dla złożonych nagłówków wielopoziomowych
Testuj za pomocą axe, pa11y lub VoiceOver

Często zadawane pytania

Czy lekcja „Dostępność tabel: scope, summary i caption” jest bezpłatna?

Tak — pełny tekst „Dostępność tabel: scope, summary i caption” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Dostępność tabel: scope, summary i caption”?

Dodawać podpisy i atrybuty scope z myślą o obsłudze czytników ekranu. Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Dostępność tabel: scope, summary i caption”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?

Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

table, tr, td i th
Struktura thead, tbody i tfoot
colspan i rowspan do łączenia komórek
Dostępność tabel: scope, summary i caption

← Powrót do HTML Academy