WCAG 3.3.2 Ledtexter/etiketter eller instruktioner

När kunden ska fylla i något ska det finnas en synlig etikett eller instruktion som säger vad som ska fyllas i och i vilket format. Platshållartext räcker inte, eftersom den försvinner när man börjar skriva. I en webbutik gäller det sökfältet, nyhetsbrevet och alla fält i kassan.

• Sökfältet har bara platshållaren ”Sök” och ingen etikett.
• Fälten i kassan har platshållare i stället för etiketter, så att kunden inte ser vad ett ifyllt fält gällde.
• Formatet som krävs, till exempel postnummer med fem siffror, syns först i felmeddelandet.
• Obligatoriska fält markeras bara med en asterisk som inte förklaras någonstans.
• Fältet för rabattkod saknar etikett och knappen heter bara ”OK”.

Ge varje fält en synlig label, och skriv format och krav i en hjälptext som kopplas till fältet med aria-describedby.

<label for="postnr">Postnummer</label>
<input id="postnr" name="postnr" inputmode="numeric"
       autocomplete="postal-code" aria-describedby="postnr-hjalp">
<p id="postnr-hjalp">Fem siffror, till exempel 123 45.</p>

Gratistestet

Gratistestet letar efter det här i källkoden:

• Formulärfältet har bara en platshållartext. Den försvinner när man börjar skriva och räknas inte som etikett.
• Formulärfält saknar etikett. Den som använder skärmläsare får inte veta vad som ska fyllas i.

Gratistestet hittar fält utan etikett. Månadsgranskningen kontrollerar dessutom felmeddelandena i formulären. Om instruktionerna är tydliga bedömer du själv.

• Understanding 3.3.2 hos W3C (på engelska)
• Kravet i W3C:s svenska översättning

Den auktoriserade svenska översättningen gäller WCAG 2.0. Kravet 3.3.2 har samma lydelse i WCAG 2.1.