Dostępne tabele danych

Zaktualizowano 14 października 2026 · 5 min czytania

Tabele rozmiarów, specyfikacje produktów, stawki dostawy, historia zamówień, tabele porównań – sklepy mają więcej tabel, niż się wydaje. Użytkownicy czytników ekranu poruszają się po tabelach komórka po komórce i słyszą nagłówek każdej komórki, ale tylko wtedy, gdy nagłówki są w kodzie. Ta strona należy do serii dostępne wzorce interfejsu.

Kiedy używać tabeli

Tabela jest właściwa, gdy dane wiążą się w dwóch wymiarach: wiersze i kolumny coś znaczą (rozmiar × wymiar, kraj × koszt dostawy). Nie należy używać tabel do układu strony ani budować danych tabelarycznych z elementów div ostylowanych jak siatka.

Wzorzec tabeli w APG opisuje tabelę jako statyczną strukturę, która „nie jest interaktywnym widżetem”, i mówi: „autorów zdecydowanie zachęca się do używania natywnego elementu HTML table, gdy tylko to możliwe”. Jeśli wiele komórek zawiera interaktywne widżety, wzorzec grid z APG może zmniejszyć liczbę przystanków tabulatora – ale grid to widżet złożony z własnym modelem strzałek i rzadko jest potrzebny w sklepie.

Kryteria WCAG

1.3.1 Informacje i relacje (A): komórki nagłówkowe i ich komórki danych są powiązane w kodzie.
1.3.2 Zrozumiała kolejność (A): kolejność czytania ma sens po zlinearyzowaniu tabeli.
1.4.10 Dopasowanie do ekranu (AA): W3C wskazuje tabele danych (nie pojedyncze komórki) jako treść, która może wymagać przewijania w dwóch kierunkach; reszta strony nadal musi się dopasować.
2.1.1 Klawiatura (A): tabelę przewijaną w poziomie trzeba dać się przewinąć klawiaturą.
4.1.2 Nazwa, rola, wartość (A): przyciski sortowania mają nazwy, a stan sortowania jest udostępniony.
2.4.6 Nagłówki i etykiety (AA): podpisy i nagłówki opisują zawartość.

Przykład kodu

<!-- Prosta tabela: nagłówki w pierwszym wierszu i pierwszej kolumnie -->
<table>
  <caption>Tabela rozmiarów damskich jeansów, w centymetrach</caption>
  <thead>
    <tr>
      <th>Rozmiar</th>
      <th>Talia</th>
      <th>Biodra</th>
    </tr>
  </thead>
  <tbody>
    <tr><th>S</th><td>66–70</td><td>92–96</td></tr>
    <tr><th>M</th><td>71–75</td><td>97–101</td></tr>
  </tbody>
</table>

<!-- Sortowana kolumna: przycisk w nagłówku, aria-sort na komórce nagłówkowej -->
<th aria-sort="ascending">
  <button type="button">Cena</button>
</th>

<!-- Szeroka tabela na małych ekranach: nazwany kontener przewijania z możliwością fokusu -->
<div class="table-scroll" role="region" aria-label="Stawki dostawy" tabindex="0">
  <table>…</table>
</div>

Uwagi:

Technika W3C H51 to „użycie znaczników tabeli do prezentacji informacji tabelarycznych”. H63 dotyczy scope (row, col, rowgroup, colgroup): jest potrzebny, gdy nagłówki nie są w pierwszym wierszu ani kolumnie; w prostych tabelach z nagłówkami w pierwszym wierszu lub kolumnie wystarcza zwykły th. W złożonych tabelach z nagłówkami na kilku poziomach H43 używa id i headers.
caption nadaje tabeli nazwę. Nie należy go udawać pogrubionym pierwszym wierszem ani niepowiązanym nagłówkiem nad tabelą.
Według APG aria-sort trafia na nagłówek posortowanej kolumny; ustawia się go na jednej kolumnie naraz.
Jeśli wiersze są ładowane stronami lub wirtualizowane, aria-rowcount i aria-rowindex informują technologię wspomagającą o pełnym rozmiarze.

Obsługa klawiaturą

APG określa obsługę klawiatury dla wzorca tabeli jako „nie dotyczy”: tabela nie jest widżetem, a jej komórki nie przyjmują fokusu. Czytniki ekranu mają własne polecenia nawigacji po tabelach. Elementy interaktywne w komórkach – linki, przyciski sortowania, pola ilości – są zwykłymi przystankami tabulatora.

Klawisz	Funkcja
Tab	Przechodzi do następnego linku, przycisku lub pola w tabeli
Strzałki (gdy fokus ma kontener przewijania)	Przewijają szeroką tabelę w poziomie
Polecenia tabel w czytniku ekranu	Przechodzą komórka po komórce; nagłówek każdej komórki jest ogłaszany

Typowe błędy w sklepach internetowych

Tabele rozmiarów jako obrazy bez tabeli tekstowej albo jako tabele bez żadnego th.
Listy specyfikacji z elementów div, które wyglądają jak dwie kolumny, ale nie mają struktury – należy użyć tabeli lub listy opisów.
Tabele układu ze starych szablonów w stylu poczty e-mail, oznaczone th.
Tabele porównań ze scalonymi komórkami nagłówkowymi i bez atrybutów headers.
Pogrubiony pierwszy wiersz zamiast caption lub th.
Szerokie tabele wychodzące poza stronę na telefonie albo kontener przewijania, do którego użytkownik klawiatury nie dotrze.
Linki sortowania bez stanu, więc użytkownicy nie wiedzą, jaka jest bieżąca kolejność.

Co wychwytuje kontrola automatyczna, a co wymaga testu ręcznego

Automatycznie (reguła axe-core)	Co znajduje
`td-has-header`	Komórki danych w większych tabelach bez nagłówka
`th-has-data-cells`	Komórki nagłówkowe, które nie opisują żadnych komórek danych
`td-headers-attr`	Atrybuty `headers` wskazujące poza tabelę
`table-fake-caption`	Pierwszy wiersz użyty jako podpis
`empty-table-header`	Komórki nagłówkowe bez tekstu (wskazówka)
`scope-attr-valid`	Nieprawidłowe wartości `scope` (wskazówka)
`table-duplicate-name`	Podpis i opis (summary) o tym samym tekście (wskazówka)
`scrollable-region-focusable`	Przewijany kontener, do którego użytkownik klawiatury nie dotrze

Wszystkie to karty z naszej biblioteki reguł. Test ręczny: proszę ocenić, czy każda tabela jest tabelą danych, czy układu, sprawdzić poprawność i sens nagłówków, przejść po tabeli poleceniami czytnika ekranu i obejrzeć tabelę na ekranie o szerokości 320 pikseli CSS.

Darmowa kontrola jednej strony uruchomiona na stronie produktu z tabelą rozmiarów to automatyczna kontrola, a nie pełny audyt.

Najczęstsze pytania

Jak zrobić dostępną tabelę?

Dla danych tabelarycznych należy użyć prawdziwej tabeli HTML, oznaczyć komórki nagłówkowe elementem th, dodać scope tam, gdzie nagłówki nie są po prostu w pierwszym wierszu lub kolumnie, nadać tabeli podpis (caption) i nie używać tabel do układu strony.

Kiedy potrzebny jest atrybut scope?

Technika W3C H63 mówi, że proste tabele z nagłówkami w pierwszym wierszu lub kolumnie działają ze zwykłymi elementami th; scope pomaga, gdy nagłówki są gdzie indziej. W złożonych tabelach z wielopoziomowymi nagłówkami należy użyć atrybutów id i headers (H43).

Czy użyć role="table" czy role="grid"?

Lepszy jest natywny element table; APG zdecydowanie zachęca do tego, gdy tylko to możliwe. Grid to interaktywny widżet złożony z nawigacją strzałkami, przydatny tylko wtedy, gdy tabela zawiera wiele interaktywnych komórek.

Jak pokazać, która kolumna jest posortowana?

Na nagłówku posortowanej kolumny należy ustawić aria-sort="ascending" lub "descending", a kontrolkę sortowania zrobić jako przycisk wewnątrz komórki nagłówkowej.

Czy kontrola automatyczna przetestuje tabele?

Znajduje komórki danych bez nagłówków, nagłówki bez komórek danych, uszkodzone atrybuty headers, nieprawidłowe wartości scope i fałszywe podpisy. Nie rozstrzygnie, czy tabela naprawdę jest tabelą danych ani czy nagłówki mają sens.

Źródła

W3C WAI, APG Table pattern: https://www.w3.org/WAI/ARIA/apg/patterns/table/
W3C, Technique H63 Using the scope attribute: https://www.w3.org/WAI/WCAG22/Techniques/html/H63
W3C WAI, APG Grid pattern: https://www.w3.org/WAI/ARIA/apg/patterns/grid/
W3C, Understanding 1.4.10 Reflow: https://www.w3.org/WAI/WCAG22/Understanding/reflow.html