blog na temat dostępności stron internetowych

Przejdź do głównej treści

Tabele HTML

W kolejnym artykule będącym przypomnieniem podstaw HTML przyjrzyjmy się tabelom; omówimy pokrótce zasady stosowania odpowiednich elementów oraz przedstawimy ogólne zalecenia dotyczące implementacji prostych tabel. Bardziej złożonym tabelom zostanie poświęcony osobny artykuł.

Podstawowe elementy tabel HTML

<table>, <tr>, <th>, <td>

Głównym elementem służącym do oznaczania tabeli jako całości jest <table>,  w którym zawarte są wszystkie części składowe tabeli.

Każdy wiersz tabeli oznaczony jest przy pomocy elementu <tr> (ang. “table row“).
W skład wiersza tabeli wchodzą standardowe komórki danych oznaczone jako <td> (z ang. “table data cell“) lub komórki nagłówkowe – <th> (ang. “table header cell“).

Proste tabele z reguły posiadają jeden (pierwszy) wiersz z komórkami nagłówkowymi, które opisują dane w każdej z kolumn,  i / lub jeden poziom komórek nagłówkowych dla wierszy (pierwsza kolumna w tabeli).

Przykład 1

produkt Sklep A Sklep B Sklep C
AB100X [szt.] 940 895 467
CD1000Y [szt.] 780 753 528
EF2000Z [szt.] 405 398 234
<table>
  <tr>
    <th>Produkt</th>
    <th>Sklep A</th>
    <th>Sklep B</th>
    <th>Sklep C</th>
  </tr>
  <tr>
    <td>AB100X [szt.]</td>
    <td>940</td>
    <td>895</td>
    <td>467</td>
  </tr>
  <tr>
    <td>CD1000Y [szt.]</td>
    <td>780</td>
    <td>753</td>
    <td>528</td>
  </tr>
  <tr>
    <td>EF2000Z [szt.]</td>
    <td>405</td>
    <td>398</td>
    <td>234</td>
  </tr>
</table>

Poniższy kod (z pominiętymi znacznikami zamykającymi) jest również poprawny:

<table>
  <tr>
    <th>Produkt
    <th>Sklep A
    <th>Sklep B
    <th>Sklep C
  <tr>
    <td>AB100X [szt.]
    <td>940
    <td>895
    <td>467
  <tr>
    <td>CD1000Y [szt.]
    <td>780
    <td>753
    <td>528
  <tr>
    <td>EF2000Z [szt.]
    <td>405
    <td>398
    <td>234
</table>

Atrybut “scope

Elementy <th> mogą posiadać atrybut “scope“. Służy on do określenia, które komórki danych element ten opisuje, np: “row” (kolejne komórki w tym samym wierszu), “col” (komórki w tej samej kolumnie), “rowgroup” (grupę wierszy) bądź też “colgroup” (grupę kolumn), np:

<th scope="col">Sklep B</th>

Atrybut ten nie jest obowiązkowy i w prostych tabelach (takich, jak ta przedstawiona w przykładzie 1), nie jest konieczne dodanie go do elementów  <th>. W tego typu tabelach związki pomiędzy komórkami nagłówkowymi i przyporządkowanymi im komórkami danych są łatwe do rozpoznania przez czytniki ekranu. Dodanie atrybutu “scope” nigdy jednak nie zaszkodzi, a w przypadku bardziej skomplikowanych tabel może być wręcz konieczne.

<caption>

Element <caption> służy do oznaczenia tekstu, który stanowi opis treści tabeli, jej  tytuł – zawartość tego elementu powinna jasno i zwięźle objaśniać zawartość tabeli. Choć element <caption> nie jest obowiązkowy, na ogół jest przydatny.

Wróćmy na chwilę do przykładu nr 1 – czy jesteśmy w stanie poprawnie zinterpretować przedstawione w nim dane? Wiemy, że w tabeli podana jest liczba sztuk trzech produktów w trzech sklepach. Ale co liczby te reprezentują? Ilość produktów, które zostały sprzedane? Dostarczone? Zwrócone?

Dodajmy zatem tę informację za pomocą elementu <caption> (należy pamiętać, że powininen być on umieszczony bezpośrednio po tagu <table>):

Przykład 2

Ilość sprzedanych produktów (kwiecień 2017)
produkt Sklep A Sklep B Sklep C
AB100X [szt.] 940 895 467
CDY1000Y [szt.] 780 753 528
EF2000Z [szt.] 405 398 234
<table>
  <caption>Ilość sprzedanych produktów (kwiecień 2017)</caption>
  <tr>
    <th>Produkt</th>
    <th>Sklep A</th>
    <th>Sklep B</th>
    <th>Sklep C</th>
 </tr>
 <tr>
   <td>AB100X [szt.]</td>
   <td>940</td>
   <td>895</td>
   <td>467</td>
 </tr>
 <tr>
   <td>CD1000Y [szt.]</td>
   <td>780</td>
   <td>753</td>
   <td>528</td>
 </tr>
 <tr>
   <td>EF2000Z [szt.]</td>
   <td>405</td>
   <td>398</td>
   <td>234</td>
 </tr>
</table>

<thead><tbody>, <tfoot>

Opcjonalne elementy <thead><tbody> i <tfoot> służą do grupowania wierszy i komórek tabeli pełniących określoną rolę. Elementy te dzielą tabelę na logiczne sekcje: <thead> powinien zawierać wiersze z komórkami nagłówkowymi, <tfoot> – wiersze z komórkami stopki tabeli, zaś <tbody> wszystkie pozostałe wiersze zawierające poszczególne komórki danych.

Stosowanie tych elementów nie jest wymagane z punktu widzenia dostępności – tabela z <thead><tbody>, <tfoot> jest prezentowana technologiom asystującym w taki sam sposób, jak tabela ich pozbawiona.

Przykład 3

Ilość sprzedanych produktów (kwiecień 2017)
produkt Sklep A Sklep B Sklep C
AB100X [szt.] 940 895 467
CD1000Y [szt.] 780 753 528
EF2000Z [szt.] 405 398 234
Wszystkie: [szt.] 2,125 2,046 1,229
<table>
  <caption>Ilość sprzedanych produktów (kwiecień 2017)</caption>
  <thead>
    <tr>
      <th>Produkt</th>
      <th>Sklep A</th>
      <th>Sklep B</th>
      <th>Sklep C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>AB100X [szt.]</td>
      <td>940</td>
      <td>895</td>
      <td>467</td>
    </tr>
    <tr>
      <td>CD1000Y [szt.]</td>
      <td>780</td>
      <td>753</td>
      <td>528</td>
    </tr>
    <tr>
      <td>EF2000Z [szt.]</td>
      <td>405</td>
      <td>398</td>
      <td>234</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Wszystkie: [szt.]</td>
      <td>2,125</td>
      <td>2,046</td>
      <td>1,229</td>
    </tr>
  </tfoot>
</table>

WCAG 2.0 a proste tabele

Kryterium sukcesu 1.3.1 “Informacje i relacje” zawiera kilka technik odnoszących się do tabel.

Podstawowa struktura tabeli

Najbardziej ogólną jest technika H51, która dotyczy stosowania poprawnych elementów HTML do określenia struktury danych tabelarycznych. Dane uznawane są za “tabelaryczne”, gdy istnieją logiczne związki pomiędzy poszczególnymi elementami w dwóch wymiarach – poziomym (wiersze) i pionowym (kolumny). Aby zależności te zostały rozpoznane i prawidłowo zinterpretowane przez technologie asystujące, poszczególne części tabeli muszą być poprawnie oznaczone przy pomocy elementów <tr>, <th><td>.

Choć dla przeciętnego użytkownika wystarczy, że dane tabelaryczne są w odpowiedni sposób przedstawione wizualnie (wyświetlone w siatce, z czytelnie wyróżnionymi wierszami i kolumnami), dla osób niewidomych kluczowe jest – jak zawsze – użycie prawidłowych elementów HTML. W przeciwnym użytkownicy ci nie będą w stanie zrozumieć zależności pomiędzy poszczególnymi elementami tabeli.

Procedura testowa techniki H51 jest prosta: należy sprawdzić, czy w danym dokumencie HTML zawarte są dane tabelaryczne. Jeśli tak, należy upewnić się, że dane te zostały poprawnie oznaczone przy pomocy przynajmniej takich elementów, jak <table>, <tr>, <th> <td>.

Poniżej przedstawiony jest przykład użycia nieprawidłowego kodu do zbudowania tabeli. Choć poniższy komponent może wyglądać jak tabela, tak naprawdę nią nie jest:

<div class="tabela">
  <div class="wiersz-tabeli">
    <span class="komorka-naglowkowa-tabeli">Uczeń</span>
    <span class="komorka-naglowkowa-tabeli">Matematyka</span>
    <span class="komorka-naglowkowa-tabeli">Język polski</span>
    <span class="komorka-naglowkowa-tabeli">Fizyka</span>
    <span class="komorka-naglowkowa-tabeli">Historia</span>
    <span class="komorka-naglowkowa-tabeli">Informatyka</span>
  </div>
  <div class="wiersz-tabeli">
    <span class="komorka-tabeli">Jan Kowalski</span>
    <span class="komorka-tabeli">4</span>
    <span class="komorka-tabeli">4</span>
    <span class="komorka-tabeli">3</span>
    <span class="komorka-tabeli">3</span>
    <span class="komorka-tabeli">5</span>
  </div>
  <div class="wiersz-tabeli">
    <span class="komorka-tabeli">Agata Nowak</span>
    <span class="komorka-tabeli">5</span>
    <span class="komorka-tabeli">4</span>
    <span class="komorka-tabeli">3</span>
    <span class="komorka-tabeli">2</span>
    <span class="komorka-tabeli">5</span>
  </div>
</div>

Powyższy element zostanie przedstawiony osobom niewidomym jako ciąg niepowiązanych ze sobą słów, statyczny tekst pozbawiony jakiejkolwiek stuktury (“Uczeń Matematyka Język polski Fizyka Historia Informatyka Jan Kowalski 4 4 3 3 5 […]”).

Jeśli powyższe dane zostałyby prawidłowo oznaczone, osoba korzystająca z czytnika ekranu zostałaby poinformowana, że jest to tabela zawierająca 3 wiersze i 6 kolumn. Możliwe też byłoby użycie określonych skrótów klawiaturowych pozwalających na łatwe przemieszczanie się pomiędzy komórkami, wierszami i kolumnami tabeli. Co więcej, ilekroć osoba niewidoma przeszłaby do określonej komórki danych (np. ostatniej komórki w drugim wierszu), odpowiadająca jej komórka nagłówkowa zostałaby automatycznie odczytana (np. “Informatyka: 5”).

Opis treści tabeli

Inną techniką WCAG 2.0, która odnosi się do tabel, jest technika H39: Używanie elementu <caption> w celu powiązania tabeli z jej opisem. Zawartość tego elementu jest automatycznie odczytywana, gdy osoba korzystająca z czytnika ekranu przenosi tzw. wirtualny fokus do tabeli.

Procedury testowe tej techniki są następujące:

  • jeśli element <caption> jest obecny w tabeli, należy upewnić się, że zawiera on tekst stanowiący tytuł bądź zwięzły opis tabeli
  • jeśli istnieje tekst stanowiący tytuł tabeli, należy go oznaczyć przy pomocy elementu <caption> – a nie, na przykład, jako zwykły akapit tekstu przed tabelą:
<!-- poniższy akapit nie jest w żaden sposób powiązany w kodzie z tabelą -->
<p>Sprzedaż produktu A w roku 2016</p>
<table>
  [...]
</table>

Tworzenie layoutu na bazie tabel HTML

W przeszłości web deweloperzy często posługiwali się tabelami HTML w celu wizualnego rozmieszczenia treści na stronie. Kilkanaście lat temu CSS nie oferował bogactwa właściwości, które mamy do dyspozycji teraz, stąd też stosowanie tabeli było często najprostszym i najbardziej niezawodnym sposobem na zbudowanie layoutu strony.

Czasy się jednak zmieniły – obecnie nie ma absolutnie żadnego powodu, żeby stosować tabele HTML do budowania layoutów. Jest to bardzo zła praktyka, używanie której wydaje negatywne świadectwo umiejętnościom web dewelopera.
Mamy do wyboru wiele właściwości pozwalających na rozmieszczenie elementów na stronie; istnieją nawet takie właściwości CSS jak display: table, display: table-row, display: table-cell, które są odpowiednikami tabelarycznych elementów w HTML, pozwalającymi na osiągnięcie tego samego efektu wizualnego.

Stosowanie tabel HTML do celów prezentacyjnych stanowi problem dla osób korzystających z czytników ekranu. Przeglądanie strony, której elementy zostały umieszczone w komórkach tabeli, jest uciążliwe i dezorientujące. Na przykład, za każdym razem, gdy użytkownik przechodzi do kolejnego elementu, zamieszczonego w osobnej komórce tabeli (np. do formularza wyszukiwania), osoba ta zostanie automatycznie poinformowana, gdzie w tabeli element ten się znajduje (np. “czwarty wiersz, trzecia kolumna”), co stanowi kompletnie bezużyteczną informację.

Choć może wydawać się to zaskakujące, wytyczne WCAG 2.0 nie zabraniają stosowania tabeli do tworzenia layoutu, a jedynie odradzają to (należy pamiętać, że wytyczne te powstały niemal 10 lat temu). WCAG 2.0 zawiera jednak zalecenia dotyczące tego, jak należy “naprawić” tego typu tabele.

Jeśli zatem absolutnie niezbędne i nieuniknione jest użycie tabeli HTML do zbudowania layoutu strony, należy dodać do elementu <table> atrybut ARIA role="presentation". Spowoduje on, że tabela i zawarte w niej elementy tabelaryczne nie zostaną rozpoznane jako takowe przez czytniki ekranu; <table>, <tr> i <td> zostaną potraktowane  jako elementy niesemantyczne, takie jak <div> czy <span>.

W przypadku tabel HTML stosowanych wyłącznie w celu osiągnięcia określonego efektu wizualnego nie należy też stosować elementów <th> i <caption>. Czytniki ekranu posługują się określonymi algorytmami, by oszacować czy dana tabela faktycznie przedstawia dane tabelaryczne, czy też jest użyta jedynie w celu rozmieszczenia elementów na stronie. W skład przeprowadzanych testów wchodzą sprawdziany na obecność atrybutu ARIA role="presentation" oraz elementów <caption> i <th>. Obecność role="presentation" sugeruje, że jest to tabela służąca do layoutu, ale występowanie wymienionych wyżej elementów wskazuje, że jest to prawdziwa tabela zawierająca dane tabelaryczne.

Inne zalecenia dotyczące tabeli

Organizacja WAI (ang. Web Accessibility Initiative) sformułowała też kilka ogólnych zasad dotyczących tabel, będących zaleceniami z pogranicza użyteczności i dostępności.

Ostylowanie komórek nagłówkowych

Użytkownikom łatwiej będzie zrozumieć treść tabeli, jeśli komórki nagłówkowe zostaną ostylowane w sposób, który pozwoli na łatwe odróżnienie ich od komórek danych (na przykład przy pomocy pogrubionego tekstu lub innego koloru tła):

td {
  background-color: #fff;
  font-weight: 400;
}

th {
  background-color: #eee;
  font-weight: 700;
}

“Efekt zebry”

Kolejnym sposobem na przedstawienie treści tabeli w bardziej przejrzysty sposób jest stosowanie innego koloru tła w naprzemiennych wierszach tabeli, np:

tbody tr:nth-child(even) {
  background-color: #f7f7f7;
}

Różnica w ostylowaniu parzystych i nieparzystych wierszy jest zwłaszcza przydatna dla użytkowników z zaburzeniami kognitywnymi i osób niedowidzących.

Stosowanie relatywnych jednostek do określania rozmiaru tabeli

W dobie responsywnych stron wydaje się to oczywiste, ale tym niemniej warto tę zasadę przypomnieć: jeśli wymagane jest ustalenie szerokości tabeli lub jej kolumn w kodzie, nie należy używać do tego celu jednostek absolutnych, takich jak piksele.

Nieograniczona wysokość komórek

Należy unikać ustalania wysokości komórek tabeli. Lepiej pozwolić im na naturalne dostosowanie się do treści, które są w nich zawarte. Pamiętajmy, że niektórzy użytkownicy powiększają wielkość czcionki za pomocą narzędzi przeglądarki – komórki tabeli muszą być w stanie dostosować się do zwiększonego rozmiaru tekstu zawartych w nich danych.

Dostępność treści tabeli na mniejszych ekranach

Tabele (szczególnie te składające się z wielu kolumn) mogą wykraczać poza szerokość ekranu, na którym wyświetlona jest strona. Warto sprawdzić, czy pomimo tego użytkownicy mają dostęp do wszystkich danych, np. poprzez przewijanie treści tabeli (niewłaściwie zastosowana właściwość CSS “overflow ” może to uniemożliwić).
Istnieje również wiele technik służących do zmiany sposobu, w jaki dane tabelaryczne wyświetlone są na mniejszych ekranach (np. te opisane w artykule “Accessible, simple, responsive tables” na CSS Tricks). Stosując tego typu rozwiązania należy zawsze upewnić się, że zmieniając wygląd czy też strukturę tabeli nie zniekształcamy jednocześnie związków pomiędzy komórkami i że treść tabeli jest nadal zrozumiała i sensowna zarówno dla użytkowników widzących, jak i tych posługujących się czytnikami ekranu.

Dodaj komentarz

Należy wypełnić wszystkie pola oznaczone asteryskiem (*).
Zanim komentarz zostanie opublikowany będzie musiał zostać zatwierdzony przez moderatora.

Możesz wykorzystać następujące elementy HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>