aria-required

Verwendung

Nur wenn das HTML-Attribut required nicht verfügbar ist. Bei nativen Formularfeldern — <input>, <select>, <textarea> — sollte required verwendet werden. Das HTML-Attribut wird von jedem Screenreader vorgelesen, nimmt an der Browser-Formularvalidierung teil und aktiviert die CSS-Pseudoklasse :required. aria-required leistet nichts davon eigenständig; es ist ausschließlich eine Mitteilung an assistive Technologie.

Berechtigte Einsatzfälle für aria-required:

• Eine benutzerdefinierte role="combobox", die auf einem <div> oder einem gestylten <input> aufgebaut ist und bei der die Validierung selbst übernommen wird.
• Eine role="radiogroup", bei der die Gruppe als Ganzes erforderlich ist (auf einem <div> kann required nicht gesetzt werden).
• Ein benutzerdefinierter Datepicker, File-Picker oder Rating-Widget, das kein natives Input-Element ist.

Wenn HTML required verwendet werden kann, sollte es verwendet werden.

Verhalten

Boolean. aria-required="true" veranlasst die assistive Technologie, zusammen mit Name und Rolle des Feldes „erforderlich“ (oder eine entsprechende Formulierung je nach Screenreader) vorzulesen. aria-required="false" entspricht dem Weglassen des Attributs und wird selten benötigt.

aria-required verhindert nicht das Absenden. Es fügt kein rotes Sternchen hinzu. Es aktiviert keine CSS-Pseudoklasse. Es ist ausschließlich ein Signal an die assistive Technologie. Die Validierungslogik, die Fehlermeldungen und der sichtbare Pflichtfeld-Marker müssen selbst implementiert werden.

Der sichtbare Pflichtfeld-Marker (ein *, das Wort „erforderlich“ o. ä.) sollte auch im zugänglichen Namen enthalten sein — entweder im sichtbaren Label-Text oder über eine Beschreibung — damit sehende und nicht sehende Nutzer dieselbe Information erhalten.

Häufige Fehler

• aria-required="true" auf einem nativen <input> statt des HTML-Attributs required verwenden. Funktioniert, aber Browser-Validierung und :required-Styling werden unnötig aufgegeben.
• aria-required="true" auf einem Nicht-Formularelement setzen — einem Button, einer Überschrift oder einem <div> ohne Rolle. Das Attribut wird ignoriert.
• Den sichtbaren Pflichtfeld-Marker vergessen. Sehende Nutzer sehen ein nicht gekennzeichnetes Feld; Nutzer von assistiver Technologie hören „erforderlich“. Problem mit WCAG-Erfolgskriterium 1.3.3.
• Ein Feld in ARIA als erforderlich kennzeichnen, es aber in der tatsächlichen Formular-Absendelogik überspringen. Die Ansage lautet „erforderlich“; der Server akzeptiert dennoch leere Werte.
• aria-required zu früh mit aria-invalid="true" koppeln. Das Feld ist erst ungültig, nachdem die Nutzerin oder der Nutzer versucht hat, das Formular abzusenden, und es leer gelassen hat — nicht beim Seitenaufruf.
• Den sichtbaren *-Marker lokalisieren, aber vergessen, dass der Screenreader-Text im Label nun nicht mehr übereinstimmt.

Beispiel

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