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).
- Neben der visuellen Anzeige wird durch die Verwendung von
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 *oderEmail (required).
- Geschrieben als
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!