Dostepne formularze

Formularze to jedne z najważniejszych elementow interaktywnych na stronach internetowych. Tak jak skrybowie w Starożytnym Egipcie musieli wypelniac precyzyjne dokumenty papirusowe, tak uzytkownicy muszą być prowadzeni przez formularze w sposób jasny i intuicyjny - szczegolnie ci, ktorzy korzystają z technologii wspomagajacych.

Etykiety (Labels)

Kazde pole formularza musi mieć powiazana etykiete. To jest absolutny fundament dostępności formularzy.

Jawne powiazanie (explicit)

1<!-- Najlepsza metoda - for/id -->
2<label for="name">Imie i nazwisko:</label>
3<input type="text" id="name" name="name">
4
5<!-- Czytnik ekranowy powie: "Imie i nazwisko, pole tekstowe" -->

Niejawne powiazanie (implicit)

1<!-- Input wewnątrz label -->
2<label>
3    Adres e-mail:
4    <input type="email" name="email">
5</label>

Czego NIGDY nie robic

1<!-- ŹLE - brak etykiety -->
2<input type="text" placeholder="Wpisz imie">
3<!-- Placeholder ZNIKA po wpisaniu tekstu i NIE jest etykieta! -->
4
5<!-- ŹLE - tekst obok, ale nie powiazany -->
6<span>Imie:</span>
7<input type="text">
8<!-- Czytnik nie wie, że "Imie:" jest etykieta tego pola -->

Fieldset i Legend

Grupuj powiązane pola za pomocą

<fieldset>

i

<legend>

:

1<fieldset>
2    <legend>Dane osobowe</legend>
3
4    <label for="first-name">Imie:</label>
5    <input type="text" id="first-name" name="firstName">
6
7    <label for="last-name">Nazwisko:</label>
8    <input type="text" id="last-name" name="lastName">
9</fieldset>
10
11<fieldset>
12    <legend>Wybierz wystawe:</legend>
13
14    <label>
15        <input type="radio" name="exhibition" value="pharaohs">
16        Skarby faraonów
17    </label>
18
19    <label>
20        <input type="radio" name="exhibition" value="mummies">
21        Mumie krolewskie
22    </label>
23
24    <label>
25        <input type="radio" name="exhibition" value="jewelry">
26        Bizuteria staroegipska
27    </label>
28</fieldset>

<fieldset>

jest szczegolnie ważny dla grup radio buttons i checkboxow - bez niego czytnik nie zna kontekstu pytania.

Komunikaty o bledach

Obsluga błędów musi być dostępna - użytkownik musi wiedziec, że wystapil błąd i jak go naprawic.

Bledy inline

1<div class="form-group">
2    <label for="email">Adres e-mail (wymagany):</label>
3    <input type="email" id="email" name="email"
4           aria-required="true"
5           aria-invalid="true"
6           aria-describedby="email-error">
7    <p id="email-error" class="error" rolę="alert">
8        Podaj poprawny adres e-mail, np. jan@example.com
9    </p>
10</div>

Podsumowanie błędów

1<div rolę="alert" aria-labelledby="error-summary-title">
2    <h2 id="error-summary-title">
3        Formularz zawiera 2 błędy:
4    </h2>
5    <ul>
6        <li>
7            <a href="#email">Pole e-mail - podaj poprawny adres</a>
8        </li>
9        <li>
10            <a href="#phone">Pole telefon - wymagane minimum 9 cyfr</a>
11        </li>
12    </ul>
13</div>

Wskazowki i instrukcje

1<label for="password">Haslo:</label>
2<input type="password" id="password" name="password"
3       aria-describedby="password-requirements">
4<div id="password-requirements">
5    <p>Haslo musi zawierac:</p>
6    <ul>
7        <li>Minimum 8 znaków</li>
8        <li>Wielka litere</li>
9        <li>Cyfre</li>
10        <li>Znak specjalny</li>
11    </ul>
12</div>

Autocomplete

Atrybut

autocomplete

pomaga przegladarkom i technologiom wspomagajacym automatycznie wypelnic formularz:

1<form>
2    <label for="full-name">Pelne imie i nazwisko:</label>
3    <input type="text" id="full-name" name="name"
4           autocomplete="name">
5
6    <label for="user-email">E-mail:</label>
7    <input type="email" id="user-email" name="email"
8           autocomplete="email">
9
10    <label for="user-tel">Telefon:</label>
11    <input type="tel" id="user-tel" name="phone"
12           autocomplete="tel">
13</form>

Kompletny przykład formularza

1<form aria-labelledby="form-title" novalidate>
2    <h2 id="form-title">Rezerwacja wizyty w muzeum</h2>
3
4    <fieldset>
5        <legend>Dane osobowe</legend>
6
7        <div class="form-group">
8            <label for="visitor-name">Imie i nazwisko:</label>
9            <input type="text" id="visitor-name"
10                   autocomplete="name"
11                   aria-required="true">
12        </div>
13
14        <div class="form-group">
15            <label for="visitor-email">E-mail:</label>
16            <input type="email" id="visitor-email"
17                   autocomplete="email"
18                   aria-required="true"
19                   aria-describedby="email-hint">
20            <p id="email-hint" class="hint">
21                Na ten adres wyslemy potwierdzenie.
22            </p>
23        </div>
24    </fieldset>
25
26    <fieldset>
27        <legend>Szczegoly wizyty</legend>
28
29        <div class="form-group">
30            <label for="visit-date">Data wizyty:</label>
31            <input type="date" id="visit-date"
32                   aria-required="true">
33        </div>
34
35        <div class="form-group">
36            <label for="visitors-count">Liczba osób:</label>
37            <input type="number" id="visitors-count"
38                   min="1" max="20" value="1">
39        </div>
40    </fieldset>
41
42    <button type="submit">Zarezerwuj wizyte</button>
43</form>

Dostepne formularze to jak dobrze zaprojektowany dokument papirusowy - jasne instrukcje, czytelne pole i natychmiastowa informacja zwrotna pomagają kazdemu uzytkownikowi pomyslnie ukonczyc wypelnianie.