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