blog na temat dostępności stron internetowych

Przejdź do głównej treści

Dostępne formularze – część 1: etykiety i pola

Niemal wszystkie współczesne serwisy internetowe zawierają formularze. Od najprostszych, składających się z pojedynczego pola i przycisku, po rozbudowane i dynamicznie zmieniające się kwestionariusze zawierające wiele rodzajów pól. Niezależnie od stopnia złożoności formularza podstawowe zasady dostępności pozostają te same – należy upewnić się, że przeznaczenie każdego formularza oraz wszystkich zawartych w nim pól jest zrozumiałe dla możliwie szerokiej grupy użytkowników.

Przeznaczenie formularza

Każda osoba, która przystępuje do wypełnienia formularza, powinna wiedzieć jaka jest jego funkcja, czyli w jakim celu ma wprowadzić określone dane. W przypadku prostych formularzy wystarczy zapewnić opisowe etykiety pól i przycisków; w przypadku bardziej złożonych formularzy warto zamieścić na początku informację wyjaśniającą ich przeznaczenie i sposób działania.

Przeznaczenie pól formularzowych

Aby użytkownicy byli w stanie wprowadzić w formularz poprawne dane, muszą oni rozumieć do czego służą zawarte w nim pola. Dlatego też wszystkie pola formularza muszą posiadać etykietę, która jasno opisuje ich przeznaczenie. Etykieta ta musi być oznaczona za pomocą odpowiedniego elementu HTML (<label>) oraz musi być powiązana z polem przy użyciu atrybutów “id” i “for” o takiej samej wartości, np:

<label for="imie">Imię:</label>
<input id="imie" type="text" />

W ten sposób tworzony jest unikalny związek pomiędzy polem a jego etykietą w kodzie HTML. Relacja ta jest rozpoznawana przez czytniki ekranu; gdy osoba niewidoma przeniesie fokus w opisane powyżej pole “Imię”, powiązana z tym polem etykieta zostanie automatycznie odczytana.

Niektórzy twórcy stron internetowych zamieszczają tekst określający funkcję danego pola używając do tego celu nieprawidłowego znacznika, (np. <p>):

<p>Imię:</p>
<input id="imie" type="text" />

Gdy użytkownik korzystający z czytnika ekranu przeniesie fokus do tak opisanego pola, zostanie on poinformowany, że znajduje się w polu wprowadzania danych, ale przeznaczenie tego pola nie zostanie podane. Jest to spowodowane tym, że nie został stworzony żadnego rodzaju związek pomiędzy polem “imię” a poprzedzającym go paragrafem. Z punktu widzenia kodu HTML (i czytników ekranu) są to dwa niezależne elementy.

Czasem deweloperzy kwestionują potrzebę oznaczania etykiet za pomocą elementu <label>. Twierdzą oni, że skoro tekst etykiety jest wyświetlony bezpośrednio przed polem formularza, użytkownicy czytników ekranu nie powinni mieć problemu z ze zrozumieniem związku pomiędzy tymi dwoma elementami. Czy zatem naprawdę trzeba używać znacznika <label>? Tak. Po pierwsze dlatego, że jest to semantycznie poprawny HTML. Po drugie ze względu na specyfikę działania czytników ekranu. Gdy osoba korzystająca z czytnika ekranu przeniesie fokus do formularza, automatycznie aktywowany jest tzw. tryb formularzowy (aplikacji). Co to oznacza? W tym trybie użytkownik czytnika ekranu nie jest w stanie dotrzeć do statycznych treści, a jedynie do elementów interaktywnych (takich jak pola formularzy czy przyciski). Dlatego tak ważne jest, by wszystkie informacje konieczne do poprawnego wypełnienia pól formularzowych były z nimi odpowiednio powiązane za pomocą właściwych elementów i atrybutów HTML.

Grupowanie powiązanych pól

Niektóre formularze zawierają pola, które są ze sobą logicznie powiązane, tworząc niejako odrębny zbiór pól. W tym przypadku, aby w pełni zrozumieć funkcję każego z indywidualnych pól, musimy znać też kontekst, w którym zostały one użyte, czyli przeznaczenie całej grupy pól. Wybraźmy sobie na przykład przyciski opcji (ang. “radio buttons”), które zostały zamieszczone w formularzu:

Fragment formularza. Pod pytaniem 'jak często robisz zakupy przez internet' widnieją trzy przyciski opcji opisane etykietami
Przykład grupy powiązanych pól formularzowych

Twórcy stron internetowych często oznaczają tego typu pola w następujący sposób:

<p>Jak często robisz zakupy przez internet?</p>
<input id="czest_nigdy" type="radio" name="czestotliwosc" value="nigdy" />
<label for="czest_nigdy">Nigdy</label>
<input id="czest_rok" type="radio" name="czestotliwosc" value="rok" />
<label for="czest_rok">Raz w roku</label>
...

Nawet jeśli każda z etykiet została prawidłowo oznaczona przy pomocy elementu <label> poprawnie powiązanego z odpowiednim polem, użytkownik czytnika ekranu nie będzie w stanie zrozumieć celu każdego z tych pól. Ponieważ w trybie aplikacji czytnik ekranu zignoruje treść paragrafu zamieszczonego przez przyciskami opcji, jedyna informacja odczytana użytkownikom będzie tą, która jest zamieszczona w indywidualnych etykietach, np. “nigdy”, “raz w roku”, “kilka razy w roku” itd. Bez dodatkowego kontekstu niemożliwe będzie świadome wybranie poprawnej opcji – trudno jest wybrać odpowiedź nie znając pytania.

Aby upewnić się, że każdy użytkownik zrozumie cel grupy powiązanych ze sobą pól, należy je oznaczyć przy pomocy elementu <fieldset> (“zbiór pól”) oraz zastosować element <legend> (“legenda”) do oznaczenia funkcji tego zbioru, np:

<fieldset>
  <legend>Jak często robisz zakupy przez internet?</legend>
  <input id="czest_nigdy" type="radio" name="czestotliwosc" value="nigdy" />
  <label for="czest_nigdy">Nigdy</label>
  <input id="czest_rok" type="radio" name="czestotliwosc" value="rok" />
  <label for="czest_rok">Raz w roku</label>
  ...
</fieldset>

W tym przypadku gdy osoba korzystająca z czytnika ekranu przeniesie fokus do przycisku opcji, czytnik poda nie tylko etykietę tego pola, ale także funkcję całego zbioru pól (zawartość elementu <legend>).

Położenie etykiet

Dla osób widzących bardzo istotne jest położenie etykiet w stosunku do pól, czyli wizualne przekazanie związku pomiędzy danym polem a jego etykietą. Podstawowa reguła głosi, że etykiety dla większości z pól (takich jak <input type="text">, <textarea>, czy <select>) powinny być umieszczone bezpośrednio przed polami – albo ponad nimi, albo po ich lewej stronie. Natomiast etykiety dla pól wyboru i opcji (<input type="radio"> i <input type="checkbox">) powinny być umieszczone bezpośrednio za polem. Dzięki temu widzący użytkownicy są w stanie łatwo rozpoznać, która etykieta odnosi się do którego pola. Ważne jest również przemyślane stosowanie odstępów pomiędzy etykietami a polami, by związek między nimi był oczywisty.

Fragment formularza. Każdą etykieta dla pola opcji dzieli taka sama odległość od opisywanego przez nią pola, co od kolejnego pola
Powyższy rozkład etykiet i pól znacznie utrudnia użytkownikom zrozumienie związku pomiędzy nimi

Przestrzeganie powyższych zasad jest szczególnie ważne dla osób używających programów do powiększania treści wyświetlonej na ekranie (ang. “screen magnifiers”). Ponieważ osoby te widzą tylko niewielki, powiększony fragment strony na raz, może być im trudniej się zorientować, która pole jest opisane przez daną etykietę. Dlatego etykiety powinny być rozmieszczone w sposób, który jednoznacznie identyfikuje przynależność do danego pola.

Format danych

Jeśli pewne dane muszą być wprowadzone w określonym formacie, format ten musi być podany, najlepiej poprzez zamieszczenie stosownej informacji w etykiecie, np:

<label for="data-urodzenia">Data urodzenia: (dd/mm/rrrr)</label>

Obowiązkowe dane

Często formularz nie może zostać zatwierdzony, dopóki użytkownik nie wprowadzi danych do określonych pól. Osoba, która przystępuje do wypełnienia formularza, musi z góry wiedzieć, które pola są obowiązkowe. Wymagane pola mogą być zidentyfikowane na kilka sposobów:

  • jeśli wszystkie pola w formularzu są obowiązkowe, wystarczy zamieścić ogólną informację na początku formularza, np. “Należy wypełnić wszystkie pola”
  • gdy jedynie niektóre z pól są wymagane, każde z nich musi być odpowiednio zidentyfikowane poprzez zamieszczenie tej informacji w etykiecie pola, np.

    <label for="nazwisko">Nazwisko (pole wymagane):</label>
    <input id="nazwisko" type="text" />
    
  • czasem twórcy formularzy stosują symbol (najczęściej asterysk – ‘*’) przy wymaganych polach. Stosując tę metodę należy upewnić się, że znaczenie używanego symbolu jest wyjaśnione na początku formularza (np. poprzez zamieszczenie informacji “Pola oznaczone asteryskiem (*) są obowiązkowe”)
  • warto również wszystkie obowiązkowe pola oznaczyć atrybutami "required" (HTML5) i "aria-required='true'" (ARIA). Atrybuty te pełnią tę samą rolę, jednak z powodu nie najlepszej obsługi atrybutu “required” (szczególnie w starszych wersjach Internet Explorer), warto na razie posługiwać się obydwoma z nich, np.
    <label for="nazwisko">Nazwisko (*):</label>
    <input id="nazwisko" type="text" required aria-required="true">
    

Podsumowując:

  • każde pole formularza musi posiadać etykietę wyjaśniającą jego przeznaczenie
  • każda etykieta musi być oznaczona przy pomocy znacznika <label> i musi być powiązana z polem za pomoca atrybutów “for” i “id”
  • etykieta powinna być wyświetlona nad polem lub z jego lewej strony; jedynie w przypadku pól opcji i wyboru etykieta powinna być zamieszczona bezpośrednio za polem
  • powiązane pola formularzowe powinny być zgrupowane przy użyciu elementu <fieldset>, a ich funkcja powinna być wyjaśniona przy pomocy znacznika <legend>
  • każde obowiązkowe pole musi być jednoznacznie zidentyfikowane.

W następnym artykule dotyczącym formularzy opiszę, jak poprawnie zamieszczać komunikaty o wykrytych błędach.

Dodaj komentarz

Należy wypełnić wszystkie pola oznaczone asteryskiem (*).
Zanim komentarz zostanie opublikowany będzie musiał zostać zatwierdzony przez moderatora.

Możesz wykorzystać następujące elementy HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>