Tillstånd Widgettillstånd

`aria-invalid`

Indikerar att en formulärkontroll inte har klarat validering. Kombinera med aria-describedby som pekar på det läsbara felmeddelandet så att skärmläsaren meddelar både det ogiltiga tillståndet och orsaken.

När ska det användas

På ett inmatningsfält, textarea, combobox, listbox eller annan formulärkontroll vars aktuella värde inte har klarat validering. Sätt aria-invalid="true" efter att användaren har haft möjlighet att ange ett värde — vanligtvis vid blur eller vid formulärinlämning. Att sätta det vid första rendering, innan användaren har skrivit något, är störande och meddelar tomma obligatoriska fält som ogiltiga innan användaren har gjort något.

Kombinera det med det faktiska felmeddelandet. Mönstret är:

Rendera ett synligt felmeddelande med ett eget id.
Sätt aria-invalid="true" på inmatningsfältet.
Peka aria-describedby på felmeddelendets id.

Skärmläsare meddelar då både det ogiltiga tillståndet och förklaringen: “E-post, redigera, ogiltig inmatning, ange en giltig e-postadress”.

Hur det hålls synkroniserat

Giltiga värden är "true", "false", "grammar" och "spelling". I praktiken är de vanliga "true" och "false". "grammar" och "spelling" används av RTF-redigerare för att markera ett specifikt textavsnitt; de flesta formulärflöden behöver dem inte.

Standardvärdet är "false" (eller utelämnat). När validering misslyckas, sätt "true" och visa felmeddelandet. När användaren korrigerar fältet, återställ båda — slå tillbaka aria-invalid till "false" och ta bort eller dölj felmeddelandet — vid exakt samma tidpunkt.

HTML-attributet required och CSS-pseudoklassen :invalid verkar oberoende. aria-invalid är det som skärmläsare konsumerar; de övriga är för webbläsare och stilsättning. Håll dem synkroniserade.

Vanliga fel

Att sätta aria-invalid="true" innan användaren har haft möjlighet att interagera med fältet.
Att markera ett fält som ogiltigt utan aria-describedby och utan synligt felmeddelande — skärmläsaren meddelar “ogiltigt” utan förklaring.
Att lämna aria-invalid="true" kvar efter att användaren har korrigerat värdet.
Att peka aria-describedby på en tom behållare, så att felannonseringen blir tyst.
Att använda aria-invalid på <fieldset> eller andra icke-inmatningsbehållare — det har ingen betydelse där.
Att förlita sig enbart på färg för att indikera feltillståndet — aria-invalid hjälper skärmläsare; du behöver fortfarande en synlig etikett eller ikon för seende användare (WCAG 1.4.1).

Exempel

<label for="email">Email address</label>
<input
  id="email"
  type="email"
  aria-invalid="true"
  aria-describedby="email-error"
  required
>
<p id="email-error">Please enter a valid email address.</p>