Kako pogreške u obrascu učiniti pristupačnima

Obrasci su mjesto gdje se pristupačnost pretvara u prihod: tko ne pronađe pogrešku, ne naruči. Upravo tu većina izvedbi zakaže jer poruka o pogrešci postoji samo za oči.

Što ovdje polazi po zlu

<form>
  <label for="mail">E-Mail</label>
  <input id="mail" name="mail" class="input-error">
  <!-- Fehler nur farblich und optisch, nicht programmatisch:
       - keine Verbindung zum Feld
       - keine Rolle, also keine Ansage
       - "ungueltig" sagt nicht, was erwartet wird -->
  <span class="error-text">Ungueltig</span>

  <button type="submit">Weiter</button>
</form>

• Poruka nije povezana s poljem: tko tipkovnicom uđe u polje, o njoj ne čuje ništa.
• „Neispravno“ ne govori što se očekuje (3.3.3 traži prijedlog kada je poznat).
• Poruka se pojavljuje nijemo: bez žive semantike i bez promjene fokusa ne primijeti je nitko tko ne gleda (4.1.3).

Rješenje na pojedinom polju

<form novalidate>
  <label for="mail">E-Mail</label>
  <input
    id="mail"
    name="mail"
    type="email"
    autocomplete="email"
    aria-invalid="true"
    aria-describedby="mail-error"
  >
  <!-- Mit dem Feld verbunden (aria-describedby), als Text identifiziert
       und mit einem konkreten Hinweis, wie es richtig geht -->
  <p id="mail-error" class="error-text">
    E-Mail-Adresse fehlt das @-Zeichen. Beispiel: name@firma.de
  </p>

  <button type="submit">Weiter</button>
</form>

Više pogrešaka odjednom

<!-- Bei mehreren Fehlern: eine Zusammenfassung oben, fokussiert nach
     dem Absenden. Jeder Eintrag springt zum betroffenen Feld. -->
<div role="alert" tabindex="-1" id="error-summary">
  <h2>2 Angaben fehlen</h2>
  <ul>
    <li><a href="#mail">E-Mail-Adresse fehlt das @-Zeichen</a></li>
    <li><a href="#plz">Postleitzahl braucht 5 Ziffern</a></li>
  </ul>
</div>

<script>
  // Nach dem Absenden: Fokus in die Zusammenfassung, damit die Ansage
  // ankommt und die Tastatur direkt am Fehler steht.
  document.getElementById("error-summary").focus();
</script>

Nakon slanja dugog obrasca sažetak je najpouzdaniji put: navodi broj pogrešaka, imenuje svaku i jednim klikom vodi fokus na pravo mjesto. To pomaže svima, ne samo korisnicima čitača zaslona.

Česte dodatne pogreške

• Placeholder kao oznaka: nestaje pri tipkanju i nije oznaka (koristite pravi element label).
• Boja pogreške bez drugog znaka: sama crvena krši 1.4.1 (upotreba boje).
• Poruke koje nestaju i vraćaju se pri svakom pritisku tipke: to daje jednu najavu po tipki. Provjeravajte pri napuštanju polja ili pri slanju.
• Spremnik aria-live umetnut zajedno s tekstom: tada se često ne čuje ništa. Spremnik mora postojati prije i samo se puniti.

Provjera

1. Pošaljite prazan obrazac i samo tipkovnicom dođite do prve pogreške.
2. Provjerite čitačem zaslona: najavljuje li se pogreška? Ponavlja li se kada polje dobije fokus?
3. Zumirajte na 200 posto: ostaje li poruka vidljiva uz svoje polje?