Felidentifiering
När användaren gör ett formulärfel som automatiskt detekteras måste felet identifieras och beskrivas för användaren i text — inte enbart med färg, inte enbart med en ikon, inte med tystnad.
Vad det kräver
Om ett formulärfält är ogiltigt (fel format, saknat obligatoriskt värde, utanför tillåtet intervall) och systemet automatiskt detekterar det, måste felet identifieras för användaren med en textbeskrivning. Texten måste ange vilket fält som är fel och vad som är fel — inte bara att “något” misslyckades.
Kriteriet kräver inte att systemet detekterar varje möjligt fel; det kräver att detekterade fel visas för användaren som text.
Hur du uppfyller det
- Para varje formulärfält med ett synligt felmeddelande som beskriver problemet, placerat bredvid eller under fältet.
- Referera till det felande fältet med namn: “E-postadressen måste innehålla ett @-tecken.”
- Länka felet till inmatningsfältet med
aria-describedbyså att skärmläsare meddelar det vid fokus. - Använd
aria-invalid="true"på det felande fältet. - För validering på serversidan, rendera en sammanfattningslista längst upp i formuläret, där varje punkt länkar till det felande fältet.
- Meddela dynamiska valideringsmeddelanden via en live-region (
aria-live="polite"ellerrole="alert") så att skärmläsare hör felet utan att användaren behöver hitta det.
Vanliga fel
- Röda ramar runt ogiltiga fält utan textförklaring.
- En generisk banner som säger “Formuläret är ogiltigt” utan att identifiera vilka fält.
- Felmeddelanden som bara visas i tooltips och försvinner när fältet tappar fokus.
- Inbyggd webbläsarvalidering (
required,pattern) använd ensam — webbläsarens bubbla är opålitlig för skärmläsare och försvinner för snabbt. - Felindikationer med enbart inline-ikon (rött utropstecken) utan tillgängligt namn.
Varför det spelar roll
Det här är det vanligast citerade inmatningshjälpsfelet i granskningar. För seende användare är en röd ram åtminstone en ledtråd; för skärmläsaranvändare är den lika bra som om den inte existerade. För färgblinda användare registreras inte en röd ram alls. När en användare har fyllt i ett långt formulär och inlämningen misslyckas i tysthet är det troligt att de avbryter — och tillgänglighet är anledningen till att det specifikt misslyckades för dem.
Para 3.3.1 med 3.3.3 (Felförslag) och 4.1.3 (Statusmeddelanden) — tillsammans bildar de det moderna mönstret för formulärfel.