aria-required

Das aria-required Attribut gibt an, dass eine Benutzereingabe für das Element erforderlich ist, bevor ein Formular abgeschickt werden kann.

Beschreibung

Wenn ein semantisches HTML <input>, <select> oder <textarea> einen Wert haben muss, sollte es das required Attribut haben. Das HTML required Attribut verhindert das Absenden des Formulars, es sei denn, die erforderlichen Formularfelder haben gültige Werte, während sichergestellt wird, dass Nutzer von assistiven Technologien verstehen, welche semantischen Formularelemente gültigen Inhalt benötigen.

Wenn Formularelemente mit nicht-semantischen Elementen erstellt werden, wie etwa ein <div> mit einer role von checkbox, sollte das aria-required Attribut mit einem Wert von true eingefügt werden, um assistiven Technologien anzuzeigen, dass eine Benutzereingabe erforderlich ist, damit das Formular abgeschickt werden kann. Das aria-required Attribut kann mit HTML-Formularelementen verwendet werden; es ist nicht auf Elemente beschränkt, denen eine ARIA-Rolle zugewiesen ist.

Ähnlich dem HTML required Attribut, das auf semantischen HTML-Formularsteuerelementen gesetzt ist, zeigt das aria-required Attribut assistiven Technologien ausdrücklich an, dass das Element vor dem Absenden eines Formulars erforderlich ist. Das required Attribut auf einem semantischen HTML-Formularelement verhindert das Absenden des Formularsteuerelements, wenn kein Wert vorhanden ist — und bietet native Fehlermeldungen in einigen Browsern, wenn ein erforderlicher Wert ungültig ist, wenn der Benutzer versucht, das Formular abzusenden. Das aria-required Attribut hat, wie alle ARIA-Zustände und -Eigenschaften, keinen Einfluss auf die Funktionalität des Elements. Funktionalität und Verhalten müssen mit JavaScript hinzugefügt werden.

Hinweis: ARIA modifiziert nur den Accessibility-Tree und ändert, wie assistive Technologien Inhalte für Benutzer präsentieren. ARIA ändert nichts an der Funktion oder dem Verhalten eines Elements. Wenn Sie semantische HTML-Elemente nicht für ihren beabsichtigten Zweck und die Standardfunktionalität verwenden, müssen Sie JavaScript benutzen, um Verhalten, Fokus und ARIA-Zustände zu verwalten.

Die CSS :required und :optional Pseudoklassen passen auf <input>, <select> und <textarea> Elemente basierend darauf, ob sie erforderlich oder optional sind. Wenn Sie nicht-semantische Elemente als Formularelemente verwenden, erhalten Sie diesen Vorteil des CSS-Pseudoklassen-Selektors nicht. Sie können jedoch Attributselektoren verwenden, wenn das Attribut vorhanden ist: [aria-required="true"] oder [aria-required="false"].

Wenn ein Formular sowohl erforderliche als auch optionale Formularelemente enthält, sollten die erforderlichen Elemente visuell durch eine Gestaltung gekennzeichnet werden, die nicht nur auf Farbe angewiesen ist, um Bedeutung zu vermitteln. Typischerweise werden beschreibender Text und/oder ein Icon verwendet.

Hinweis: Welche Elemente erforderlich sind, sollte für alle Benutzer erkennbar sein. Stellen Sie sicher, dass die visuelle Darstellung das Formularelement in einer konsistenten, sichtbaren Weise als erforderlich kennzeichnet, wobei zu beachten ist, dass Farbe allein nicht ausreicht, um Informationen zu vermitteln.

Beispiele

Das Attribut sollte der Form-Control-Rolle hinzugefügt werden. Wenn der Benutzer eine E-Mail-Adresse im textbox Feld eingeben muss, fügen Sie aria-required="true" im Textfeld hinzu.

html

<div id="tbLabel">Email Address *</div>
<div
  role="textbox"
  contenteditable
  aria-labelledby="tblabel"
  aria-required="true"
  id="email1"></div>

Hinweis: Wenn die Bezeichnung des Feldes bereits das Wort "erforderlich" enthält, wird empfohlen, das aria-required Attribut wegzulassen. Dadurch wird vermieden, dass Bildschirmleser das Wort "erforderlich" doppelt aussprechen.

In diesem Beispiel muss JavaScript verwendet werden, um zu verhindern, dass das übergeordnete Formular gesendet wird, wenn das Textfeld keinen Inhalt hat.

Dies könnte semantisch geschrieben werden, ohne dass JavaScript benötigt wird:

html

<label for="email1">Email Address (required)</label>
<input type="email" id="email1" required />

Werte

true: Das Element benötigt einen Wert oder muss ausgewählt sein, damit das Formular abschickbar ist.
false: Das Element ist nicht erforderlich.

Zugehörige Schnittstellen

Element.ariaRequired: Die ariaRequired Eigenschaft, Teil der Element Schnittstelle, spiegelt den Wert des aria-required Attributs wider.
ElementInternals.ariaRequired: Die ariaRequired Eigenschaft, Teil der ElementInternals Schnittstelle, spiegelt den Wert des aria-required Attributs wider.

Zugehörige Rollen

Verwendet in Rollen:

Erbt in Rollen:

Spezifikationen

Specification
Accessible Rich Internet Applications (WAI-ARIA) # aria-required