Zapoznaj się z 4 zasadami dostępności
Jesteś tutaj:Strona główna / WCAG 2.0 Zasada 3: Zrozumiałość / Wytyczna 3.3 Pomoc przy wprowadzaniu danych / 3.3.2 Etykiety lub instrukcje (A)
3.3.2 Etykiety lub instrukcje (A) - WCAG 2.0
W każdym miejscu, w którym wymagane jest wprowadzenie przez użytkownika informacji musimy zapewnić czytelne etykiety lub instrukcje czy przykłady.
Przykład
Gdy wymagany jest określony format wprowadzanej informacji, możemy go opisać w etykiecie
<label for="date">Data urodzenia (RRRR-MM-DD)</label>
<input type="text" name="data" id="data" />
W przypadku, gdy w formularzu znajduje się dużo pól, w których wymagany jest ten sam format daty, zamiast opisywać go przy każdym polu, możemy PRZED formularzem zamieścić opisową instrukcję:
„Wypełnij poniższe pola. Daty powinny być w prowadzone w formacie RRRR-MM-DD”.
Jeśli mamy więcej ograniczeń lub wymagań, musimy je opisać:
<h3>Instrukcje do formularza</h3>
<ul>
<li>Daty powinny być w prowadzone w formacie RRRR-MM-DD .</li>
<li>Numery telefonów mogą zawierać tylko liczby oraz myślniki (-) lub spacje.</li>
<li>Pola oznaczone gwiazdką (*) musza być wypełnione.</li>
</ul>
<form>
…
</form>
W przypadku, gdy w formularzu mamy grupy opcji do zaznaczenia, np. przy pomocy pól radio albo checkbox powinniśmy zastosować elementy <fieldset> oraz <legend>.
Powinniśmy je stosować wszędzie tam, gdzie tematycznie można pogrupować pola formularza. Zwłaszcza w sytuacji, gdy pola mogą się powtarzać, np. przy składaniu zamówienia będą to pola adresu zamieszkania i pola adresu dostarczenia przesyłki.
<form action="" method="post">
<fieldset>
<legend>Wybierz producenta wzmacniacza</legend>
<input type="radio" name="producent" id="producent1" value="Peavey"/>
<label for="producent1"> Peavey </label>
<br/>
<input type="radio" name="producent" id="producent2" value="Marshall"/>
<label for="producent2">Marshall</label>
<br/>
<input type="radio" name="producent" id="producent3" value="Fender"/>
<label for="producent3">Fender</label>
</fieldset>
...
</form>
W przypadku, gdy formularze są niewielkie a etykiety ściśle opisują charakter pola stosowanie <fieldset> i <legend> nie jest konieczne.
<fieldset>
<legend>Adres zamieszkania</legend>
<label for="miasto">Miejscowość: </label>
<input type="text" id="miasto" name="miasto" />
<br/>
<label for="kod_pocztowy">Kod pocztowy: </label>
<input type="text" id="kod_pocztowy" name="kod_pocztowy" />
...
</fieldset>
<fieldset>
<legend>Adres dostawy</legend>
<label for="d_miasto">Miejscowość: </label>
<input type="text" id="d_miasto" name="d_miasto" />
<br/>
<label for="d_kod_pocztowy">Kod pocztowy: </label>
<input type="text" id="d_kod_pocztowy" name="d_kod_pocztowy" />
...
</fieldset>
Powrót do: Wytyczna 3.3 Pomoc przy wprowadzaniu danych
Dołącz do nas