aria-required im Formular
Pflichtfelder vor dem Absenden erkennen
Feld, Sternchen, Beschriftung: drei Stellen an einem Pflichtfeld.
Pflichtfeld-Anatomie
Ein Pflichtfeld sendet drei Signale
Sichtbarer Hinweis, programmatischer Zustand und Prüfung arbeiten zusammen.
Vom Wort „Pflichtfeld“ bis zur Fehlermeldung
Die Abbildung verbindet die sichtbare Feldansicht mit den drei Informationen, die ein vollständiges natives Pflichtfeld liefert.
- Sichtbar
„Pflichtfeld“ steht vor der Eingabe, nicht erst nach dem Absenden.
- Programmatisch
Der Accessibility Tree führt das Feld als erforderlich.
- Beim Absenden
Ein leeres natives Feld erhält
valueMissing.
Die Pflicht ist sichtbar und ansagbar.
Der Browser stoppt und nennt den Fehler.
Der Browser gibt das Absenden frei.
Attribut wählen
Erst das Element, dann die Pflicht
<input>, <select>, <textarea>required- Pflichtzustand im Accessibility Tree
- Native Prüfung beim Absenden
- CSS-Auswahl mit
:required
Hier ist required die vollständige Lösung. HTML ARIA empfiehlt, aria-required="true" nicht zusätzlich zu setzen.
aria-required="true"- Pflichtzustand im Accessibility Tree
- Keine native Prüfung
- Kein sichtbarer Hinweis von selbst
Das ARIA-Attribut beschreibt den Zustand. Sichtbarer Text, Prüfung, Fehlermeldung und Fokusführung bleiben Teil Ihrer Implementierung.
Die native Lösung zum Kopieren
Der Hinweis steht vor dem Feld. Das Label benennt es, und required aktiviert die Browserprüfung.
<p id="pflicht-hinweis">
Pflichtfelder tragen das Wort „Pflichtfeld“.
</p>
<form action="/kontakt" method="post">
<label for="email">
E-Mail-Adresse <span>Pflichtfeld</span>
</label>
<input id="email" name="email" type="email"
autocomplete="email" required
aria-describedby="pflicht-hinweis">
<button type="submit">Anfrage senden</button>
</form>Der seltenere Fall
ARIA am eigenen Textfeld
Dieses Beispiel zeigt bewusst ein selbst gebautes Textfeld. Die Rolle textbox unterstützt aria-required. Das Skript prüft den leeren Wert, setzt den Fehlerzustand und synchronisiert den Formularwert.
<form id="projekt-form" action="/projekt" method="post" novalidate>
<span id="projekt-label">Projektname</span>
<span id="projekt-pflicht">Pflichtfeld</span>
<div id="projekt" role="textbox" contenteditable="true"
aria-labelledby="projekt-label projekt-pflicht"
aria-describedby="projekt-fehler"
aria-required="true"></div>
<p id="projekt-fehler"></p>
<input id="projekt-wert" name="projekt" type="hidden">
<button type="submit">Projekt speichern</button>
</form>const formular = document.querySelector('#projekt-form');
const feld = document.querySelector('#projekt');
const wert = document.querySelector('#projekt-wert');
const fehler = document.querySelector('#projekt-fehler');
feld.addEventListener('input', () => {
wert.value = feld.textContent.trim();
feld.setAttribute('aria-invalid', 'false');
fehler.textContent = '';
});
formular.addEventListener('submit', (ereignis) => {
if (wert.value) return;
ereignis.preventDefault();
feld.setAttribute('aria-invalid', 'true');
fehler.textContent = 'Geben Sie einen Projektnamen ein.';
feld.focus();
});So prüfen Sie es
Beobachten Sie denselben Feldzustand an drei Stellen.
- Vor dem Fokus
Das Wort „Pflichtfeld“ ist sichtbar und steht beim zugehörigen Label.
- Im Accessibility Tree
Das Feld hat einen Namen und den Zustand
required: true. - Leer abgesendet
Der Browser verhindert das Absenden. Beim eigenen Widget erscheinen Fehlertext und
aria-invalid="true", und der Fokus kehrt zurück.
Aus dem Prüfbericht
Drei Stellen, drei Befunde
Kritisch Das Pflichtfeld meldet einen erfundenen Wert Regel aria-valid-attr-value
Nur true und false sind gültig. Andere Werte lassen die Pflicht unangesagt, obwohl das Sternchen sichtbar ist.
Kritisch Der Zustand sitzt am Rahmen statt am Feld Regel aria-allowed-attr
An einem div ohne Rolle ist aria-required unzulässig. Es gehört an das input selbst.
Kritisch Der Feldname ist nicht verbunden Regel label
Ein span über dem Feld sieht aus wie eine Beschriftung. Erst label mit for macht ihn zum Namen des Pflichtfeldes.
Zum Mitnehmen
Das Pflichtfeld, korrigiert
Native Pflicht, am richtigen Element, mit verbundenem Namen.
Korrektur in 3 Schritten ansehen
required statt eines erfundenen Wertes
Das native required macht die Pflicht ansagbar und lässt den Browser prüfen. aria-required="true" ist die Ersatzlösung ohne Prüfung.
KorrekturvergleichSchritt 1 · HTML Vorher
<input id="name" name="name" type="text" aria-required="pflicht">Nachher
<input id="name" name="name" type="text" required>Markierte Zeilen wurden geändert
So prüfen Sie es Senden Sie das Formular leer ab. Der Browser meldet das Feld und setzt den Fokus dorthin.
Das Attribut ans Eingabefeld hängen
An einem div ohne Rolle wird aria-required verworfen. Erst am input beschreibt die Pflicht das richtige Element.
KorrekturvergleichSchritt 2 · HTML Vorher
<div class="feld" aria-required="true"> <input id="mail" name="mail" type="email"> </div>Nachher
<div class="feld"> <input id="mail" name="mail" type="email" required> </div>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm nennt beim Feld „erforderlich“. Am Rahmen darum sagt es nichts.
Die Beschriftung verbinden
label mit for gibt dem Pflichtfeld seinen Namen. Das Sternchen bekommt zusätzlich einen erklärenden Hinweis über dem Formular.
KorrekturvergleichSchritt 3 · HTML Vorher
<span>Name *</span> <input id="name" name="name" type="text" required>Nachher
<label for="name">Name *</label> <input id="name" name="name" type="text" required>Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf „Name“. Springt der Cursor ins Feld, ist der Name verbunden.