Piotr Woźniak

Jak zbudować dostępną tabelę na stronie internetowej?

W niniejszym artykule przedstawię najważniejsze informacje dotyczące dostępności tabel stosowanych na stronach internetowych. Dowiecie się o tym, do czego służy tabela i kiedy nie powinno się jej stosować.

Zastosowanie tabel w serwisach internetowych.

Tabele często wykorzystywane są do formatowania wyglądu serwisu — tworzą jego „szkielet” w postaci kolumn i bloków informacyjnych. Osobom niewidomym, a niekiedy także niepełnosprawnym ruchowo trudno poruszać się po stronie skonstruowanej w taki sposób. Czasem śledzenie informacji umieszczonych w tabelach jest wręcz niemożliwe.

Podkreślam z całą mocą, tabele nie powinny być stosowane do tworzenia wyglądu, układu serwisu — jest to szkodliwe dla dostępności informacji.

Do stworzenia blokowego i kolumnowego układu stron należy stosować znaczniki <div> oraz w HTML5 np. <article>, <nav> czy <aside>.

Ciekawostką jest to, że do dziś więcej tabel w internecie służy właśnie do „trzymania” układu stron, niż do publikowania danych tabelarycznych!

Kiedy w takim razie stosować tabele?

Tabele powinny być stosowane wyłącznie do przedstawiania danych tabelarycznych.

Korzyści przedstawiania danych i wszelkich informacji za pomocą tabeli są nie do przecienienia. Użytkownik może zrozumieć jakie są zależności między informacjami, dzięki układowi w postaci kolumn i wierszy. Co więcej, przedstawienie takich danych w inny sposób może utrudniać ich prawidłową interpretację.

Budowa standardowej tabeli

Standardowy, najczęściej spotykany kod tabeli wygląda tak jak poniżej — nie zawiera on istotnych z uwagi na dostępność atrybutów.

Oto jak wygląda kod HTML takiej tabeli:

<table>
<tr>
<td>Rasy kotów</td>
<td>Rasy psów</td>
</tr>
<tr>
<td>Kot Rosyjski niebieski</td>
<td>Hiszpański pies dowodny</td>
</tr>
</tr>
<td> Kot Norweski leśny </td>
<td> Nagi pies peruwiański</td>
</tr>
</table>

Ta sama tabela wyświetlona na stronie będzie wyglądać w taki sposób:

Rasy kotów Rasy psów
Kot Rosyjski niebieski Hiszpański pies dowodny
Kot Norweski leśny Nagi pies peruwiański

Dlaczego standardowa struktura tabeli jest niepoprawna?

Mimo, że zamieszczona powyżej tabela nie zawiera błędów HTML, jest ona nieprawidłowa z uwagi na dostępność. Tabela nie przekazuje informacji o strukturze, zatem osoby niewidome, nie otrzymają za pośrednictwem czytnika ekranu informacji o tym, że kolumna pierwsza to lista ras kotów, a druga, ras psów.

Jakie zatem modyfikacje są konieczne, by tabela była dostępna?

Wymagane zmiany są stosunkowo niewielkie. Należy oznaczyć w HTML, które komórki tabeli są nagłówkami! Jak definiować nagłówki danych (odnosi się to zarówno do kolumn jak i wierszy)? Po pierwsze nie wystarcza tutaj jedynie umieszczenie ich w pierwszym wierszu tabeli, ale muszą być one oznaczone odpowiednim znacznikiem — <th> zamiast znacznika <td>). Czytniki ekranu, z których korzystają osoby niewidome, odczytując zawartość komórek tabeli będą w takim przypadku najpierw odczytywać nagłówek a następnie zawartość aktualnej komórki umożliwiając bezproblemową nawigację po tabeli oraz prawidłową interpretację jej treści.

Kod zmienia się minimalnie:


<table>
<tr>
<th>Rasy kotów</th>
<th>Rasy psów</th>
</tr>
<tr>
<td>Kot Rosyjski niebieski</td>
<td>Hiszpański pies dowodny</td>
</tr>
<td> Kot Norweski leśny </td>
<td> Nagi pies peruwiański</td>
</tr>
</table>

Oto przykład tabeli z prawidłowo oznaczonymi nagłówkami:

Rasy kotów Rasy psów
Kot Rosyjski niebieski Hiszpański pies dowodny
Kot Norweski leśny Nagi pies peruwiański

Dodatkowy atrybut — abbr

Zdarza się, że nagłówki tabeli zawierają długie teksty, których każdorazowe odsłuchiwanie, będzie stratą czasu dla osób niewidomych. Z pomocą przychodzi atrybut abbr.

Oto przykład użycia atrybutu abbr w praktyce.

<th abbr=”Rasy kotów”>Wszystkie rasy kotów, 
które występują w Polsce, uporządkowane alfabetycznie.</th>

Dzięki temu rozwiązaniu osoba niewidoma nie będzie słyszeć za każdym razem całego tekstu zawartego w nagłówku tylko jego skróconą treść.

Tabele z danymi powinny posiadać tytuł

Tabele z danymi prezentowane na stronach serwisu powinny posiadać tytuły, oznaczone znacznikiem <CAPTION>. Przybliża to znacząco zawatośc tabeli użytkownikom czytników ekranu. Co więcej, tytuł ten zostanie także wyświetlony na stronie , więc również osoby widzące będą miały dostęp do tytułu tabeli.

Znacznik <caption> jest definiowany jest w następujący sposób:

<table>
<caption>Lista ras kotów i psów</caption>
<tr>
<th>Rasy kotów</th>
<th>Rasy psów</th>
</tr>
<tr>
<td>Kot Rosyjski niebieski</td>
<td>Hiszpański pies dowodny</td>
</tr>
<td> Kot Norweski leśny </td>
<td> Nagi pies peruwiański</td>
</tr>
</table>

Treść znacznika <caption> zostanie pokazany na stronie np. w taki sposób:

Lista ras kotów i psów o najzabawniejszych nazwach
Rasy kotów Rasy psów
Kot Rosyjski niebieski Hiszpański pies dowodny
Kot Norweski leśny Nagi pies peruwiański

Znacznik podsumowania/streszczenia

Z uwagi na dostępność ważny jest także fakultatywny atrybut „summary” tabeli. Ma on zastosowanie w szczególnie dużych i skomplikowanych tabelach. Atrybut ten nigdy nie jest wyświetlany na stronach, ale osoby niewidome mają dostęp do niego za pośrednictwem czytnika ekranu.

W treści atrybutu można opisać to, jak skonstruowana jest tabela i jakie zależności pomiędzy kolumnami i wierszami są w niej ważne.

Wbrew pozorom znacznik <caption> i atrybut „summary” nie służą do tego samego. <caption> powinien zawierać krótki tytuł tabeli, a „summary”, szczegółowy opis struktury danych zawartych w tabeli.

Polecamy także zapoznanie się z pełnym opisem wszystkich najważniejszych właściwości tabel w kursie HTML Browse Happy.