1.3.1 Informacje i relacje

Komu i dlaczego to pomaga

Osoby niewidome nawigują po nagłówkach, listach i tabelach. Jeśli „nagłówek” to tylko pogrubiony tekst, czytnik nie wie, że to nagłówek, i strona staje się ścianą tekstu.

• Osoby niewidome
• Osoby słabowidzące
• Osoby z trudnościami poznawczymi

Jak zrobić to dobrze

• Używaj semantycznego HTML: h1–h6, ul/ol, table z th i caption, label, fieldset.
• W edytorze CMS korzystaj ze stylów „Nagłówek 2/3”, a nie z pogrubienia.
• Pola formularzy wiąż z etykietami przez atrybut for/id.
• ARIA stosuj tylko tam, gdzie HTML nie wystarcza.

Najczęstsze błędy

• Nagłówki zrobione pogrubieniem i większą czcionką zamiast <h2>, <h3>.
• Listy zrobione myślnikami i enterami zamiast <ul>/<ol>.
• Tabele danych bez nagłówków kolumn (<th>) albo tabele użyte do układu strony.
• Pola formularza bez powiązanej etykiety <label>.
• Grupy przycisków radiowych bez <fieldset> i <legend>.

Przykład w kodzie

<p><b>Godziny otwarcia</b></p>
<p>- pon.–pt. 8:00–16:00</p>
Imię: <input type="text">

<h2>Godziny otwarcia</h2>
<ul><li>pon.–pt. 8:00–16:00</li></ul>
<label for="imie">Imię</label> <input id="imie" type="text">

Jak to sprawdzić

1. Sprawdź strukturę nagłówków rozszerzeniem (np. HeadingsMap) – czy odpowiada temu, co widać?
2. Wyłącz style CSS – czy treść nadal ma sensowną strukturę?
3. Kliknij w etykietę pola formularza – kursor powinien przejść do pola.
4. W tabelach sprawdź, czy komórki nagłówkowe to <th>.

Częściowo automatyczne. Narzędzia wykryją część problemów (np. brak atrybutu), ale ocena jakości wymaga człowieka.

Czy to obowiązkowe?

Powiązane kryteria