WCAG 2.1 – kryterium 1.3.1 – Informacje i relacje: (poziom A) część 3

Jest piątek więc startujemy z naszym rozkładem jazdy! Kolejny WCAG-owy wpis – trzecia część kryterium 1.3.1!

A propo rozkładów… 🙂 Z czym kojarzy Wam się tabela?
Nam głównie z planem odjazdów autobusów albo zbiorem ciekawych excelowych danych… 🙂

Rozmawiając z Łukasz Stanik, dowiedzieliśmy się, że osobie niewidomej bardzo ciężko jest wyobrazić sobie czym jest tabela. Rozumie, że jest to jakiś zbiór danych, jednakże wizualnie zupełnie sobie tego nie wyobraża. Bardzo ważne jest więc by tabela została prawidłowo zaimplementowana, tak by dane w niej zawarte zostały przetworzone przez czytnik ekranu poprawnie i dzięki temu można było je łatwo porównać i wyróżnić.

Co powinna zawierać tabela oprócz zdefiniowania jej poprzez znacznik <table> bądź role=”table”?

Na pewno swego rodzaju opis. Dzięki niemu Użytkownik może domniemać z jakiego typu danymi będzie miał okazję się zmierzyć. Możemy zdefiniować go na parę sposobów. Jednym z nich jest znacznik <caption>. Może być widoczny bądź też ukryty. Do opisu tabeli może użyć również nagłówka (na przykład <h2>) bądź też zwykłego paragrafu <p>, który będzie połączony z tabelą za pomocą atrybutu aria-describedby, jeżeli opis miałby być bardziej rozbudowany.

Co dalej? Musimy ustalić ile nasza tabela będzie posiadała wierszy – znacznik <tr>, a także nagłówków tabeli – znacznik <th>. Jeżeli zbiór danych będzie wielonagłówkowy, należy rozróżnić je poprzez atrybut scope (“row” lub “col”). Dane tabeli oznaczamy za pomocą znacznika <td>.

Przykład poprawnie zaimplementowanej tabeli z dwoma nagłówkami:

<table class="table">
  <caption class="h2">Harmonogram postów na profilu Kinaole</caption>
   <tr>
     <td></td>
     <th scope="col">Poniedziałek</th>
     <th scope="col">Wtorek</th>
     <th scope="col">Środa</th>
     <th scope="col">Czwartek</th>
     <th scope="col">Piątek</th>
   </tr>
   <tr>
     <th scope="row">14:00 - 16:00</th>
     <td>Brak</td>
     <td>Brak</td>
     <td>Post</td>
     <td>Brak</td>
     <td>Post</td>
   </tr>
[...]
</table>

Gotowi na weekend? My tak 🙂 Wszystkiego dobrego!