Formularze są, zwłaszcza w dobie nacisku na interakcje z użytkownikiem, nieodłączną częścią stron internetowych. Mogą jednak użytkownikom m.in. korzystającym ze screenreaderów przysporzyć trudności jeśli podczas ich tworzenia nie mamy na uwadze kilku ważnych aspektów

Ponieważ temat jest obszerny postanowiłem poświęcić mu kilka wpisów. Ten, który właśnie czytasz jest pierwszym, a zaczynamy od rzeczy bardziej oczywistych, ale czy na pewno?

Jednoznaczne oznaczanie elementów

W prostych żołnierskich słowach: “Każdy element formularza powinien być nazwany/opisany w sposób jednoznacznie identyfikujący oczekiwane dane”. Mamy tu dwie kwestie:

• Techniczną – wykorzystanie znacznika <label> i / lub atrybutu title do nadania etykiety dla każdego z pól formularza.Oprócz tego jeśli pewne elementy formularza łączą się ze sobą w logiczne bloki warto je wyróżnić korzystając ze znaczników <fieldset> i <legend>. W warstwie wizualnej, jeśli nie są potrzebne, zawsze można je ukryć.
• Semantyczną – czyli ni mniej ni więcej – przekaz opisu powinien być jasny, prosty i jednoznaczny.

Technika

Najprostszą i zarazem najważniejszą techniką oznaczania elementów jest stosowanie powiązanego z polem formularza znacznika <label> oraz atrybutu title. Przykładowo pole do wprowadzania imienia może zostać oznaczone w następujący sposób:

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

Imię:

Jak widać znacznik <label> powiązany jest z polem poprzez posiadany atrybut for odnoszący się do atrybutu id (nie name !) pola. Czasem spotkać można ujęcie pola wewnątrz znacznika <label> z pominięciem atrybutu for:

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

Imię:

Ponieważ jednak niektóre programy wspomagające mają problem z powiązaniem właściwej etykiety z polem nie polecam tej składni.

W pierwszym przykładzie wykorzystałem również dodatkowo powielenie opisu w atrybucie title. Nie jest to konieczne. Zasadniczo <label> jest wystarczającym oznaczeniem. Atrybut title przydaje się w przypadku, gdy z różnych przyczyn dodanie <label> nie jest nam na rękę, bo np. w warstwie wizualnej nie jest potrzebny (występuje inne oznaczenie pola), a jego ukrywanie w jednorazowym wypadku to nakład pracy przerastający opłacalność. W takim wypadku lepiej użyć poprawnie title niż kombinować.

Przyciski

Nieodłącznym elementem formularza powinien być co najmniej jeden przycisk pozwalający na jego wysłanie. Przycisk, czy jak kto woli guzik możemy zrealizować na 3 sposoby: <input type="submit" ..., <input type="button" ..., <input type="image"... .

Pola typu submit i button posiadają atrybut value, który jest traktowany jako domyślna etykieta / oznaczenie przycisku przez programy wspomagające:

typ submit:

typ button:

W przypadku nie ustawienia value pole typu submit przyjmie domyślną wartość zależną od przeglądarki i języka. Np.: “Wyślij zapytanie”, “Submit query” etc.

Nie mamy wówczas kontroli nad tekstem wyświetlanym przez co etykieta może nie być zrozumiała. Np. “Wyślij zapytanie” jako domyślna akcja dla formularza rejestracyjnego, czy logowania może być nieintuicyjne dla użytkownika, bo kojarzy się raczej z formularzem kontaktowym.

W przypadku nie podania value element typu button pozostanie pusty:

Ta wersja pojawia się czasem jako podstawa do graficznej realizacji. Wygląda to po ostylowaniu może i ładnie, ale gwarantuję, że nikt z użytkowników screenreaderów nie domyśli się do czego to służy.

Input type image

Trzecim popularnym sposobem na przycisk wysyłający formularz jest wstawienie obrazka – input type image. To chyba najlepsza metoda na wykorzystanie ciekawej grafiki jako alternatywy dla standardowych przycisków. W celu zapewnienia dostępności tego rozwiązania nie może zabraknąć atrybutu alt zawierającego opis przycisku. Inaczej podobnie jak w przypadku pustego buttona niewidomi nic nie usłyszą i pozostanie im się domyślać do czego to służy:

Button

Jest jeszcze jeden element, chyba najrzadziej stosowany, a mianowicie <button> To zasadniczo kontener pozwalający na umieszczanie różnych treści na elemencie klikalnym o zachowaniach i wyglądzie przycisku. Ponieważ elementy zawarte w <button> są czytane tak samo jak poza nim należy stosować te same reguły. Tekst będzie czytany jak jest, a więc wraz  odpowiednią intonacją pogrubień i pochyleń, obrazek <img> musimy wyposażyć w atrybut alt. itd.

To jest bardzo ważny przykład przycisku

Z racji konieczności dodatkowego przypisania akcji za pomocą javascript, do czego wrócimy nieco później, polecam rozważne korzystanie z <button>. A już na pewno nie stosowanie go jako przycisku wysyłającego formularz.

Posłowie

Dotknąłem jedynie czubka góry lodowej – tematyka dostępności formularzy to obszerne zagadnienie. Dlatego sukcesywnie będę kontynuował ten temat. Jeśli uważasz, że to co powyżej to truizmy – super, ale niestety nawet o tak oczywistych sprawach koderzy często zapominają skutecznie utrudniając życie innym.