Informacje i relacje

Co jest wymagane

Wszystko, co można odczytać na pierwszy rzut oka — że ten duży, pogrubiony tekst to nagłówek, że te wiersze tworzą tabelę danych, że ta grupa pól to „adres rozliczeniowy”, że gwiazdka oznacza pole wymagane — musi być też obecne w kodzie. Czytniki ekranu, oprogramowanie sterowane głosem i silniki przepływu widzą tylko znaczniki. Jeśli relacja jest czysto wizualna (większa czcionka, grubsza ramka, wcięcie), technologia wspomagająca nie zobaczy niczego.

Jak spełnić kryterium

• Używaj prawdziwych elementów nagłówka (<h1> do <h6>) w logicznej kolejności zagnieżdżenia — nigdy stylizowanego <div> udającego nagłówek.
• Oznaczaj listy za pomocą <ul>, <ol> i <li> — nie akapitami oddzielonymi podziałami wierszy ani znakami punktorów.
• Używaj <table> z <th scope="col"> / <th scope="row"> dla tabel danych, z <caption> opisującym cel tabeli.
• Każde pole formularza potrzebuje programowej etykiety: <label for="...">, aria-labelledby lub aria-label. Tekst zastępczy nie jest etykietą.
• Grupuj powiązane pola formularza w <fieldset> z <legend> lub używaj role="group" z aria-labelledby dla niestandardowych widżetów.
• Dla figur i podpisów używaj <figure> i <figcaption>. Dla par definicji używaj <dl> / <dt> / <dd>.
• Oznaczaj pola wymagane zarówno wizualnie (gwiazdka), jak i programowo (aria-required="true" lub atrybut required).

Typowe błędy

• <div class="heading-1"> zamiast <h1> — wygląda poprawnie, zapowiadany jako nic.
• Tabele układu używane do tworzenia kolumn wizualnych lub tabele danych budowane z siatek <div> bez komórek <th>.
• Pola formularza z etykietami wyłącznie w atrybucie placeholder — etykieta znika po kliknięciu, a czytniki ekranu mogą jej nie odczytać.
• Punktory tworzone za pomocą <p>•&nbsp;Element</p> zamiast prawdziwych znaczników listy.
• Gwiazdki pól wymaganych wyświetlane w czerwonym CSS bez atrybutu aria-required ani required.
• Wizualnie zgrupowane przyciski opcji bez <fieldset> / <legend>, przez co użytkownicy czytników ekranu słyszą pływające opcje pozbawione pytania.
• Tabele danych, w których wiersz nagłówka jest stylizowany pogrubioną czcionką, ale używa <td>, a nie <th>.

Dlaczego to jest ważne

1.3.1 to najczęściej cytowane kryterium w audytach WCAG po 1.1.1 i 1.4.3. Każda strona generowana przez CMS, każda strona docelowa marketingu, każdy niestandardowy widżet formularza zazwyczaj nie spełnia co najmniej jednej jego części. Naprawa to niemal zawsze semantyczny HTML, nie ARIA — kiedy sięgasz po role="heading", aby naprawić <div>, który powinien być <h2>, gra już jest przegrana.