Etykietowanie pól formularzy

Jak poprawnie tworzyć etykiety dla pól formularzy?

Etykietowanie formularzy jest kluczowym aspektem dostępności stron internetowych. Odpowiednie etykiety pomagają wszystkim użytkownikom zrozumieć, jakie informacje powinni wprowadzić w dane pole formularza. Zgodnie ze standardem WCAG 2.1, oto kilka zasad, które powinieneś przestrzegać podczas etykietowania formularzy:

Etykietowanie Formularzy: Kluczowe Zasady Dostępności

1. Stosuj jasne i zrozumiałe etykiety :Etykietowanie formularzy powinny jasno opisywać, jakie informacje użytkownik powinien wprowadzić. Na przykład, zamiast "Wprowadź", lepiej napisać "Wprowadź adres e-mail".
2. Korzystaj z elementu <label>: W HTML, etykiety powinny być związane z ich odpowiadającymi polami formularza za pomocą elementu <label>. To pomaga technologiom asystującym, takim jak czytniki ekranu, zrozumieć związki pomiędzy etykietami i polami formularza.
3. Umieszczaj etykiety blisko odpowiednich pól: Etykiety powinny być umieszczone blisko swoich odpowiadających pól, aby użytkownicy mogli łatwo zrozumieć, do którego pola formularza odnoszą się dane etykiety.
4. Zawsze stosuj etykiety: Każde pole formularza powinno mieć etykietę, nawet jeśli wydaje się to oczywiste. Na przykład, pole do wprowadzenia adresu e-mail powinno mieć etykietę "Adres e-mail", nawet jeśli obok znajduje się ikona koperty.
5. Etykiety niewidoczne: W niektórych przypadkach, możesz chcieć ukryć etykietę na stronie, ale wciąż chcesz, aby była dostępna dla technologii asystujących. W takim przypadku możesz użyć technik CSS do ukrycia etykiety w sposób dostępny.

6. Użyj ARIA: ARIA (Accessible Rich Internet Applications) to zestaw atrybutów, które można dodać do HTML, aby poprawić dostępność. Atrybut aria-label i aria-labelledby mogą być użyte do dostarczenia etykiet dla elementów interfejsu użytkownika, które nie mają jasnej etykiety tekstowej.
   
   
   Jeśli chcesz się dowiedzieć więcej przeczytaj inne nasze artykuły.