Standarder · ARIA

Tilstand Widgettilstand

aria-invalid

Angiver, at et formularfelt ikke har bestået validering. Par med aria-describedby, der peger på den menneskeläsbare fejlmeddelelse, så skærmlæseren annoncerer både den ugyldige tilstand og årsagen.

Hvornår bruges den

På et inputfelt, textarea, combobox, listbox eller et andet formularwidget, hvis aktuelle værdi ikke har bestået validering. Sæt aria-invalid="true" efter, at brugeren har haft mulighed for at indtaste en værdi — typisk ved blur eller ved indsendelse. At sætte den ved første rendering, inden brugeren har skrevet noget, er irriterende og annoncerer tomme påkrævede felter som ugyldige, inden brugeren har gjort noget.

Par den med den faktiske fejlmeddelelse. Mønsteret er:

  1. Gengivelse af en synlig fejlmeddelelse med sit eget id.
  2. Sæt aria-invalid="true" på inputfeltet.
  3. Peg aria-describedby på fejlmeddelelsens id.

Skærmlæsere annoncerer derefter både den ugyldige tilstand og forklaringen: “E-mail, tekstredigering, ugyldig indtastning, angiv venligst en gyldig e-mailadresse”.

Synkronisering

Gyldige værdier er "true", "false", "grammar" og "spelling". I praksis er de hyppige "true" og "false". "grammar" og "spelling" bruges af rich-text-redigeringsprogrammer til at markere et bestemt tekstudsnit; de fleste formularflows har ikke brug for dem.

Brug "false" som standard (eller udelad den). Når validering fejler, sæt "true" og vis fejlmeddelelsen. Når brugeren retter feltet, nulstil begge — skift aria-invalid tilbage til "false" og fjern eller skjul fejlmeddelelsen — på samme tid.

HTML-attributten required og CSS-pseudoklassen :invalid fungerer uafhængigt. aria-invalid er det bit, skærmlæsere forbruger; de andre er til browsere og styling. Hold dem synkroniserede.

Hyppige fejl

  • Sætte aria-invalid="true" inden brugeren har haft mulighed for at interagere med feltet.
  • Markere et felt som ugyldigt uden aria-describedby og uden synlig fejlmeddelelse — skærmlæseren annoncerer “ugyldig” uden nogen forklaring.
  • Lade aria-invalid="true" stå, efter at brugeren har rettet værdien.
  • Pege aria-describedby på en tom container, så fejlannonceringen er tavs.
  • Bruge aria-invalid på <fieldset> eller andre ikke-inputcontainere — det er ikke meningsfuldt der.
  • Udelukkende bruge farve til at indikere fejltilstanden — aria-invalid hjælper skærmlæserbrugere; der er stadig brug for en synlig etiket eller et ikon til seende brugere (WCAG 1.4.1).

Eksempel

<label for="email">E-mailadresse</label>
<input
  id="email"
  type="email"
  aria-invalid="true"
  aria-describedby="email-error"
  required
>
<p id="email-error">Angiv venligst en gyldig e-mailadresse.</p>