Kryterium wymaga, aby informacje, struktura oraz zależności pomiędzy elementami treści były możliwe do określenia programowo lub dostępne w tekście.

Oznacza to, że sposób organizacji treści na stronie internetowej powinien być zapisany w kodzie w taki sposób, aby technologie wspomagające (np. czytniki ekranu) mogły poprawnie interpretować strukturę dokumentu.

Struktura strony powinna więc jasno określać relacje między elementami, takimi jak nagłówki, listy, tabele, sekcje treści czy elementy formularzy. Dzięki temu użytkownicy korzystający z technologii asystujących mogą zrozumieć hierarchię informacji oraz łatwiej poruszać się po stronie.

Brak odpowiedniego oznaczenia struktury powoduje, że informacje dostępne wizualnie dla użytkowników widzących nie są w pełni dostępne dla osób korzystających z czytników ekranu lub innych narzędzi wspomagających.

Stosowane techniki

Aby spełnić kryterium 1.3.1, należy stosować semantyczne znaczniki HTML oraz rozwiązania umożliwiające programowe określenie struktury treści.

Najczęściej stosowane techniki to:

  • stosowanie nagłówków HTML (h1–h6) do oznaczania struktury dokumentu,

  • tworzenie list przy użyciu elementów ul, ol oraz li,

  • prawidłowe oznaczanie tabel danych, w tym używanie elementu th dla nagłówków tabel,

  • poprawne oznaczanie formularzy poprzez powiązanie pól z etykietami label,

  • stosowanie semantycznych elementów HTML, takich jak main, nav, section czy article,

  • stosowanie atrybutów ARIA w sytuacjach, gdy standardowe elementy HTML nie pozwalają jednoznacznie określić relacji między elementami.

Dzięki wykorzystaniu tych technik struktura strony może zostać poprawnie odczytana przez technologie wspomagające.

Najczęściej spotykane błędy

W praktyce najczęściej spotykane naruszenia kryterium 1.3.1 Informacje i relacje to:

  • Nagłówki tworzone jedynie przez styl CSS (np. większa czcionka zamiast znaczników nagłówków).

  • Listy tworzone ręcznie przy użyciu znaków (np. „–” lub „•”) zamiast elementów listy HTML.

  • Nieprawidłowo oznaczone tabele danych, np. brak nagłówków kolumn i wierszy.

  • Brak etykiet przy polach formularza, przez co czytnik ekranu nie informuje użytkownika o przeznaczeniu pola.

  • Używanie obrazów zamiast tekstu, które przekazują informacje o strukturze treści.

  • Przekazywanie informacji wyłącznie poprzez kolor, pozycję lub wygląd elementu.

Takie błędy powodują, że struktura treści nie jest dostępna programowo, co utrudnia korzystanie ze strony osobom z niepełnosprawnościami.

Skontaktuj się z nami

Dowiedz się więcej o tym, jak możemy pomóc Twojemu biznesowi rozwijać się w cyfrowym świecie.

Razem stworzymy coś wyjątkowego!