Formularze bez przeszkód – dostępne pola i etykiety
Pola formularzy, które każdy może wypełnić
Wielokrotnie słyszałem, że projektowanie stron internetowych to bułka z masłem. Wystarczy wrzucić kilka zdjęć, napisać tekst i gotowe, prawda? Ale jak się bliżej przyjrzeć, okazuje się, że jest tam wiele subtelności, o których trzeba pamiętać. Jednym z kluczowych elementów każdej strony są oczywiście formularze – te miejsca, gdzie użytkownicy wpisują swoje dane. I właśnie to, jak zaprojektujemy te pola, może mieć ogromne znaczenie dla dostępności naszej witryny.
Wyobraź sobie, że chcesz zarejestrować się na jakimś portalu. Wchodzisz na stronę, wszystko wygląda ładnie i intuicyjnie. Ale kiedy próbujesz wypełnić formularz rejestracyjny, natrafiasz na problem. Pola są niejasno oznaczone, instrukcje są mało czytelne, a kiedy próbujesz przesłać formularz, wyskakuje ci masa błędów, których nie wiesz, jak poprawić. Frustrujące, prawda? A teraz wyobraź sobie, że jesteś osobą niewidomą lub słabowidzącą, korzystającą z czytnika ekranu. Albo może masz dysfunkcję motoryczną i poruszasz się wyłącznie za pomocą klawiatury. Nagle te problemy, które mogły być dla ciebie uciążliwe, stają się prawdziwą barierą, uniemożliwiającą ci skorzystanie z danej usługi.
Dlatego tak ważne jest, aby projektując formularze, mieć na uwadze potrzeby wszystkich użytkowników. Aby każdy, niezależnie od swoich możliwości, mógł bez problemu wypełnić te pola i przesłać formularz. Oto kilka wskazówek, jak to osiągnąć.
Etykiety, a nie same pola
Jedną z podstawowych zasad dostępności formularzy jest używanie odpowiednich etykiet. Samo umieszczenie pola z napisem “Imię” lub “E-mail” to za mało. Potrzebujemy wyraźnie skojarzonej etykiety, która powie czytnikowi ekranu, czego dotyczy dane pole. A najlepszym sposobem na to jest zastosowanie znacznika <label>.
Zgodnie z wytycznymi, etykieta powinna być powiązana z polem formularza poprzez atrybut for w elemencie <label> oraz atrybut id w elemencie pola formularza. Na przykład:
html
<label for="name">Imię</label>
<input type="text" id="name" name="name">
Dzięki temu czytnik ekranu bez problemu rozpozna, że pole “Imię” dotyczy właśnie tego pola formularza.
Co ważne, do pojedynczego pola formularza można zastosować tylko jeden element <label>. Jeśli chcemy podać dodatkowe wskazówki, jak wypełnić dane pole, możemy to zrobić na przykład za pomocą atrybutu aria-describedby.
“`html
“`
W tym przypadku czytnik ekranu odczyta nie tylko etykietę pola, ale też dodatkową podpowiedź, którą powiązaliśmy z tym polem.
Logiczne grupowanie pól
Czasem w ramach jednego formularza mamy wiele pól, które dotyczą podobnej tematyki. Na przykład w formularzu rejestracyjnym mogą się znaleźć pola dotyczące adresu zamieszkania, adresu do korespondencji, a może jeszcze danych kontaktowych. W takich przypadkach warto zastosować grupowanie pól za pomocą elementu <fieldset>.
“`html
“`
Element <fieldset> pozwala zebrać powiązane pola w jedną logiczną całość, a <legend> dostarcza etykietę opisującą tę grupę. Dzięki temu czytnik ekranu nie tylko odczyta poszczególne pola, ale też poinformuje użytkownika, że te pola dotyczą na przykład adresu zamieszkania.
Obowiązkowe pola i oznaczenia
Kolejną ważną kwestią są pola obowiązkowe w formularzu. Często na stronach internetowych pole, które musimy wypełnić, jest oznaczane gwiazdką lub innym symbolem. Jednak takie oznaczenie może być niezrozumiałe dla osób niewidomych lub słabowidzących.
Zamiast tego warto skorzystać z atrybutu required w elemencie pola formularza. Dzięki temu czytnik ekranu automatycznie poinformuje użytkownika, że dane pole jest wymagane.
html
<label for="name">Imię *</label>
<input type="text" id="name" name="name" required>
Podobnie, gdy mamy pola wyboru, na przykład w formularzu rejestracyjnym, warto je zgrupować w ramach jednej etykiety. Wtedy czytnik ekranu potraktuje je jako logiczne opcje do danego pytania, a nie jako luźno porozrzucane pola.
“`html
“`
Nie zapominaj o CAPTCHA
Jednym z częstych zabezpieczeń formularzy są kody CAPTCHA. Te zniekształcone obrazki lub ciągi znaków mają chronić przed automatycznym wysyłaniem formularzy przez boty. Jednak z punktu widzenia dostępności CAPTCHA stanowi spory problem, zwłaszcza dla osób niewidomych lub słabowidzących.
Na szczęście istnieją alternatywne rozwiązania, które są o wiele bardziej dostępne. Możemy na przykład zastosować reCAPTCHA od Google, które oferuje wersję audio dla osób niewidomych. Albo stworzyć własne CAPTCHA oparte na zadaniach, które będą czytelne również dla użytkowników korzystających z technologii asystujących.
Pamiętajmy, że dostępność to nie tylko kwestia samych pól formularza. Ważne są też wszystkie komunikaty o błędach, które mogą się pojawić podczas wypełniania. Takie informacje powinny być dostępne nie tylko wzrokowo, ale też dla czytników ekranu, na przykład poprzez atrybut role="alert".
Formularze przyjazne każdemu
Podsumowując, tworzenie dostępnych formularzy internetowych to naprawdę ważna sprawa. To nie tylko kwestia spełnienia prawnych wymogów, ale przede wszystkim szansa, aby nasza strona mogła być używana przez wszystkich użytkowników, niezależnie od ich możliwości.
Dlatego warto zapamiętać kilka kluczowych zasad:
– Używaj znacznika <label> z atrybutem for, aby powiązać etykietę z polem formularza
– Dodawaj podpowiedzi i dodatkowe informacje za pomocą atrybutu aria-describedby
– Grupuj powiązane pola w <fieldset> z <legend>
– Oznaczaj pola obowiązkowe atrybutem required
– Zadbaj o dostępność CAPTCHA lub szukaj alternatywnych rozwiązań
– Upewnij się, że komunikaty o błędach są dostępne dla czytników ekranu
Jeśli będziemy pamiętać o tych wskazówkach, nasze formularze staną się o wiele bardziej przyjazne i dostępne dla wszystkich użytkowników. A to oznacza, że każdy będzie mógł bez problemu skorzystać z naszych usług, niezależnie od swoich możliwości.
Warto też pamiętać, że dostępność to nie tylko kwestia stron internetowych. Równie ważne jest zadbanie o dostępność naszych aplikacji mobilnych, dokumentów, a nawet codziennej komunikacji w pracy. Tylko wtedy naprawdę zapewnimy wszystkim równe szanse.
Zatem do dzieła! Czas stworzyć formularze, które będą otwarte na każdego użytkownika. Bo przecież o to chodzi w świecie bez barier – aby każdy mógł w pełni z niego korzystać.
Przejdź do strony głównej, aby dowiedzieć się więcej o tworzeniu dostępnych stron internetowych.
