3.3.2 Etykiety lub instrukcje

Krótko

Użytkownik musi wiedzieć, co ma wpisać lub wybrać w formularzu, zanim popełni błąd.

Problem w praktyce

Formularz ma pola bez etykiet, same placeholdery, niejasne instrukcje albo wymagany format danych, którego użytkownik musi się domyślać. Użytkownik nie wie, co wpisać, jaki format jest poprawny ani które pola są wymagane.

To kryterium dotyczy informacji potrzebnych przed wpisaniem danych. Nie dotyczy jeszcze błędów po walidacji, sugestii naprawy błędów ani technicznego powiązania etykiety z polem.

Kogo to dotyczy

• Osób niewidomych korzystających z czytników ekranu.
• Osób słabowidzących, które powiększają stronę albo widzą tylko fragment formularza.
• Osób z trudnościami poznawczymi, które potrzebują jasnych i stałych wskazówek.
• Osób korzystających z klawiatury, które przechodzą po polach w kolejności fokusu.
• Osób używających autouzupełniania, menedżerów haseł i zapisanych danych.
• Wszystkich użytkowników w długich, urzędowych, finansowych albo stresujących formularzach.

Dobry przykład

• Pole ma widoczną etykietę, na przykład „Adres e-mail”, „Data urodzenia” albo „Numer telefonu”.
• Format danych jest podany przed wysłaniem formularza, na przykład „RRRR-MM-DD”.
• Pola wymagane są jasno oznaczone tekstem, a nie samym kolorem.
• Instrukcja jest blisko pola, którego dotyczy.
• Placeholder może pomagać, ale nie jest jedyną etykietą.
• Grupa pól, na przykład radio albo checkbox, ma pytanie lub legendę.

Zły przykład

• Pole nie ma widocznej etykiety ani innej jasnej instrukcji.
• Placeholder jest jedyną informacją o przeznaczeniu pola.
• Formularz pokazuje etykietę „Data”, ale nie podaje wymaganego formatu.
• Pola wymagane są oznaczone tylko kolorem albo samą gwiazdką bez wyjaśnienia.
• Instrukcja pojawia się dopiero po błędzie, choć użytkownik potrzebował jej wcześniej.
• Grupa radio ma opcje „E-mail” i „Telefon”, ale nie ma pytania, czego ten wybór dotyczy.

Przykłady kodu

<label for="email">
  Adres e-mail
</label>
<input
  id="email"
  name="email"
  type="email"
>

<label for="birth-date">
  Data urodzenia
</label>
<p id="birth-date-hint">
  Wpisz datę w formacie RRRR-MM-DD, np. 1990-04-27.
</p>
<input
  id="birth-date"
  name="birth-date"
  type="text"
  aria-describedby="birth-date-hint"
>

<input
  name="email"
  type="email"
  placeholder="Adres e-mail"
>

<fieldset>
  <legend>
    Wybierz sposób kontaktu
  </legend>

  <label>
    <input
      type="radio"
      name="contact-method"
      value="email"
    >
    E-mail
  </label>

  <label>
    <input
      type="radio"
      name="contact-method"
      value="phone"
    >
    Telefon
  </label>
</fieldset>

<p>Pola oznaczone gwiazdką (*) są wymagane.</p>

<label for="given-name">
  Imię *
</label>
<input
  id="given-name"
  name="given-name"
  type="text"
  required
>

Przykład graficzny

To statyczne demo edukacyjne. Pola są makietami, nie działającym formularzem.

Jak sprawdzić

1. Znajdź wszystkie formularze i pola.
2. Sprawdź, czy każde pole ma widoczną etykietę.
3. Sprawdź, czy instrukcje są dostępne przed wysłaniem formularza.
4. Sprawdź, czy format danych jest podany tam, gdzie jest wymagany.
5. Sprawdź, czy placeholder nie jest jedyną etykietą.
6. Sprawdź grupy checkbox i radio.
7. Uruchom czytnik ekranu.
8. Przejdź po formularzu klawiaturą.
9. Sprawdź, czy użytkownik rozumie, co ma wpisać, zanim popełni błąd.

Co sprawdzi automat, a czego nie

Automat może wykryć

• Część pól bez label.
• Część błędnych relacji aria-describedby.
• Część problemów z grupami pól.
• Część problemów struktury formularzy.

Automat nie oceni pewnie

• Czy etykieta jest zrozumiała.
• Czy instrukcja wystarcza.
• Czy format danych jest jasny.
• Czy użytkownik wie, które pola są wymagane.
• Czy placeholder nie zastępuje etykiety w praktyce.
• Czy instrukcja pojawia się we właściwym momencie.

Typowe błędy

• Same placeholdery zamiast widocznych etykiet.
• Etykiety typu „Dane” albo „Informacja”.
• Brak informacji o formacie daty, NIP, PESEL albo telefonu.
• Gwiazdka bez wyjaśnienia, co oznacza.
• Instrukcje pokazane dopiero po błędzie.
• Grupy radio bez pytania lub legendy.
• Ukryte etykiety tam, gdzie widoczna etykieta byłaby potrzebna.

Powiązane kryteria

• 1.3.1 Informacje i relacje: programistyczne powiązanie etykiet, instrukcji i grup pól.
• 3.3.1 Identyfikacja błędu: wskazanie błędu po walidacji.
• 3.3.3 Sugestie korekty błędów: podpowiedzi naprawy błędów po ich wykryciu.
• 4.1.2 Nazwa, rola, wartość: dostępna nazwa i stan komponentu.
• 2.4.6 Nagłówki i etykiety: jasność i opisowość etykiet.

Źródła

• WCAG 2.2: 3.3.2 Labels or Instructions (otwiera się w nowym oknie)
• Understanding WCAG 3.3.2 (otwiera się w nowym oknie)
• How to Meet WCAG 3.3.2 (otwiera się w nowym oknie)
• Technika H44: użycie elementów label do powiązania etykiet tekstowych z kontrolkami formularza (otwiera się w nowym oknie)
• Technika H71: opis grup kontrolek formularza przez fieldset i legend (otwiera się w nowym oknie)
• Technika G89: podanie oczekiwanego formatu danych i przykładu (otwiera się w nowym oknie)
• Technika G184: instrukcje tekstowe na początku formularza lub zestawu pól (otwiera się w nowym oknie)
• Technika ARIA1: aria-describedby jako opis kontrolki interfejsu (otwiera się w nowym oknie)
• Technika H90: oznaczanie wymaganych kontrolek formularza przez label lub legend (otwiera się w nowym oknie)
• Failure F82: wizualny format pól telefonu bez tekstowej etykiety (otwiera się w nowym oknie)