Nagłówki tabel

Silktide sprawdza, czy tabele prezentujące dane definiują komórki nagłówkowe. Nagłówki informują osoby korzystające z , co oznacza każdy wiersz i kolumna, co widzący czytelnicy wywnioskują z układu tabeli.

Rozważ tabelę nazwisk i miast. Bez wiersza nagłówkowego wartość taka jak „Washington” mogłaby oznaczać jedno albo drugie — jej znaczenie staje się jasne dopiero wtedy, gdy kolumny są opisane.

<!-- Problem: nagłówki są zwykłymi komórkami, więc nie mają znaczenia semantycznego -->
<table>
  <tr>
    <td>Nazwisko</td>
    <td>Miasto</td>
  </tr>
  <tr>
    <td>Washington</td>
    <td>Londyn</td>
  </tr>
</table>

Dlaczego to ważne

porusza się po tabeli, przechodząc przez jedną komórkę naraz. Gdy nagłówki są zdefiniowane, może odczytać odpowiedni nagłówek obok każdej wartości, więc „Londyn” zostanie odczytany jako „Miasto: Londyn”. Bez nagłówków słuchacz słyszy jedynie ciąg wartości i musi zapamiętać układ tabeli, aby je zrozumieć — a w przypadku większych tabel jest to praktycznie niemożliwe.

Pogrubienie górnego wiersza lub zastosowanie innego koloru nie wystarczy. Stylizacja wizualna nie przekazuje znaczenia technologiom wspomagającym; robi to wyłącznie bazowy .

Jak to naprawić

Zmień każdą komórkę nagłówkową z <td> na <th> i dodaj atrybut scope, wskazujący, czy jest ona nagłówkiem kolumny, czy wiersza:

<!-- Naprawiono: nagłówki są prawdziwymi komórkami nagłówkowymi -->
<table>
  <tr>
    <th scope="col">Nazwisko</th>
    <th scope="col">Miasto</th>
  </tr>
  <tr>
    <td>Washington</td>
    <td>Londyn</td>
  </tr>
</table>

Jeśli tabela w ogóle nie prezentuje danych i służy jedynie do wizualnego rozmieszczenia elementów na stronie, dodaj role="presentation" do elementu <table>, aby technologie wspomagające ignorowały jej strukturę. Jeszcze lepiej zastąp tabele układu CSS — we współczesnym projektowaniu stron internetowych zdecydowanie odradza się ich stosowanie.

Jak Silktide to testuje

Znajduje każdą tabelę na każdej stronie.
Pomija tabele oznaczone jako prezentacyjne za pomocą role="presentation".
Pomija tabele mające tylko jeden wiersz lub tylko jedną kolumnę, które prawdopodobnie nie są tabelami danych.
Zgłasza każdą pozostałą tabelę, która w ogóle nie zawiera komórki nagłówkowej <th>.

Rozwiązywanie problemów

Moja tabela ma nagłówki, ale są one stylizowanymi komórkami `<td>`

Komórki, które tylko wyglądają jak nagłówki, nie są uznawane za nagłówki. Technologie wspomagające nie mogą rozpoznać czcionek ani kolorów; zmień te komórki na <th>.

Moja tabela układu została oznaczona

Silktide pomija tylko tabele układu, które deklarują role="presentation". Jeśli tabela rzeczywiście jest prezentacyjna, dodaj ten atrybut — albo zastąp tabelę układem CSS.