- Poziom
- A
- Od wersji
- WCAG 2.0
- Pozycje
- 181 / 193
1.3.1 Informacje i relacje
Struktura widoczna na ekranie (nagłówki, listy, tabele, etykiety) musi istnieć w kodzie strony, a nie tylko w stylach.
/ Czego wymaga
To, co osoba widząca odczytuje z układu strony, musi być dostępne także dla oprogramowania. Duży pogrubiony tekst wygląda jak nagłówek, wcięta kolumna jak lista, siatka jak tabela, a słowo obok pola jak jego etykieta. Jeśli kod strony nie mówi tego samego, czytnik ekranu odczytuje jednolity ciąg tekstu, a jego użytkownik nie przeskoczy między nagłówkami, nie usłyszy, do której kolumny należy komórka, i nie dowie się, o co pyta pole formularza.
Kryterium jest spełnione, gdy każdą taką relację da się ustalić na podstawie kodu albo gdy jest ona podana w tekście. Pole wymagane oznaczone słowem „wymagane” przechodzi; pole oznaczone wyłącznie czerwoną ramką nie. WCAG nie nakazuje jednego h1 na stronie ani nie zakazuje pominięcia poziomu nagłówka i nie wymienia tu żadnych wyjątków. Błędem jest rozbieżność: struktura, która istnieje dla oka, a nie w kodzie, albo kod deklarujący strukturę, której treść nie ma.
/ Jak strony go nie spełniają
- Nagłówki to akapity lub elementy div z dużą, pogrubioną czcionką, więc strona nie ma konspektu, po którym da się poruszać.
- Pole formularza nie ma elementu label ani dostępnej nazwy albo opiera się na podpowiedzi placeholder, która znika po wpisaniu pierwszego znaku.
- Tabela danych nie ma komórek th, więc każda wartość jest odczytywana bez swojej kolumny i wiersza.
- Lista jest zbudowana ze znaków nowej linii i myślników albo element ul zawiera dzieci, które nie są elementami li.
- Grupa pól radio lub checkbox nie ma elementów fieldset i legend, więc każda opcja jest odczytywana bez pytania.
/ Jak sprawdzić samodzielnie
- Wyświetl listę nagłówków w czytniku ekranu (NVDA: Insert+F7) albo w rozszerzeniu przeglądarki pokazującym konspekt strony. Porównaj ją z tym, co na ekranie wygląda jak nagłówek.
- Kliknij widoczną etykietę każdego pola formularza. Jeśli kursor nie trafia do pola, etykieta nie jest z nim powiązana.
- Zbadaj każdą tabelę danych pod kątem elementów th i atrybutu scope, a każdą listę widoczną na ekranie pod kątem ul, ol i li.
- Wyłącz style (Firefox: Widok, Styl strony, Bez stylu) i sprawdź, czy nagłówki, listy i tabele nadal da się rozpoznać.
- W czytniku ekranu przeskakuj po punktach orientacyjnych i upewnij się, że treść główna, nawigacja i stopka są osiągalne.
/ Jak to naprawić
- Oznacz nagłówki elementami od h1 do h6 w kolejności zgodnej z treścią i nie używaj ich do samego powiększania tekstu.
- Każdemu elementowi input, select i textarea daj element label połączony z nim atrybutami for i id, a powiązane opcje obejmij elementem fieldset z legend.
- Komórki nagłówkowe zapisz jako th z atrybutem scope="col" lub scope="row" i dodaj caption z nazwą tabeli.
- Listy buduj z ul, ol i li, tak aby li były jedynymi bezpośrednimi dziećmi listy.
- Obejmij obszary strony elementami main, nav, header i footer, a każdą kartę połącz z jej panelem atrybutem aria-controls.
/ Co sprawdza nasz skaner
Skan statyczny liczy elementy h1 (brak albo więcej niż jeden), przeskoki poziomów nagłówków, brak elementu main i tabele bez th. Skan na wyrenderowanej stronie dodaje treść poza punktami orientacyjnymi, listy z obcymi elementami, pola bez etykiety lub tylko z podpowiedzią placeholder, grupy opcji bez legendy i karty niepołączone z panelem. HTML_CodeSniffer dodaje puste nagłówki. Tekstu, który tylko wygląda jak nagłówek, nie widzi żadne z tych narzędzi.
/ Kto je łamie, według naszych pomiarów
Jedna strona na podmiot, mierzona automatycznie w tygodniowym cyklu. Jeśli podmiot coś naprawił od ostatniego pomiaru, zmiana będzie widoczna przy następnym, a każdy podmiot może odpowiedzieć na swojej stronie.
/ Pytania o to kryterium
Czy pominięcie poziomu nagłówka narusza WCAG?
Samo w sobie nie. Kryterium 1.3.1 wymaga, żeby struktura nagłówków w kodzie odzwierciedlała strukturę treści; nie mówi, że po h2 musi następować h3. Mimo to warto to poprawić, bo użytkownicy czytników ekranu przeglądają stronę po konspekcie, a luka wygląda jak brakująca sekcja. Dlatego nasz skaner zgłasza pominięty poziom jako problem o umiarkowanej wadze.
Czy strona może mieć więcej niż jeden nagłówek h1?
WCAG tego nie zakazuje. Wystarczy, że nagłówki są oznaczone jako nagłówki, a ich poziomy odpowiadają organizacji treści. Jeden h1 z nazwą strony to konwencja, której spodziewa się większość użytkowników czytników ekranu, więc kilka takich nagłówków utrudnia czytanie konspektu. Nasz skaner zgłasza więcej niż jeden h1 jako problem o umiarkowanej wadze w ramach 1.3.1: to sygnał słabej struktury, a nie dowód naruszenia.
Czy placeholder wystarczy jako etykieta pola?
Nie. Podpowiedź placeholder znika, gdy tylko ktoś zacznie pisać, często jest zbyt blada, by ją przeczytać, i nie każda technologia wspomagająca traktuje ją jak etykietę. Użyj widocznego elementu label połączonego z polem atrybutami for i id. Tam, gdzie widoczna etykieta jest niemożliwa, na przykład przy pojedynczym polu wyszukiwania z przyciskiem, nazwę polu nada atrybut aria-label.