Wymagania dostępności
-
1.3.1 Informacje i relacje - poziom A: Informacje, struktura oraz relacje między treściami przekazywane poprzez prezentację mogą być odczytane przez program komputerowy lub istnieją w postaci tekstu.
-
4.1.2 Nazwa, rola, wartość - poziom AA: Dla wszystkich komponentów interfejsu użytkownika (w tym, ale nie tylko, elementów formularzy, łączy oraz komponentów wygenerowanych przez skrypty) nazwa oraz rola mogą być określone programowo; stan, właściwości oraz wartości, które mogą być ustawione przez użytkownika, mogą również być ustawione programowo; powiadomienie o zmianach w tych elementach dostępne jest dla programów użytkownika, w tym technologii wspomagających.
Uzasadnienie metody testowej
W przypadku użytkowników technologii wspomagających tabele danych muszą jawnie kojarzyć dane tabeli z nagłówkami wierszy i kolumn tabeli za pomocą znaczników programowych. Znaczniki tabel ułatwiają także nawigację użytkownikom technologii wspomagających, zapewniając programowe punkty orientacyjne za pomocą nagłówków kolumn i wierszy.
Jeśli elementy <table>
są używane do celów układu, niedozwolone sa elementy struktury tabeli danych, takie jak <th>
, <caption>
lub summary
.
Ograniczenia, założenia lub wyjątki
- Tabele danych to tabele, w których informacje w komórce wymagają nagłówka wiersza lub kolumny, aby odpowiednio opisać zawartość komórki. Jeśli tabela jest używana do rozmieszczania na stronie komponentów ze względu na estetykę wizualną, wówczas jest traktowana jako tabelę układu.
- Może się wydawać, że niektóre treści wymagają wizualnej struktury tabeli danych, ale linearyzacja treści i wyświetlenie kodu ujawnia, że treść jest zrozumiała bez tabeli.
- Technikę tabeli układu można stosować w projektach responsywnych. Te elementy wykorzystują CSS i/lub inne metody stylizacji do prezentacji treści w kolumnach lub wierszach. Przekazywane informacje nie opierają się na programowych relacjach między nagłówkami kolumn lub wierszy, niezbędnych do ich zrozumienia. Taka treść nie jest tabelą danych i nie powinna wykorzystywać elementu tabeli, atrybutu ARIA
role="table"
ani powiązanych atrybutów tabeli danych. Powinna być badana przy użyciu innych testów podstawowych, takich jak 13. Struktura treści lub ewentualnie 10. Formularze (powiązane instrukcje). - Wiersze powiązanych danych muszą mieć nagłówek wiersza, aby użytkownicy technologii wspomagających mogli zrozumieć relacje między komórkami danych wiersza. Nie każda tabela wymaga nagłówka wiersza. Na przykład miesiąc kalendarzowy to tabela danych, zwykle z dniami tygodnia jako nagłówkami kolumn. Daty w wierszach nie są powiązane, więc zazwyczaj nie ma nagłówka wiersza. Gdyby jednak w każdym wierszu znajdowała się komórka wskazująca kolejny tydzień roku, komórka ta służyłaby jako nagłówek wiersza dla dat w tym wierszu.
- Gdy w instrukcjach testu podstawowego wskazano atrybut ARIA
role
, odnosi się to do pierwszej prawidłowej wartości atrybuturole
w znaczniku.
12.A Procedura testowania roli tabeli danych
Identyfikator testu podstawowego: 12.A-DataTableRole
Identyfikacja treści
Znajdź treść/dane, które są wizualnie przedstawione w tabeli, rozmieszczone w wierszach i kolumnach, w których po linearyzacji treść nie ma znaczącej (sensownej) kolejności.
Uwaga: Linearyzacja treści tabeli polega na prezentacji dwuwymiarowej treści tabeli w jednowymiarowej kolejności treści w źródle, zaczynając od pierwszej komórki w pierwszym wierszu i kończąc na ostatniej komórce w ostatnim wierszu, od lewej w prawo, od góry do dołu.
Instrukcja testowania
- Tabela: Sprawdź, czy każda tabela danych ma rolę programową
table
, który określa ją jako tabelę danych, zdefiniowaną za pomocą jednej z wymienionych poniżej technik. Jeśli używana jest więcej niż jedna technika, wybierz pierwszą jawnie zdefiniowaną rolę i wykonaj pozostałe testy przy użyciu tego wyboru. [KS 4.1.2]- HTML: znacznik
<table>
, który nie ma jawnie zdefiniowanego atrybutu roli i którego rola może być zmieniona z roli tabeli na inną, np. role=”presentation” lub role=”none”. - ARIA: atrybut
role="table"
- ARIA: atrybut
role="grid"
- ARIA: atrybut
role="treegrid"
- HTML: znacznik
- Komórka danych tabeli: Sprawdź, czy każda komórka danych używa tylko jednej z następujących metod w celu zdefiniowania jej roli jako komórki danych w wierszu tabeli, w zależności od techniki określonej w pierwszym kroku:
- w przypadku znacznika HTML
<table>
:<td>
dla komórki, która musi znajdować się wewnątrz wiersza<tr>
. - w przypadku atrybutu ARIA
role="table"
: element komórki danych z atrybutemrole="cell"
musi znajdować się wewnątrz elementu z atrybutem ARIArole="row"
. - w przypadku atrybutu ARIA
role="grid"
lub ARIArole="treegrid"
: element komórki danych z atrybutem ARIArole="gridcell"
musi znajdować się wewnątrz elementu z atrybutem ARIArole="row"
(jeśli siatka ARIA nie korzysta z rdzennego elementu i struktury<table>
).
- w przypadku znacznika HTML
- Komórka nagłówka tabeli: W przypadku zastosowanej techniki sprawdź, czy każda komórka nagłówka ma programowo przypisaną rolę nagłówka i znajduje się w nadrzędnym elemencie wiersza:
- dla elementu HTML
<table>
: nagłówek<th>
musi znajdować się wewnątrz elementu nadrzędnego wiersza<tr>
. - dla tabeli utworzonej za pomocą atrybutów ARIA
role="table"
,role="grid"
,role="treegrid"
: każdy element zrole="columnheader"
lubrole="rowheader"
musi znajdować się w elemencie nadrzędnym zrole="row"
.
- dla elementu HTML
Wynik testów
Jeśli którykolwiek z powyższych testów zakończy się niepowodzeniem, test podstawowy 12.A-DataTableRole kończy się niepowodzeniem.
12.B Procedura testowania powiązań nagłówków tabeli danych
Identyfikator testu podstawowego: 12.B-DataTableHeaderAssociation
Identyfikacja treści
Znajdź w każdej tabeli danej określonej w teście 12.A wszystkie nagłówki kolumn i wierszy dla każdej komórki danych.
Instrukcje testowe
- Powiązanie komórki danych z nagłówkiem: Użyj techniki programowania (HTML lub ARIA) określonej w teście 12.A. Sprawdź, czy każda komórka danych jest programowo skojarzona z jej nagłówkiem (nagłówkami) [KS 1.3.1]:
- Tylko w przypadku prostych tabel HTML utworzonych znacznikiem
<table>
: z nagłówkami kolumn tylko w pierwszym wierszu, które mają zastosowanie do wszystkich komórek danych w tej samej kolumnie, i nagłówkami wierszy tylko w pierwszej kolumnie, które mają zastosowanie do wszystkich komórek danych w tym samym wierszu; każda komórka nagłówka może być oznaczona<th>
bez dodatkowych atrybutów. - w przypadku innych tabel HTML utworzonych znacznikiem
<table>
: komórka nagłówka może być oznaczona atrybutem<th scope="[col|row|colgroup|rowgroup]">
, jeśli wszystkie komórki danych, do których odnoszą się nagłówki, znajdują się odpowiednio w tej samej kolumnie, wierszu, grupie kolumn lub grupie wierszy.- W HTML4 obsługiwane jest
<td scope="[row|col]">
. - W HTML5
<td scope="[row|col]">
nie jest obsługiwane, więc wszystkie komórki nagłówka muszą być objęte znacznikiem<th>
. - Atrybut zakresu (
scope
) ma zastosowanie tylko do komórek, które znajdują się po komórkach nagłówka w kolejności odczytu.
- W HTML4 obsługiwane jest
- w przypadku innych tabel HTML utworzonych znacznikiem
<table>
: każda komórka danych<td>
może być powiązana z komórką nagłówka za pomocą atrybutuheaders
z unikalną wartością identyfikatora<td headers="[id]">
:- Komórki danych z atrybutem
headers
muszą odwoływać się do identyfikatorów wszystkich odpowiednich komórek nagłówka na potrzeby powiązania programowego. - Identyfikatory, do których odwołuje się atrybut headers dla komórek danych, muszą odnosić się do elementów w tej samej tabeli i w spójnej kolejności.
- Komórki danych z atrybutem
- w przypadku innych tabel HTML, która mają OBA atrybuty -
scope
ORAZheaders
w tej samej tabeli: komórka danych z odwołaniem do nagłówków zastąpi wszystkie atrybutyscope
dla tej konkretnej komórki danych. W związku z tym komórki danych z odwołaniem do nagłówków muszą wskazywać identyfikatory wszystkich powiązanych nagłówków. - W przypadku tabel utworzonych za pomocą atrybutu ARIA
role="table"
,role="grid"
lubrole="gridtree"
: każdy element nagłówka kolumny musi miećrole="columnheader"
, a każdy element nagłówka wiersza musi miećrole="rowheader"
.
- Tylko w przypadku prostych tabel HTML utworzonych znacznikiem
Wynik testów
Jeśli którykolwiek z powyższych testów zakończy się niepowodzeniem, test podstawowy 12.B-DataTableHeaderAssociation również kończy się niepowodzeniem.
12.C Procedura testowania tabel układu
Identyfikator testu bazowego: 12.C-LayoutTable
Identyfikacja treści
Znajdź treść/dane przedstawione wizualnie w tabeli, która po linearyzacji przedstawia treść w sensownej kolejności.
Uwaga: Linearyzacja treści tabeli to prezentacja dwuwymiarowej treści tabeli w jednowymiarowej kolejności treści w źródle, zaczynając od pierwszej komórki w pierwszym wierszu, a kończąc na ostatniej komórce w ostatnim wierszu, od lewej do prawej, od góry do dołu.
Instrukcje testowe
- Sprawdź, czy tabela służy wyłącznie do celów układu (rozmieszczenia elementów):
- Nie wyznacza tabeli układu za pomocą atrybutu
role="table"
i powiązanych atrybutów tabeli ARIA. - Nie ma elementów nagłówka tabeli HTML i/lub powiązanych atrybutów (np.
<th>
,summary
,<caption>
,scope
i/lubheaders
), chyba że spełniony jest co najmniej jeden z poniższych warunków:- element HTML
<table>
ma atrybutrole="prezentation"
- element HTML
<table>
ma atrybutrole="none"
- element HTML
- Nie ma żadnych elementów z
role="columnheader"
lubrole="rowheader"
. Ponieważ te role są jawne, zastosowanierole="presentation"
lubrole="none"
do elementu nadrzędnego nie zostanie odziedziczone (zgodnie z Presentational Roles Conflict Resolution, „Jeśli dozwolony element podrzędny ma jawną rolę nieprezentacyjną, programy użytkownika MUSZĄ zignorować odziedziczoną rolę prezentacyjną i uwidocznić element z jego jawną rolą”.)
- Nie wyznacza tabeli układu za pomocą atrybutu
Wynik testów
Jeśli którykolwiek z powyższych testów zakończy się niepowodzeniem, test podstawowy 12.C-LayoutTable również kończy się niepowodzeniem.
Poradnik: Wskazówki dotyczące usprawniania procesu testowego
- Treści, które są prezentowana za pomocą CSS, aby wyglądały jak tabela, ale nie polegają na powiązaniu komórek z nagłówkami, można najłatwiej rozpoznać przez linearyzację. Innym pomocnym wskaźnikiem może być to, że tabela zawiera tylko nagłówki wierszy albo tylko nagłówki kolumn, ale nie oba.
- Testy podstawowe 12.A i 12.C należy przeprowadzić dla każdej tabeli danych.
Techniki WCAG 2.2
Przy opracowywaniu tej procedury testowej, wzięto pod uwagę następujące wystarczające techniki i typowe błędy:
- H43: Użycie atrybutów id i headers do kojarzenia komórek danych z komórkami nagłówków w tabelach danych
- H51: Użycie znaczników tabel do prezentacji danych tabelarycznych
- H63: Użycie atrybutu scope do kojarzenia komórek nagłówka z komórkami danych w tabelach
- F46: Niespełnienie kryterium sukcesu 1.3.1 z powodu użycia elementów th, elementów caption lub niepustych atrybutów summary w tabelach formujących układ
- F49: Niespełnienie kryterium sukcesu 1.3.2 z powodu użycia do formowania układu tabeli HTML, która nie ma sensu po linearyzacji