Eingabefelder: Accessibility
Zurück: Demo-Übersicht
1. Übersicht und Zweck
Status: [Live] — konsolidiert die ARIA-/Label-Vorgaben aller acht Kategorien; wiederholt sie nicht einzeln je Kategorie-Seite (Single-Source-Prinzip, wie bei DataGrid → Accessibility).
2. Voraussetzungen
Gemeinsamer Feld-Kontrakt bereits verstanden.
3. Konzepte
Label-Kopplung: jedes Feld verbindet <label for="…"> mit der
Control-id — nativ, kein aria-labelledby nötig, solange ein
sichtbares Label existiert. Fehlt label (Icon-only-Varianten, z. B. ein
reiner Lösch-Button), muss ariaLabel gesetzt sein — ein Feld ohne
beides ist ein Spezifikationsverstoß, kein zulässiger Grenzfall.
4. Erste Schritte
Entfällt — reine Konsolidierungsseite.
5. Verwendung
Für eine Barrierefreiheits-Abnahme eines konkreten Feldes: Tabelle in Abschnitt 6 gegen den aktiven Zustand (required/disabled/state) abgleichen.
6. API-Referenz: Zustands-Kommunikation
| Zustand | ARIA | Gilt für |
|---|---|---|
required | aria-required=„true“ zusätzlich zum nativen required-Attribut | alle Kategorien |
disabled | natives disabled impliziert korrekt (kein zusätzliches ARIA nötig) | alle Kategorien |
state ⇒ 'error'/warning' | aria-invalid=„true“ bei error; stateText via aria-describedby auf das Control verknüpft | alle Kategorien |
| Dreizustands-Checkbox | aria-checked=„mixed“ zusätzlich zur DOM-indeterminate-Property (die allein nicht von Screenreadern erkannt wird) | Check box |
| Dropdown-Popup offen/zu | aria-expanded am <summary> | Dropdown Editor |
| Progress Bar | aria-valuenow/aria-valuemin/aria-valuemax; bei indeterminate entfällt aria-valuenow komplett (nicht auf 0 setzen — das würde „0 % fertig„ statt „Dauer unbekannt“ kommunizieren) | Progress Bar |
disabled und readonly tragen deshalb je ein Merkmal, das ohne Zeiger
sichtbar ist — Deckkraft bzw. gestrichelter Rahmen —, und sie unterscheiden sich zusätzlich
voneinander, weil sie sich verschieden verhalten (siehe
Grundlagen).
Gemessen am 4. August 2026 auf der Anmeldeseite, in hellem und dunklem Schema, je Zustand über Grund, Schrift, Kantenfarbe, Kantenart und Deckkraft: alle drei Zustände paarweise unterscheidbar. Kontrast der Schrift dabei 14,07:1 in Ruhe, 11,45:1 nur lesbar und 5,17:1 gesperrt — letzteres, obwohl WCAG inaktive Bedienelemente von der Kontrastanforderung ausnimmt.
7. Parameter, Optionen und Zustände: Tastatur
Jedes Control ist ein natives HTML-Formularelement — Tab-Reihenfolge,
Leertaste/Pfeiltasten-Verhalten bei Checkbox/Radio/Select kommen
kostenlos vom Browser (Grundsatz: kein Feld baut eine eigene
Tastatur-Engine nach). Progressive-Enhancement-Skripte (Dropdown-Popup,
filterbare Combo Box) müssen diese native Tastaturbedienung erhalten,
nicht ersetzen — Escape schließt ein offenes Popup, ohne den Fokus zu
verlieren; Pfeiltasten navigieren nur innerhalb eines geöffneten Popups
zusätzlich zur nativen Tab-Reihenfolge.
8. Vollständige Beispiele
Entfällt — reine Referenztabelle, kein ausführbares Beispiel.
9. Einschränkungen und Randfälle
Die aria-describedby-Verknüpfung zwischen stateText/hint und
Control (Abschnitt 6) ist [Live] und gilt hier unbedingt — anders
als bei
propertyGrid(),
wo dieselbe Verknüpfung (controlId) nur bei genau einem HTML-Treffer
im aufrufer-gebauten controlHtml greift. Der Unterschied liegt darin,
dass ein Eingabefeld sein Control selbst rendert (kein Aufrufer-HTML zu
scannen) — die Verknüpfung ist deshalb ohne die dortige
Vorsichtsbedingung möglich.
10. Accessibility und Kompatibilität
Diese Seite ist der Accessibility-Überblick — Details in Abschnitt 6/7.
11. Troubleshooting
Entfällt.
12. Verwandte Themen
- Demo-Übersicht — alle Kategorien
- DataGrid: Accessibility — identisches Konsolidierungsmuster beim DataGrid
- Vertical Grid: Grundlagen — bereits umgesetztes
controlId-Muster als Vorbild