WCAG 2.1 – kryterium 1.3.1 – Informacje i relacje: (poziom A) część 1

Czy struktura na stronie internetowej jest ważna?

Dzisiaj zajmiemy się kryterium, które odpowiada na to pytanie. Jest to jedno z bardziej obszernych kryteriów pod względem ilości technik, które pozwalają zadbać o dostępność. Wszystkie zostały wypisane na stronie W3C. Do sprawdzenia mamy takie elementy jak nagłówki, punkty orientacyjne (ang. landmarks), ale również formularze (ich grupowanie) oraz etykiety. Dalej sprawdzamy również tabele oraz listy.

Świat bez struktury

Wyobraźmy sobie, że zrezygnujemy ze wszystkich elementów, które nadają kształt artykułowi. Nie będzie nagłówków, list, a pola formularzy nie będą miały etykiet. Cała treść jest ścianą tekstu, a formularze są tylko polami tekstowymi. Koszmar prawda? Co powiecie na  formularz, który jednak informuje użytkownika do czego służą kolejne pola? Do tego dążymy.

Zgoła wygląda to banalnie, ale tutaj właśnie zaczyna się perspektywa osób korzystających z technologii asystujących. Zamknijmy oczy i spróbujmy tą samą stronę, ten sam tekst, ten sam formularz obsłużyć bez użycia myszki, samą klawiaturą, tylko z czytnikiem ekranu. Nie mając informacji, że tekst pogrubiony o większym rozmiarze jest nagłówkiem nie będziemy wstanie przejść szybko do interesującego nas fragmentu. Jeśli formularz będzie nas tylko „informował”, że znaleźliśmy się w polu tekstowym to nie będziemy wstanie go prawidłowo wypełnić. Widoczna dla nas gołym okiem etykieta, ale niepowiązana z tym polem, jest zupełnie nieprzydatna na przykład dla osób niewidomych.

Lista artykułów poruszających temat formularzy i etykiet:

• opis pól formularzy https://developer.mozilla.org/en-US/docs/Web/HTML/Element#forms
• świetnego artykułu odnośnie poprawnej implementacji etykiet w formularzach https://css-tricks.com/html-inputs-and-labels-a-love-story/