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.
<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:
<label for="email1">Email Address (required)</label>
<input type="email" id="email1" required />
Werte
Zugehörige Schnittstellen
Element.ariaRequired
-
Die
ariaRequired
Eigenschaft, Teil derElement
Schnittstelle, spiegelt den Wert desaria-required
Attributs wider. ElementInternals.ariaRequired
-
Die
ariaRequired
Eigenschaft, Teil derElementInternals
Schnittstelle, spiegelt den Wert desaria-required
Attributs wider.
Zugehörige Rollen
Verwendet in Rollen:
Vererbt in Rollen:
Spezifikationen
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA) # aria-required |