aria-required

När du ska använda det

Enbart när HTML-attributet required inte är tillgängligt. Nativa formulärfält — <input>, <select>, <textarea> — ska använda required. HTML-attributet annonseras av alla skärmläsare, deltar i webbläsarformulärvalidering och aktiverar CSS-pseudoklassen :required. aria-required gör inget av detta på egen hand; det är rent en annonsering.

Legitima fall för aria-required:

• En anpassad role="combobox" byggd på ett <div> eller ett stiliserat <input> där du har tagit över valideringen.
• En role="radiogroup" där gruppen som helhet är obligatorisk (du kan inte lägga required på ett <div>).
• En anpassad datumväljare, filväljare eller betygswidget som inte är ett nativt fält.

Om du kan använda HTML required, gör det.

Hur det fungerar

Booleskt. aria-required="true" gör att hjälpmedlet annonserar “obligatorisk” (eller “måste fyllas i”, beroende på skärmläsaren) tillsammans med fältets namn och roll. aria-required="false" är detsamma som att utelämna attributet och behövs sällan.

aria-required förhindrar inte formulärinlämning. Det lägger inte till en röd asterisk. Det växlar inte en CSS-pseudoklass. Det är enbart en signal till hjälpmedel. Du äger fortfarande valideringslogiken, felmeddelandena och den synliga obligatoriska fältmarkören.

Den synliga obligatoriska markören (ett *, ordet “obligatorisk” osv.) ska också förmedlas i det tillgängliga namnet — antingen i den synliga etiketttexten eller via en beskrivning — så att en seende användare och en hjälpmedelsanvändare får samma information.

Vanliga fel

• Att använda aria-required="true" på ett nativt <input> i stället för HTML-attributet required. Fungerar, men du har kastat bort webbläsarvalidering och :required-styling i onödan.
• Att sätta aria-required="true" på ett icke-formulärfält — en knapp, en rubrik, ett div utan roll. Attributet ignoreras.
• Att glömma den synliga obligatoriska indikatorn. Seende användare ser ett omärkt fält; hjälpmedelsanvändare hör “obligatorisk”. Problem med WCAG SC 1.3.3.
• Att märka upp ett fält som obligatorisk i ARIA men hoppa över det i den faktiska valideringslogiken vid formulärinlämning. Annonseringen säger obligatorisk; servern accepterar glatt tomma svar.
• Att koppla aria-required med aria-invalid="true" för tidigt. Fältet är ogiltigt enbart efter att användaren har försökt skicka och lämnat det tomt, inte vid sidladdning.
• Att lokalisera den synliga "*"-markören men glömma att skärmläsartexten i etiketten nu är missanpassad.

Exempel

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