ARIA: aria-required-Attribut
Das aria-required
-Attribut gibt an, dass Benutzereingaben im Element erforderlich sind, bevor ein Formular abgesendet werden kann.
Beschreibung
Wenn ein semantisches HTML-,
oder
einen Wert haben muss, sollte das
required
-Attribut darauf angewendet werden. Das HTML-required
-Attribut verhindert das Absenden des Formulars, solange die erforderlichen Formularelemente keine gültigen Werte haben, und stellt sicher, dass Benutzer, die mit Hilfe von unterstützenden Technologien navigieren, verstehen, welche semantischen Formularelemente gültige Inhalte benötigen.
Wenn Formularelemente mit nicht-semantischen Elementen erstellt werden, wie z.B. einem Ähnlich dem auf semantische HTML-Formularelemente angewendeten HTML- Hinweis:
ARIA modifiziert nur den Accessibility Tree und ändert, wie unterstützende Technologie Inhalte Benutzern präsentiert. ARIA ändert nichts am Funktionsumfang oder Verhalten eines Elements. Wenn keine semantischen HTML-Elemente für ihren vorgesehenen Zweck und ihre Standardfunktionalität verwendet werden, müssen Sie JavaScript verwenden, um Verhalten, Fokus und ARIA-Zustände zu verwalten. Die CSS-Pseudoklassen Wenn ein Formular sowohl erforderliche als auch optionale Formularelemente enthält, sollten die erforderlichen Elemente visuell kenntlich gemacht werden, indem eine Gestaltung erfolgt, die nicht ausschließlich auf Farbe angewiesen ist, um Bedeutung zu vermitteln. Typischerweise werden beschreibender Text und/oder ein Symbol verwendet. Hinweis:
Welche Elemente erforderlich sind, sollte für alle Benutzer offensichtlich sein. Stellen Sie sicher, dass die visuelle Darstellung in einer konsistenten, sichtbaren Weise anzeigt, dass das Formularelement erforderlich ist, und denken Sie daran, dass Farbe allein nicht ausreicht, um Informationen zu vermitteln. Das Attribut sollte der Rolle der Formularsteuerung hinzugefügt werden. Wenn der Benutzer eine E-Mail-Adresse im Hinweis:
Wenn das Label des Feldes bereits das Wort "erforderlich" enthält, wird empfohlen, das In diesem Beispiel muss JavaScript verwendet werden, um zu verhindern, dass das enthaltene Formular abgesendet wird, wenn das Textfeld keinen Inhalt hat. Dies könnte semantisch geschrieben werden, ohne die Notwendigkeit von JavaScript: Die Die Verwendet in Rollen: Vererbt in Rollen:checkbox
, sollte das aria-required
-Attribut mit einem Wert von true
hinzugefügt werden, um unterstützenden Technologien mitzuteilen, dass Benutzereingaben im Element erforderlich sind, damit das Formular abgesendet 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.
required
-Attribut vermittelt das aria-required
-Attribut ausdrücklich unterstützenden Technologien, dass das Element erforderlich ist, bevor ein Formular abgesendet werden kann. Das required
-Attribut auf einem semantischen HTML-Formularsteuerungselement verhindert, dass das Formularelement abgesendet wird, wenn kein Wert vorhanden ist — und bietet in einigen Browsern native Fehlermeldungen, 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.:required
und :optional
stimmen überein mit ,
, und
-Elementen, basierend darauf, ob sie erforderlich oder optional sind. Wenn nicht-semantische Elemente als Formularelemente verwendet werden, erhalten Sie diesen CSS-Pseudoklassen-Selektorvorteil nicht. Sie können jedoch Attributselektoren verwenden, wenn das Attribut vorhanden ist:
[aria-required="true"]
oder [aria-required="false"]
.Beispiele
textbox
eingeben muss, fügen Sie aria-required="true"
zum Textfeld hinzu.aria-required
-Attribut auszulassen. Dadurch wird vermieden, dass Screenreader das Wort "erforderlich" doppelt ausgeben.
Werte
Zugehörige Schnittstellen
Element.ariaRequired
ariaRequired
-Eigenschaft, Teil der Element
-Schnittstelle, spiegelt den Wert des aria-required
-Attributs wider.ElementInternals.ariaRequired
ariaRequired
-Eigenschaft, Teil der ElementInternals
-Schnittstelle, spiegelt den Wert des aria-required
-Attributs wider.Zugehörige Rollen
Spezifikationen
Specification Accessible Rich Internet Applications (WAI-ARIA)
# aria-requiredSiehe auch