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
- 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”.
- 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.
- 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.
- 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.
- 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.
-
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.
Ekspert ds. dostępności cyfrowej z 5-letnim doświadczeniem, mający na koncie ponad 500 audytów stron i aplikacji mobilnych. Jest absolwentem Akademii Morskiej w Gdyni. Poza pracą profesjonalną, jest pasjonatem sportu i psychologii, co przekłada się na jego funkcję prezesa Stowarzyszenia Aktywne Kosakowo. Jego zrozumienie technicznych i ludzkich aspektów dostępności pochodzi z połączenia wiedzy zawodowej z zainteresowaniami osobistymi.