aria-required

Hvornår bruges det

Kun når HTML-attributten required ikke er tilgængelig. Native formularfelter — <input>, <select>, <textarea> — bør bruge required. HTML-attributten annonceres af alle skærmlæsere, deltager i browserens formularvalidering og aktiverer CSS-pseudoklassen :required. aria-required gør intet af det på egen hånd; det er udelukkende en annoncering.

De legitime tilfælde for aria-required:

• En brugerdefineret role="combobox" bygget på et <div> eller et stylet <input>, hvor du har overtaget valideringen.
• En role="radiogroup" hvor gruppen som helhed er påkrævet (du kan ikke sætte required på et <div>).
• En brugerdefineret datovælger, filvælger eller vurdering-widget, der ikke er et nativt input.

Kan du bruge HTML required i stedet, så gør det.

Sådan fungerer det

Boolsk. aria-required="true" får hjælpeteknologien til at annoncere “required” (eller “skal udfyldes”, afhængigt af skærmlæseren) sammen med feltets navn og rolle. aria-required="false" svarer til at udelade attributten og er sjældent nødvendigt.

aria-required forhindrer ikke indsendelse. Det tilføjer ikke en rød asterisk. Det skifter ikke en CSS-pseudoklasse. Det er udelukkende et signal til hjælpeteknologi. Du ejer stadig valideringslogikken, fejlmeddelelserne og den synlige påkrævet-markering.

Den synlige påkrævet-markering (en *, ordet “required” osv.) bør også formidles i det tilgængelige navn — enten i den synlige etiket-tekst eller via en beskrivelse — så en seende bruger og en hjælpeteknologibruger får den samme information.

Typiske fejl

• At bruge aria-required="true" på et nativt <input> i stedet for HTML-attributten required. Virker, men du har smidt browservalidering og :required-styling væk uden grund.
• At sætte aria-required="true" på et ikke-formularelement — en knap, en overskrift, et div uden rolle. Attributten ignoreres.
• At glemme den synlige påkrævet-indikator. Seende brugere ser et umærket felt; hjælpeteknologibrugere hører “required”. WCAG SC 1.3.3-problem.
• At markere et felt som påkrævet i ARIA men springe det over i den faktiske formularindsendelsesvalidering. Annonceringen siger påkrævet; serveren accepterer gerne tomme felter.
• At koble aria-required med aria-invalid="true" for tidligt. Feltet er kun ugyldigt efter brugeren har forsøgt at indsende og ladt det stå tomt — ikke ved sideindlæsning.
• At lokalisere den synlige *-markering men glemme at skærmlæserteksten i etiketten nu er ude af synk.

Eksempel

<!-- 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>