aria-required

Das aria-required Attribut gibt an, dass die Benutzereingabe bei dem Element erforderlich ist, bevor ein Formular abgeschickt werden kann.

Beschreibung

Wenn ein semantisches HTML <input>, <select> oder <textarea> einen Wert haben muss, sollte das required Attribut darauf angewandt werden. Das HTML required Attribut verhindert das Absenden des Formulars, sofern die erforderlichen Formularelemente keine gültigen Werte haben, und stellt sicher, dass Personen, die auf unterstützende Technologien angewiesen sind, nachvollziehen können, welche semantischen Formularelemente gültige Inhalte benötigen.

Wenn Formularelemente mit nicht-semantischen Elementen erstellt werden, wie z. B. ein <div> mit einer Role von checkbox, sollte das aria-required Attribut mit dem Wert true hinzugefügt werden, um assistiven Technologien mitzuteilen, dass bei diesem Element eine Benutzereingabe erforderlich ist, damit das Formular abgeschickt werden kann. Das aria-required Attribut kann mit HTML Formularelementen verwendet werden und ist nicht auf Elemente beschränkt, denen eine ARIA-Rolle zugewiesen wurde.

Ähnlich dem HTML required Attribut, das bei semantischen HTML Formularelementen gesetzt ist, vermittelt das aria-required Attribut explizit assistiven Technologien, dass das Element erforderlich ist, bevor ein Formular abgeschickt werden kann. Das required Attribut eines semantischen HTML Formularelements verhindert, dass das Formularelement abgeschickt wird, wenn kein Wert vorhanden ist — es liefert in einigen Browsern eine native Fehlermeldung, falls ein erforderlicher Wert ungültig ist, wenn der Nutzer versucht, das Formular abzuschicken. Das aria-required Attribut, wie alle ARIA-Zustände und Eigenschaften, hat keinen Einfluss auf die Funktionalität des Elements. Funktionalität und Verhalten müssen mit JavaScript hinzugefügt werden.

Hinweis: ARIA verändert nur den Accessibility-Tree, indem es beeinflusst, wie unterstützende Technologie Inhalte den Nutzern präsentiert. ARIA ändert nichts an der Funktion oder dem Verhalten eines Elements. Wenn Sie keine semantischen HTML Elemente für ihren vorgesehenen Zweck und ihre Standardfunktionalität verwenden, müssen Sie JavaScript zur Verwaltung von Verhalten, Fokus und ARIA-Zuständen nutzen.

Die CSS :required und :optional Pseudoklassen stimmen mit <input>, <select> und <textarea> Elementen überein, je nachdem, ob sie erforderlich oder optional sind. Wenn nicht-semantische Elemente als Formularelemente verwendet werden, erhalten Sie diesen Vorteil des CSS Pseudoklassen-Selectors 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 Markierung angezeigt werden, die nicht ausschließlich auf Farbe beruht, um Bedeutung zu vermitteln. Typischerweise werden beschreibender Text und/oder ein Symbol verwendet.

Hinweis: Welche Elemente erforderlich sind, sollte für alle Nutzer ersichtlich sein. Stellen Sie sicher, dass die visuelle Darstellung konsistent und sichtbar angibt, dass das Formularelement erforderlich ist, dabei ist zu beachten, dass Farbe alleine nicht ausreicht, um Informationen zu vermitteln.

Beispiele

Das Attribut sollte der Rolle des Formularelements hinzugefügt werden. Wenn der Nutzer z. B. eine E-Mail-Adresse in ein textbox eintragen muss, fügen Sie aria-required="true" auf der Textbox hinzu.

html

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

Hinweis: Wenn das Label des Feldes bereits das Wort "erforderlich" enthält, wird empfohlen, das aria-required Attribut wegzulassen. Dies verhindert, dass Sprachausgaben den Begriff "erforderlich" doppelt vorlesen.

In diesem Beispiel muss JavaScript verwendet werden, um zu verhindern, dass das enthaltene Formular abgeschickt wird, wenn die Textbox keinen Inhalt hat.

Dies könnte ohne die Notwendigkeit von JavaScript semantisch geschrieben werden:

html

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

Werte

true: Das Element erfordert einen Wert oder muss ausgewählt werden, damit das Formular abgeschickt werden kann.
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:

Vererbt in Rollen:

Spezifikationen

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