Dzień 28: Etykietowanie elementów formularza
Zastanawiałeś się kiedyś dlaczego formularze na stronach internetowych są tak trudne w użyciu? Na przykład, w normalnych aplikacjach z GUI możesz kliknąć gdziekolwiek na etykiecie przy checkboksie aby go zaznaczyć lub odznaczyć. Jednak w aplikacji działającej w przeglądarce musisz kliknąć dokładnie na tym małym kwadraciku żeby zmienić jego stan. To jest irytujące ale jeszcze nie tragiczne. Niestety dla niewidomych użytkowników sytuacja jest znacznie gorsza. Nawet prosty formularz, np. taki do wysyłania komentarzy na Twoim blogu, może być trudny do używania jeśli nie widzisz go całego na raz. (Omawialiśmy podobny problem z tabelami; np. kalendarz jest prosty do użycia jeśli widzisz go w całości, ale bardzo trudny, jeśli widzisz w danej chwili tylko jeden dzień.)
Istnieją tagi HTML, które mogą Ci ułatwić tworzenie formularzy łatwiejszych w użyciu. Omówię jeden z nich - <label>; o innych tagach ważnych dla dostępności formularzy możesz poczytać w sekcji "Zobacz także" na dole tej strony.
Tag <label> umożliwia połączenie etykiety z dowolnym polem formularza: polem tekstowym, checkboksem, polem wyboru, czymkolwiek. Dzięki temu programy udźwiękawiające mogą powiadomić użytkownika czym jest dane pole formularza poprzez odczytanie jego etykiety. Ponadto, jeżeli użyjesz taga <label> do powiązania checkboksa (<input type="checkbox">) z tekstem występującym przy nim, to w większości przeglądarek Twój formularz będzie się zachowywał podobnie jak GUI innych aplikacji: kliknięcie gdziekolwiek na tekście etykiety przełączy stan checkboksa.
Kto na tym skorzysta?
- Jadzia skorzysta. Kiedy Jadzia przechodzi tabulatorem po kolejnych polach formularza, JAWS odczytuje nazwę każdego elementu (na podstawie wartości jego atrybutu
name), co może, ale nie musi być zrozumiałe. Natomiast jeżeli element formularza jest powiązany z etykietą, JAWS przeczyta tekst etykiety zamiast nazwy pola. "Text: name." (TAB) "Text: email address." (TAB) "Text: URL." (TAB) "Text area: comments." I tak dalej. - Julia skorzysta. Kiedy elementy formularza są połączone z etykietami, Julia może kliknąć gdziekolwiek na tekście przy danej opcji żeby ją włączyć lub wyłączyć. To daje znacznie większy margines błędu przy posługiwaniu się myszką, a przy jej słabym wzroku im większe pole do klikania tym lepiej.
- Bill powinien skorzystać, ale niestety jeszcze nie teraz. Porusza się po stronach głównie za pomocą klawiatury, co oznacza właściwie klawisz TAB. Kiedy dojdzie tabulatorem do opcji w formularzu, Mozilla powinna pokazać prostokąt wyboru wokół całej etykiety, jednak tego nie robi; po prostu pokazuje prostokąt wokół samego checkboksa. (Inne przeglądarki, np. Internet Explorer, a nawet Netscape 4, robią to poprawnie. Niedobra Mozilla.)
Jak to zrobić: blog.pl
Niestety, wg stanu na sierpień 2003, blog.pl nie umożliwia edycji formularza dodawania komentarzy ani formularza wpisów do księgi gości. Co więcej, zaimplementowane w tym systemie formularze nie posiadają żadnych elementów dostępności - brak jakichkolwiek atrybutów <label>, <fieldset> i <legend>.
Jak to zrobić: niByLog
W systemie niByLog wygląd formularza do wprowadzania komentarzy określa szablon "Formularz nowego komentarza" (lub w wersjach starszych niż 1.7.0 plik plugins/komentator.inc). Właściwie może to być dowolny formularz ustawiający pola o nazwach wymaganych przez mechanizm komentatora niByLoga. Powinien zawierać takie elementy:
<label for="com_komentarz">komentarz:</label>
<textarea id="com_komentarz" name="com_komentarz" cols="30" rows="6"></textarea>
<label for="com_podpis">podpis:</label>
<input type="text" id="com_podpis" name="com_podpis" size="30" />
<input type="checkbox" id="com_public" name="com_public" value="ok" checked />
<label for="com_public">publikuj adresy email i www</label>
<label for="com_email">e-mail:</label>
<input type="text" id="com_email" name="com_email" size="30" />
<label for="com_www">www:</label>
<input type="text" id="com_www" name="com_www" size="30" />
Jak to zrobić: Movable Type
W Movable Type trzeba poprawić szablon "Comment Listing Template". Znajdziesz w nim taki fragment:
Name:<br />
<input name="author" /><br /><br />
Email Address:<br />
<input name="email" /><br /><br />
URL:<br />
<input name="url" /><br /><br />
Comments:<br />
<textarea name="text" rows="10" cols="50"></textarea><br /><br />
<input type="checkbox" name="bakecookie" />Remember info?<br /><br />
Każda z tych nazw pól powinna być zamieniona na tag <label>. Ponieważ tag <label> wskazuje elementy formularza poprzez ID (nie przez nazwę), trzeba również uzupełnić tagi <input> o atrybut ID. W sumie powinno to wyglądać tak:
<label for="author">Name:</label><br />
<input id="author" name="author" /><br /><br />
<label for="email">Email Address:</label><br />
<input id="email" name="email" /><br /><br />
<label for="url">URL:</label><br />
<input id="url" name="url" /><br /><br />
<label for="text">Comments:</label><br />
<textarea id="text" name="text" rows="10" cols="50"></textarea><br /><br />
<input type="checkbox" id="bakecookie" name="bakecookie" /><label for="bakecookie">Remember info?</label><br /><br />
Takie same zmiany zrób w szablonach "Comment Preview", "Comment Error" i "Individual Entry Archive".
Jak to zrobić: Greymatter
W menu "Edit Karma & Comments-Related Templates" powinien znajdować się szablon "{{entrycommentsform}} Posting form" zawierający kod:
Name
<BR>
<INPUT TYPE=TEXT NAME="newcommentauthor" SIZE=40>
<P>
E-Mail (optional)
<BR>
<INPUT TYPE=TEXT NAME="newcommentemail" SIZE=40>
<P>
Homepage (optional)
<BR>
<INPUT TYPE=TEXT NAME="newcommenthomepage" SIZE=40>
<P>
Comments
<BR>
<TEXTAREA NAME="newcommentbody" COLS=35 ROWS=10 WRAP=VIRTUAL></TEXTAREA>
Trzeba go zamienić na następujący:
<label for="newcommentauthor">Name</label>
<BR>
<INPUT TYPE=TEXT id="newcommentauthor" NAME="newcommentauthor" SIZE=40>
<P>
<label for="newcommentemail">E-Mail (optional)</label>
<BR>
<INPUT TYPE=TEXT id="newcommentemail" NAME="newcommentemail" SIZE=40>
<P>
<label for="newcommenthomepage">Homepage (optional)</label>
<BR>
<INPUT TYPE=TEXT id="newcommenthomepage" NAME="newcommenthomepage" SIZE=40>
<P>
<label for="newcommentbody">Comments</label>
<BR>
<TEXTAREA id="newcommentbody" NAME="newcommentbody" COLS=35 ROWS=10 WRAP=VIRTUAL></TEXTAREA>
Zobacz także (strony w języku angielskim)
- WebAIM: How to Create Accessible Forms. W bardziej złożonych formularzach mogą być wymagane inne tagi związane z dostępnością, takie jak
<legend>i<fieldset>. Ten artykuł pokazuje co to za tagi i jak je stosować. - W3C: Forms in HTML Documents: The LABEL element. Element LABEL w specyfikacji HTML.