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