Etiketter eller instruktioner

Vad det kräver

När användaren ombeds lämna inmatning — ett textfält, kryssruta, radioknapp, select, datumväljare, filväljare — måste det finnas en etikett eller instruktion som talar om vad som förväntas. Etiketten kan vara synlig text, ett <label>-element, ett aria-label eller aria-labelledby; instruktioner kan inkludera det obligatoriska formatet, tillåtna värden eller exempel.

Obligatoriska fält, förväntade format (“ÅÅÅÅ-MM-DD”) och särskilda begränsningar (“minst 8 tecken, blandad versalisering”) faller alla under det här kriteriet.

Hur du uppfyller det

• Para varje <input>, <textarea> och <select> med ett <label for="…"> vars for matchar inmatningsfältets id.
• Använd aldrig platshållartext som enda etikett — platshållare försvinner vid fokus och har dålig kontrast.
• Ange obligatoriska fält synligt (asterisk, ordet “obligatoriskt” eller aria-required="true") och förklara konventionen nära formulärets topp.
• Ange det förväntade formatet i förväg, inte efter att användaren har gjort ett misstag: “Datum (ÅÅÅÅ-MM-DD)” eller “Telefonnummer, t.ex. 08-123 456 78.”
• För grupper av kryssrutor eller radioknappar, använd <fieldset> och <legend> för att märka gruppen.
• För inmatningar med enbart ikon eller filterfält, använd aria-label för att ge ett meningsfullt namn.

Vanliga fel

• Formulär där platshållartext är den enda etiketten och försvinner i samma ögonblick användaren börjar skriva.
• Obligatoriska fält markerade med enbart röda asterisker utan programmatisk koppling.
• Fält för födelsedatum som förväntar sig ett visst format och bara talar om det för användaren efter att valideringen misslyckas.
• Sökfält märkta med en förstoringsglas-ikon och inget tillgängligt namn.
• Inloggningsformulär där användarnamn och lösenordsfält är visuellt placerade bredvid etiketter men utan programmatisk koppling.

Varför det spelar roll

Formulär är där de flesta användare utför transaktioner på en webbplats — registrerar sig, checkar ut, kontaktar, ansöker om support, bokar. Omärkta eller undermärkta formulär utestänger skärmläsaranvändare helt, eftersom de inte kan avgöra vilka data varje ruta efterfrågar. De misslyckas också för dyslektiska användare, som tappar kontexten i samma ögonblick en platshållare försvinner, och för användare med kognitiva funktionsnedsättningar, som gynnas av formatvägledning i förväg.

Etiketter är också bärande för lösenordshanterare, autofyll och röstkontrollprogram, som alla använder etikettext för att matcha fält. Ett välmärkt formulär gynnar alla.