aria-invalid

Wanneer te gebruiken

Op een invoerveld, textarea, combobox, listbox of ander formulierelement waarvan de huidige waarde de validatie niet heeft doorstaan. Stel aria-invalid="true" in nadat de gebruiker de gelegenheid heeft gehad een waarde in te voeren — doorgaans bij verlies van focus of bij verzending. Het instellen bij het eerste renderen, vóórdat de gebruiker iets heeft getypt, is vervelend en kondigt lege verplichte velden aan als ongeldig voordat de gebruiker iets heeft gedaan.

Combineer het met het daadwerkelijke foutbericht. Het patroon is:

1. Geef een zichtbaar foutbericht weer met een eigen id.
2. Stel aria-invalid="true" in op het invoerveld.
3. Verwijs met aria-describedby naar het id van het foutbericht.

Schermlezers kondigen dan zowel de ongeldige toestand als de toelichting aan: “E-mailadres, bewerken, ongeldige invoer, voer een geldig e-mailadres in”.

Synchroniseren

Geldige waarden zijn "true", "false", "grammar" en "spelling". In de praktijk zijn "true" en "false" het meest gangbaar. "grammar" en "spelling" worden gebruikt door rijke teksteditors om een specifiek tekstgedeelte te markeren; de meeste formulierworkflows hebben ze niet nodig.

Gebruik standaard "false" (of laat het attribuut weg). Wanneer de validatie mislukt, stel "true" in en toon het foutbericht. Wanneer de gebruiker het veld corrigeert, schakel beide terug — zet aria-invalid terug naar "false" en verwijder of verberg het foutbericht — op hetzelfde moment.

Het HTML-attribuut required en de CSS-pseudoklasse :invalid werken onafhankelijk. aria-invalid is het signaal dat schermlezers gebruiken; de andere zijn voor browsers en opmaak. Houd ze gesynchroniseerd.

Veelvoorkomende fouten

• aria-invalid="true" instellen vóórdat de gebruiker de gelegenheid heeft gehad met het veld te interageren.
• Een veld als ongeldig markeren zonder aria-describedby en zonder zichtbaar foutbericht — de schermlezer kondigt “ongeldig” aan zonder toelichting.
• aria-invalid="true" laten staan nadat de gebruiker de waarde heeft gecorrigeerd.
• aria-describedby laten verwijzen naar een lege container, zodat de foutaankondiging stil is.
• aria-invalid gebruiken op <fieldset> of andere niet-invoercontainers — het heeft daar geen betekenis.
• Uitsluitend kleur gebruiken om de foutstatus aan te geven — aria-invalid helpt schermlezers; er is nog steeds een zichtbaar label of pictogram nodig voor ziende gebruikers (WCAG 1.4.1).

Voorbeeld

<label for="email">E-mailadres</label>
<input
  id="email"
  type="email"
  aria-invalid="true"
  aria-describedby="email-error"
  required
>
<p id="email-error">Voer een geldig e-mailadres in.</p>