Tabele to nieodzowny element prezentacji danych, który jest wykorzystywany przez redaktorów częściej niż osoby korzystające z czytników stron by tego chciały. Jeśli dbasz o dostępność swojej strony internetowej, powinieneś pamiętać również o odpowiednim konstruowaniu tabel. Przyjrzyjmy się bliżej temu zagadnieniu.

Jeśli nie korzystasz na co dzień z czytnika stron internetowych, prawdopodobnie nie wiesz jakie potencjalne trudności spotykają osoby niepełnosprawne próbujące pracować z treścią zawartą w tabelach. Załóżmy, że odwiedzasz stronę internetową, aby sprawdzić w jakich dniach, godzinach i w którym miejscu, uzyskasz dokument, którego potrzebujesz (nowe prawo jazdy). Na stronie urzędu została zamieszczona informacja:

nazwa wydziału, biuro prawne, biuro prasowe, referat komunikacji, referat edukacji, piętro, trzecie, piąte, pierwsze, drugie, pokój, 323, 511, 108, 233, dni tygodnia, poniedziałek-piętek, wtorek-piątek, poniedziałek – piątek, poniedziałek – piątek, godziny, 7 – 15 , 8 – 15 , 7:30 – 15:30, 7 – 15.

Dokładnie w ten sposób lektor przeczytałby tabelę bez włączonego trybu czytania tabel. Czy z przeczytanego ciągu wyrażeń jesteś w stanie łatwo zapamiętać informację o tym kiedy i gdzie możesz odebrać swoje prawo jazdy? Nie jest to zadanie niewykonalne przy odpowiednim skupieniu, przygotowaniu do wyłapania i zapamiętania urywków informacji potrzebnej do załatwienia sprawy. A gdyby urząd informował o 40 podległych mu jednostkach? Nawet, jeśli uruchomimy w czytniku tryb czytania tabel, otrzymana informacja może być dezorientująca, jeśli tabela nie została skonstruowana w prawidłowy sposób.

Tabele danych oraz tabele jako element szablonu – designu strony

Istnieją dwa podstawowe zastosowania dla tabel publikowanych na stronach WWW. Są to tabele z danymi jako element segregujący oraz tabele porządkujące wygląd – szablon danego elementu. Oczywiście prawdą jest, że zastosowanie tabel jako szkieletu dla szablonów jest w obecnych czasach już bardzo znikome. Chodzi jednak o pewne elementy języka HTML, które odróżniają jeden rodzaj tabeli od drugiego. Poniżej prezentujemy tabelę z danymi oraz jej kod źródłowy:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<table>
<caption>Jaś i&nbsp;Małgosia</caption>
<tbody>
<tr>
<th scope="col">Imię</th>
<th scope="col">Wiek</th>
<th scope="col">Kolor oczu</th>
</tr>
<tr>
<th scope="row">Jaś</th>
<td>5 lat</td>
<td>brązowe</td>
</tr>
<tr>
<th scope="row">Małgosia</th>
<td>4 lata</td>
<td>niebieskie</td>
</tr>
</tbody>
</table>

Tabele używane jako szkielet szablonów (design) nie posiadają nagłówków logicznych, które mapują treść z informacjami zawartymi w poszczególnych komórkach. Dzięki możliwościom języka CSS mamy możliwość odrzucenia tabel jako fragmentów szablonu. Jednak przy projektowaniu zarówno wyglądu jak i informacji należy pamiętać o logicznym przedstawieniu informacji, nagłówkach oraz o charakterystyce liniowego odczytu tabeli przez czytniki.

Ważne: Czytniki w przypadku tabeli będących elementem designu prezentują zawartość tabeli literalnie tak, jak jest zamieszczona w kodzie źródłowym i nie informują o tabelarycznym układzie treści. Informacje brzmią więc jak te przytoczone powyżej. Tabela danych informuje o ilości kolumn, wierszy i umożliwia nawigację oraz odczytuje tytuły kolumn i wierszy. Tabela danych „Jaś i Małgosia” zawiera elementy mapujące takie jak <caption> oraz <th>.

Linearyzacja układu tabel

Linearyzacja to przybliżenie modelu układu nieliniowego (takiego jak tabela) do postaci układu liniowego. W przypadku tabel na stronach WWW odnosi się to do kolejności odczytu danych, co ma wpływ sens prezentowanych informacji. To, jak komputer odczytuje tabelę, różni się od naszej percepcji wzrokowej, gdzie porządek odczytu nie istnieje. Wzrokowo jesteśmy w stanie objąć cały układ i zinterpretować sposób, w jaki należy go czytać. Czytniki stron nie interpretują zawartości tabel a po prostu czytają tabelę w porządku, takim jak kod „produkuje” dane wynikowe. Jeśli zaprojektujemy logicznie porządek linearny tabeli, to przetworzenie tabeli przez czytnik również będzie logiczne.

Prezentuj tabele o jak najprostszej konfiguracji pól

Im prostsza konstrukcja tabeli tym łatwiej jest ona przyswajana przed niewidomych użytkowników, którzy są w stanie „usłyszeć” to, czego widomy użytkownik nie dostrzega. Mowa tu o wielostopniowym zagnieżdżaniu tabel w celu tworzenia skomplikowanych układów i powiązań treści. Często jest to praktyka wykonywana niepotrzebnie, dająca się zastąpić dobrze przemyślanym układem logicznym treści i jej podziałem. Należy pamiętać, że zagnieżdżone tabele pomimo, że wizualnie prezentują czytelny układ, dla osoby używającej czytnika będą labiryntem powiadomień o kolejnej tabeli i ilości wierszy i kolumn.

Przygotowanie poprawnej tabeli danych

Właściwym celem tabel danych, spełniających wymogi dostępności, powinno być przedstawienie informacji tabelarycznych w formie siatki lub matrycy oraz kolumny i wierszy będących nagłówkami wyjaśniającymi znaczenie danych wewnątrz. W tym calu należy używać znaczników do tworzenia powiązań między elementami w tabeli.

Opisy tabel

Tabele danych powinny zawierać krótki opisowy tytuł tabeli, który wskazuje na zawartość w sposób jasny i czytelny. Odpowiednim znacznikiem jest <caption>, który powinien zostać użyty zaraz po otwarciu tabeli.

<table>
<caption>Tabela zestawiająca dane o jednostkach podległych</caption>…

Identyfikuj nagłówki wierszy i kolumn

Kluczowym elementem na drodze do stworzenia dostępnej tabeli jest umieszczenie nagłówków znaczeniowych dla wierszy i kolumn. Stosuje się do tego element <th>, który w przypadku nagłówków zastępuje standardowy element <td>. Atrybut scope definiuje czy dane pole jest nagłówkiem dla kolumny (scope=”col”) czy dla wiersza (scope=”row”).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<table>
<caption>Tabela pokazująca nagłówek i&nbsp;pozostałe elementy</caption>
<tbody>
<tr>
<th scope="col">Nagłówek</th>
<th scope="col">Nagłówek</th>
<th scope="col">Nagłówek</th>
</tr>
<tr>
<th scope="row">Nagłówek</th>
<td>Treść</td>
<td>Treść</td>
</tr>
<tr>
<th scope="row">Nagłówek</th>
<td>Treść</td>
<td>Treść</td>
</tr>
</tbody>
</table>