aria-required

Wanneer te gebruiken

Alleen wanneer het HTML-attribuut required niet beschikbaar is. Native formuliervelden — <input>, <select>, <textarea> — dienen required te gebruiken. Het HTML-attribuut wordt door elke schermlezer aangekondigd, neemt deel aan browserformuliervalidatie en activeert de CSS-pseudo-klasse :required. aria-required doet niets van dat op zichzelf; het is uitsluitend een aankondiging.

De legitieme gevallen voor aria-required:

• Een aangepaste role="combobox" gebouwd op een <div> of gestijlde <input> waarbij de validatie is overgenomen.
• Een role="radiogroup" waarbij de groep als geheel verplicht is (men kan required niet op een <div> plaatsen).
• Een aangepaste datumkiezer, bestandskiezer of beoordelingswidget die geen native input is.

Als HTML required gebruikt kan worden, verdient dat de voorkeur.

Hoe het werkt

Boolean. aria-required="true" laat de hulptechnologie “verplicht” aankondigen (of “moet worden ingevuld”, afhankelijk van de schermlezer) naast de naam en rol van het veld. aria-required="false" is hetzelfde als het weglaten van het attribuut en is zelden nodig.

aria-required verhindert het indienen niet. Het voegt geen rood sterretje toe. Het schakelt geen CSS-pseudo-klasse om. Het is uitsluitend een signaal aan hulptechnologie. De validatielogica, foutmeldingen en de zichtbare markering van verplichte velden blijven de verantwoordelijkheid van de ontwikkelaar.

De zichtbare markering van verplichte velden (een *, het woord “verplicht”, enz.) moet ook worden overgebracht in de toegankelijke naam — hetzij in de zichtbare labeltekst, hetzij via een beschrijving — zodat een ziende gebruiker en een hulptechnologiegebruiker dezelfde informatie ontvangen.

Veelvoorkomende fouten

• aria-required="true" gebruiken op een native <input> in plaats van het HTML-attribuut required. Werkt, maar browservalidatie en :required-styling gaan verloren zonder enig voordeel.
• aria-required="true" instellen op een niet-formulierbesturingselement — een knop, een kop, een div zonder rol. Het attribuut wordt genegeerd.
• De zichtbare verplichtmarkering vergeten. Ziende gebruikers zien een ongemarkeerd veld; hulptechnologiegebruikers horen “verplicht”. WCAG SC 1.3.3-probleem.
• Een veld als verplicht markeren in ARIA maar het overslaan in de daadwerkelijke formulierindieningsvalidatie. De aankondiging zegt verplicht; de server accepteert echter ook lege waarden.
• aria-required koppelen aan aria-invalid="true" te vroeg. Het veld is alleen ongeldig nadat de gebruiker heeft geprobeerd te verzenden en het leeg heeft gelaten, niet bij het laden van de pagina.
• De zichtbare markering * lokaliseren maar vergeten dat de schermlezer-tekst in het label nu niet overeenkomt.

Voorbeeld

<!-- Native input: prefer the HTML attribute -->
<label for="email">
  Email <span aria-hidden="true">*</span>
</label>
<input id="email" type="email" required aria-describedby="email-hint">
<p id="email-hint">Required. We will only use this to send your receipt.</p>

<!-- Custom combobox where HTML required isn't available -->
<div
  role="combobox"
  aria-required="true"
  aria-labelledby="country-label"
  aria-controls="country-listbox"
  aria-expanded="false"
>
  <input type="text" id="country-input">
</div>
<span id="country-label">Country (required)</span>