WCAG 2.1 – Kryterium 3.3.2 – Etykiety i instrukcje (Poziom A)

Podpowiedzi… Czy mają one jakiś związek z WCAG?

A i owszem. Etykiety i podpowiedzi (czy też instrukcje) opisuje kryterium 3.3.2 WCAG na poziomie A, czyli podstawa podstaw.

WCAG 3.3.2 etykiety i instrukcje

Zasadą jest, że każde pole formularza w naszym serwisie musi mieć odpowiednio przyporządkowaną etykietę czy zaimplementowaną podpowiedź.

Dlaczego?

Dzięki etykietom i podpowiedziom nasz Użytkownik dużo szybciej i w prostszy sposób wprowadzi swoje dane, a my jako twórcy danej witryny, uzyskamy je bez większych problemów. Brzmi jak profit z obu stron, prawda?

Jak zaimplementować prawidłowo etykietę czy instrukcję?

• Do każdego pola formularza przyporządkuj widoczną etykietę za pomocą znacznika <label>, który prawidłowo powiążesz z danym polem (pamiętaj o tożsamych wartościach atrybutów for i id) – inne sposoby na implementację etykiety: podpowiedzi na stronie W3C.
• Jeśli w formularzu widoczne są podpowiedzi, powiąż je prawidłowo z odpowiednim polem używając atrybutu aria-describedby – przykład.
• W rozbudowanych formularzach, pamiętaj o ich grupowaniu oraz odpowiednim opisie za pomocą elementów <fieldset> i <legend> – na przykład: “Adres zamieszkania”, “Adres do doręczeń”, “Adres do faktury”. Technika rozpisana przez W3C.
• Wyraźnie oznacz, czy dane pole formularza jest wymagane czy opcjonalne (nie tylko dla technologii asystującej) – opis jak to zrobić.

Nie takie to straszne, prawda?

Czy wiecie, że problemy z formularzami to jeden z najczęściej spotykanych przez nas błędów podczas audytów? Jak myślicie, z czego to wynika?