Über die Pflichtfeld-Markierung in Eingabeformularen

Mon, 14 Jul 2025 13:47:51 +0900

Wir haben Informationen über die “Pflicht”-Markierung in Benutzeroberflächen (Formularen) im Ausland zusammen mit UI-Richtlinienmaterialien zusammengefasst.

📌 Wichtige Pflichtmarkierungen und Best Practices

Verwendung des Sternchens (*)
- Es ist am weitesten verbreitet; Pflichtfelder werden mit einem “*” versehen.
- Jedoch ist eine Erklärung wie " * ist ein Pflichtfeld" am Anfang des Formulars erforderlich (Nielsen Norman Group, California State University, Northridge).
- Es gibt auch Beispiele, die Farbe zur Hervorhebung verwenden (wie roten Text).
“Required” oder “(required)” im Label angeben
- Durch das Hinzufügen des Wortes “Required” in das Label kann es Screenreadern klar angezeigt werden, was die Barrierefreiheit verbessert (Deque).
Kombinierte Verwendung von ARIA-Attributen und dem HTML5-Attribut required
- Neben der visuellen Anzeige wird durch die Verwendung von aria-required="true" und <input required> auch programmatisch mitgeteilt, dass das Feld erforderlich ist (Deque).
Verwendung von “(optional)” zur Kennzeichnung optionaler Felder
- Es gibt auch den Ansatz, optionale Felder explizit mit “(optional)” zu kennzeichnen, anstatt Pflichtfelder zu markieren, was effektiv ist, wenn beide gemischt auftreten.
- Nielsen-Norman weist jedoch darauf hin, dass es “leichter zu beurteilen ist, wenn auch Pflichtfelder klar ausgewiesen werden” (TPGi).

✅ Zusammenfassung der UI-Richtlinienmaterialien

Quelle	Inhalt
NN/g: Marking Required Fields in Forms	Die Kombination von Sternchen und Erklärungstext wird empfohlen; nur optionale Felder anzuzeigen gilt als unfreundlich (Nielsen Norman Group).
Deque (Anatomy of Accessible Forms)	・Die Zeichenfolge “Required” oder ein Bild wird im Label verwendet. ・Es wird deutlich gemacht, dass Hinweise allein durch Farben unzureichend sind.
W3C Techniques (H90)	Es gibt Beispiele für die Einbindung eines Sternchens oder “(required)” im Label und die Definition der Bedeutung am Anfang des Formulars.
TPGi (Doing what’s required)	Unter Berücksichtigung der Barrierefreiheit wird die Kombination aus Sternchen + ARIA-Attributen + Labeltext als am besten bewertet.
Contensis Formular-UX-Leitfaden	Prägnant zusammengefasst: Eine konsistente Markierung (* oder (optional)) ist wichtig.

✅ Empfohlene Ansätze für die Implementierung

Fügen Sie einen Erklärungstext am Anfang des Formulars hinzu:

Fields marked with * are required. (Oder “All fields are required” für alle, oder “unless marked optional”, wenn es optionale gibt)
Labelzuweisung :
- Geschrieben als First Name * oder Email (required).

ARIA-Attribute und HTML5-Attribute :

1
2


<label for="email">Email <abbr title="required">*</abbr></label>
<input id="email" required aria-required="true">

Verlassen Sie sich nicht nur auf Farben : Bieten Sie sowohl visuelle als auch programmatische Unterstützung.

🔗 Referenzlinks (UI-Richtlinienmaterialien)

NN/g: Marking Required Fields in Forms (California State University, Northridge, Nielsen Norman Group, Deque)
Deque: Anatomy of Accessible Forms (Deque)
W3C Techniques: H90 Indicating required form controls (W3C)
TPGi: Indicating mandatory fields accessibly (TPGi)
Contensis: UX Forms Guidelines (Contensis)

Bei Bedarf kann ich auch spezifische HTML/CSS-Codebeispiele oder UI-Komponenten-Designvorlagen für Sketch und Figma bereitstellen. Zögern Sie nicht zu fragen!

Webentwicklung on kenji.blog

Über die Pflichtfeld-Markierung in Eingabeformularen

📌 Wichtige Pflichtmarkierungen und Best Practices

✅ Zusammenfassung der UI-Richtlinienmaterialien

✅ Empfohlene Ansätze für die Implementierung

🔗 Referenzlinks (UI-Richtlinienmaterialien)