
WCAG 2.1 – kryterium 1.3.1 – Informacje i relacje: (poziom A) część 3
- Przejdź do artykułów z tagiem akademiaWCAG
- Przejdź do artykułów z tagiem dostępność cyfrowa
- Przejdź do artykułów z tagiem tabele
Treść artykułu
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!

Małgorzata Szymczak
Accessibility Specialist & Junior Frontend Developer
Polecane artykuły
-
10.08.2022Dostępność cyfrowa
SVG… SVG… czym jest SVG
SVG (ang. Scalable Vector Graphics) – to format wektorowego pliku graficznego, który w odróżnieniu do rastrowych jpg, png, gif, składa…
-
24.01.2023UX & UI
Zalecane wymiary obrazów na stronach www
Każda osoba, która zajmuje się projektowaniem stron www (albo mająca z nim styczność) wie, jak ważne jest wybranie odpowiednich wymiarów…
-
30.11.2022Badania
Jak zrobić audyt UX. Część 1 – Teoria, odrobina autokrytyki i parę praktycznych porad…
Dzisiaj wrzucamy na blog temat audytów użyteczności! Pomysł na ten wpis narodził się przy okazji audytu UX naszego bloga. Postanowiliśmy…