ARIA: aria-required Attribut - ARIA

Beschreibung

Wenn ein semantisches HTML-<input>, <select> oder <textarea> einen Wert haben muss, sollte ihm das required Attribut zugewiesen werden. Das HTML-Attribut required verhindert das Senden des Formulars, wenn die erforderlichen Formularelemente keine gültigen Werte haben. Gleichzeitig wird sichergestellt, dass diejenigen, 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 <div> mit einer Rolle von checkbox, sollte das aria-required Attribut mit einem Wert von true hinzugefügt werden, um unterstützenden Technologien anzuzeigen, dass Benutzereingaben auf dem Element erforderlich sind, damit das Formular übermittelt werden kann. Das aria-required Attribut kann mit HTML-Formularelementen verwendet werden; es ist nicht auf Elemente beschränkt, die eine ARIA-Rolle zugewiesen haben.

Ähnlich wie das HTML-Attribut required, das auf semantische HTML-Formularelemente gesetzt wird, vermittelt das aria-required Attribut explizit unterstützenden Technologien, dass das Element erforderlich ist, bevor ein Formular übermittelt werden kann. Das required Attribut auf einem semantischen HTML-Formularelement verhindert, dass das Formularelement gesendet wird, wenn kein Wert vorhanden ist — in einigen Browsern wird eine native Fehlermeldung angezeigt, wenn ein erforderlicher Wert ungültig ist, wenn der Benutzer versucht, das Formular zu senden. Das aria-required Attribut, wie alle ARIA-Zustände und -Eigenschaften, hat keine Auswirkung auf die Funktionalität des Elements. Funktionalität und Verhalten müssen mit JavaScript hinzugefügt werden.

Hinweis: ARIA verändert nur den Accessibility-Baum und ändert, wie unterstützende Technologien Inhalte präsentieren. ARIA verändert die Funktion oder das Verhalten eines Elements nicht. Wenn Sie keine semantischen HTML-Elemente für ihren beabsichtigten Zweck und deren Standardfunktionalität verwenden, müssen Sie JavaScript nutzen, um das Verhalten, den Fokus und die ARIA-Zustände zu verwalten.

Die CSS-Pseudoklassen :required und :optional passen zu <input>, <select>, und <textarea> Elementen basierend darauf, ob sie erforderlich oder optional sind. Wenn man nicht-semantische Elemente als Formularelemente verwendet, erhält man nicht diesen Vorteil der CSS-Pseudoklassenselektoren. Man kann 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 Darstellung angezeigt werden, die nicht nur auf Farben beruht, um Bedeutung zu vermitteln. In der Regel 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 des Formularelements in einer konsistenten, sichtbaren Weise angezeigt wird, wobei zu beachten ist, dass Farbe allein nicht ausreicht, um Informationen zu vermitteln.

Beispiele

Das Attribut sollte der Formularsteuerungsrolle hinzugefügt werden. Wenn der Benutzer eine E-Mail-Adresse textbox ausfüllen muss, fügen Sie aria-required="true" zur 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 Felds bereits das Wort "erforderlich" enthält, ist es ratsam, das aria-required Attribut wegzulassen. Dadurch wird vermieden, dass Screenreader das Wort "erforderlich" doppelt vorlesen.

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

Dies könnte semantisch geschrieben werden, ohne dass JavaScript erforderlich ist:

html

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

Werte

true: Das Element erfordert einen Wert oder muss überprüft werden, damit das Formular gesendet werden kann.
false: Das Element ist nicht erforderlich.

Zugehörige Schnittstellen

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

Zugehörige Rollen

Verwendet in Rollen:

Geerbt in Rollen:

Spezifikationen

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

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden