Tworzenie tabeli HTML zgodnej z WCAG 2.1
Celem tabel danych jest przedstawienie informacji tabelarycznej w siatce lub macierzy oraz posiadanie kolumny lub wierszy, które pokazują znaczenie informacji w siatce. Widzący użytkownicy mogą wizualnie przeskanować tabelę. Mogą szybko tworzyć wizualne skojarzenia między danymi w tabeli a odpowiednimi nagłówkami wierszy i / lub kolumn. Ktoś, kto nie widzi tabeli, nie może utworzyć tych wizualnych skojarzeń, dlatego należy użyć odpowiedniego znacznika, aby utworzyć programistyczne skojarzenie między elementami w tabeli. Gdy odpowiednie znaczniki HTML są na miejscu, użytkownicy czytników ekranu mogą poruszać się po tabelach danych po jednej komórce na raz i słyszą wypowiadane im nagłówki kolumn i wierszy.
Używanie tabeli HTML do stylizacji strony internetowej jest złym pomysłem z następujących powodów:
- Tabele użyte do układu sprawiają, że strony są mniej dostępne dla osób z problemami ze wzrokiem.
- Tabele powodują zamieszanie w tagach. Taki kod jest trudniejszy do napisania, utrzymania i debugowania.
- Tabele nie reagują automatycznie na typ urządzenia.
- Tabele mają domyślnie rozmiar dopasowany do ich zawartości.
W tym artykule opiszemy zasady tworzenia tabeli na stronie internetowej zgodnie z WCAG 2.1.
Komórki nagłówka muszą być oznaczone <th>, a komórki danych <td>, aby tabele były dostępne.
Znacznik <th> - element HTML służący do ustawiania zawartości komórki na nagłówek określonej kolumny lub wiersza. Nagłówki tabel zwykle znajdują się u góry lub po lewej stronie tabeli - w górnym wierszu jako nagłówki kolumn lub w pierwszej kolumnie po lewej stronie jako nagłówki wierszy. Komórki nagłówka wskazują, jaka zawartość znajduje się obok lub pod nimi w tabeli, dzięki czemu tabela jest bardziej czytelna.
Poniżej znajdują się najczęściej używane typy tabel:
1. Tabela z komórkami nagłówka tylko w górnym wierszu.
Tego typu tabela zawiera komórki w pierwszym wierszu oznaczone za pomocą elementu <th> - komórki nagłówkowe dla kolumn tabeli. Jest to dopuszczalne tylko dlatego, że jest to taka mała tabela i dane są wyraźnie różne w każdej kolumnie, dzięki czemu związek między nagłówkiem a komórkami danych jest oczywisty.
Fragment kodu HTML:
<table>
<tr>
<th>Lp.</th>
<th>Imię</th>
</tr>
<tr>
<td>1.</td>
<td>Ewa</td>
</tr>
<tr>
<td>2.</td>
<td>Jan</td>
</tr>
</table>Wygląd tabeli:
| Lp. | Imię |
|---|---|
| 1. | Ewa |
| 2. | Jan |
2. Tabela z niejednoznacznymi danymi
W tym przykładzie danych (imię, nazwisko i miasto) nie można rozróżnić bez wiedzy, której kolumnie / wierszu odpowiadają poszczególne nagłówki. Atrybut scope definiuje kierunek komórek nagłówka i kojarzy je z odpowiednimi komórkami danych. Wartość atrybutu scope dla kolumn to col. Atrybut scope jest również potrzebny w przypadku większych tabel z jednym wierszem lub kolumną nagłówka.
Fragment kodu HTML:
<table>
<tr>
<th scope="col">Imię</th>
<th scope="col">Nazwisko</th>
<th scope="col">Miasto</th>
</tr>
<tr>
<td>Jan</td>
<td>Wiśniewski</td>
<td>Warszawa</td>
</tr>
<tr>
<td>Ewa</td>
<td>Nowak</td>
<td>Kraków</td>
</tr>
</table>Wygląd tabeli:
| Imię | Nazwisko | Miasto |
|---|---|---|
| Jan | Wiśniewski | Warszawa |
| Ewa | Nowak | Kraków |
3. Tabela z komórkami nagłówka tylko w pierwszej kolumnie.
W tego typu tabeli dane z poprzedniego przykładu zostały przedstawione w kolumnie nagłówka po lewej stronie.
Fragment kodu HTML:
<table>
<tr>
<th scope="row">Imię</th>
<td>Jan</td>
<td>Ewa</td>
</tr>
<tr>
<th scope="row">Nazwisko</th>
<td>Wiśniewski</td>
<td>Nowak</td>
</tr>
<tr>
<th scope="row">Miasto</th>
<td>Warszawa</td>
<td>Kraków</td>
</tr>
</table>Wygląd tabeli:
| Imię | Jan | Ewa |
|---|---|---|
| Nazwisko | Wiśniewski | Nowak |
| Miasto | Warszawa | Kraków |
4. Nagłówek mieszany. Tabela z komórkami nagłówka w górnym wierszu i pierwszej kolumnie.
Do takich tabel możemy odnieść tabele, które mają prosty nagłówek wiersza i prosty nagłówek kolumny. W wierszu nagłówka wartość col dla atrybutu scope wiąże każdą komórkę nagłówka z komórkami danych w kolumnie. W kolumnie nagłówka wartość row dla atrybutu scop wiąże poszczególne nagłówki z ich wierszami. Bez tych informacji niektórzy użytkownicy nie zrozumieliby łatwo związku między nagłówkiem a komórkami danych. W poniższym przykładzie etykiety „Otwarte” i „Zamknięte” są przydatne tylko wtedy, gdy można je przypisać do określonego dnia i godziny.
Fragment kodu HTML:
<table>
<tr>
<td></td>
<th scope="col">Dział Marketingu</th>
<th scope="col">Administracja i HR</th>
<th scope="col">Biuro Rachunkowe</th>
</tr>
<tr>
<th scope="row">Poniedziałek</th>
<td>Otwarte</td>
<td>Otwarte</td>
<td>Otwarte</td>
</tr>
<tr>
<th scope="row">Wtorek</th>
<td>Otwarte</td>
<td>Zamknięte</td>
<td>Zamknięte</td>
</tr>
<tr>
<th scope="row">Środa</th>
<td>Otwarte</td>
<td>Otwarte</td>
<td>Otwarte</td>
</tr>
<tr>
<th scope="row">Czwartek</th>
<td>Zamknięte</td>
<td>Zamknięte</td>
<td>Otwarte</td>
</tr>
<tr>
<th scope="row">Piątek</th>
<td>Otwarte</td>
<td>Otwarte</td>
<td>Zamknięte</td>
</tr>
</table>Wygląd tabeli:
| Dział Marketingu | Administracja i HR | Biuro Rachunkowe | |
|---|---|---|---|
| Poniedziałek | Otwarte | Otwarte | Otwarte |
| Wtorek | Otwarte | Zamknięte | Zamknięte |
| Środa | Otwarte | Otwarte | Otwarte |
| Czwartek | Zamknięte | Zamknięte | Otwarte |
| Piątek | Otwarte | Otwarte | Zamknięte |
Tytuł tabeli w dokumencie HTML.
Znacznik <caption> HTML definiuje tytuł tabeli w dokumencie HTML. Przeglądarki tradycyjnie wyświetlają tekst znajdujący się w znaczniku <caption> nad tabelą, ale można umieścić go w innym miejscu (wizualnie) za pomocą właściwości CSS caption-side. Znacznik <caption> może być tylko jeden i należy go wstawić bezpośrednio po znaczniku <table>.
Większość czytników ekranu ogłasza zawartość znaczniku <caption>. Ten znacznik powinien być krótkim tytułem zawartości tabeli. Takie tytuły pomagają użytkownikom znaleźć tabelę i zrozumieć, o co chodzi, i zdecydować, czy chcą ją przeczytać. Jeśli użytkownik używa „trybu tabel”, tytuły są podstawowym mechanizmem identyfikacji tabel.
Fragment kodu HTML:
<table>
<caption>Działy firmy</caption>
<tr>
<th>Nazwa</th>
<th>Godziny pracy</th>
<th>Ilość pracowników</th>
</tr>
<tr>
<td>IT</td>
<td>08:00 - 16:00</td>
<td>10</td>
</tr>
<tr>
<td>Dział Marketingu</td>
<td>08:00 - 16:00</td>
<td>4</td>
</tr>
</table>Jednocześnie element <caption> może występować jako nagłówek tabeli i zawierać podsumowanie, które również opisuje skład tabeli.
Fragment kodu HTML:
<caption>
Dostępność pokojów w hotelu.
Kolumna pierwsza zawiera lokalizację,
pozostałe kolumny pokazują rodzaj i liczbę dostępnych pokojów.
</caption>Jeśli kod jest napisany w ten sposób, tytuł jest dostępny również dla użytkowników wizualnych.
Jeżeli tworząc tabele jej struktura staje się nieco bardziej złożona, warto nadać tabeli bardziej strukturalną definicję. Jednym z najprostszych sposobów jest użycie <thead>, <tbody> i <tfooter>, które pozwalają oznaczyć sekcje nagłówka, stopkę i sekcję treści tabeli. Nagłówek pojawi się na szczycie tabeli, a stopka - na dole. W tabeli powinien znajdować się tylko jeden nagłówek i jedna stopka, natomiast można w niej umieścić dowolną ilość znaczników <tbody>.
Fragment kodu HTML:
<table>
<thead>
<tr>
<th scope="col">Miesiąc</th>
<th scope="col">Suma</th>
</tr>
</thead>
<tbody>
<tr>
<td>Luty</td>
<td>100PL</td>
</tr>
<tr>
<td>Marzec</td>
<td>80PL</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Razem</th>
<td>180PL</td>
</tr>
</tfoot>
</table>Jest masa innych rzeczy, których możesz się nauczyć o tabelach HTML, ale naprawdę daliśmy wystarczająco wiedzy, żeby już zacząć tworzyć tabele zgodnie z WCAG2.1.
Źródła: