Verbesserung der Erkennbarkeit und Kontraste von Eingabefeldern

KERN Komponenten Design-Prozess

Mit diesem Ticket kannst du den Bedarf für eine Komponente (oder ein Pattern) melden und auch etwas dazu beitragen. Alle Informationen zum Bedarf anmelden und beitragen findest du unter Mitwirken bei KERN.

User Story

Als visuell eingeschränkte nutzende Person benötige ich klar erkennbar abgegrenzte Eingabefelder — auch auf kontrastarmen oder älteren Displays –, damit ich sicher identifizieren kann, wo ich Text eingeben kann und welches Label zu welchem Feld gehört.

Begründung

Die aktuellen KERN-Textfelder nutzen eine Kombination aus Hintergrundhelligkeit, Unterstreichung und Border. Auf modernen Displays ist das in der Regel ausreichend, aber:

• Auf älteren oder kontrastarmen LCD-Panels ist der Unterschied zwischen Feldhintergrund und Seitenhintergrund kaum wahrnehmbar.
• Die reine Border steht zwar im Kontrastminimum der WCAG, wird aber visuell weniger schnell erkannt.
• Bei Textareas ist durch den größeren Abstand die Unterstreichung nicht mehr eindeutig dem Label zuzuordnen.
• Redaktionen können dies nicht selbst konfigurieren, ohne von KERN abzuweichen.

Es gibt deshalb keine glaubhafte Alternative, um das Problem innerhalb des bestehenden Systems zu lösen.

Alternativen

Skalierbarkeit

Das Problem betrifft:

• alle Projekte, die KERN-Fomulare nutzen (sehr hohe Verbreitung)
• alle Eingabetypen, die Hintergrundflächen nutzen (Input, Textarea, Combobox, Autocomplete)
• alle Hardwareklassen, insbesondere ältere ThinkPads, Bürobildschirme, energiesparende Panels
• alle WCAG-relevanten Zielgruppen, die Schwierigkeiten mit Kontrast und räumlicher Trennung haben

Die Komponente ist daher in praktisch allen Verwaltungsportalen, Formularen und Self-Service-Anwendungen relevant.

Der Bedarf ist skaliert, systemisch, dauerhaft – kein Einzelfall.

Usability

Es liegen mehrere klare Hinweise aus Nutzungs- und Accessibility-Perspektive vor:

• Visuell eingeschränkte Nutzende berichten zu Recht, dass Felder teils nicht klar visuell abgegrenzt sind.
• Menschen mit kognitiven Einschränkungen erkennen Eingabebereiche weniger zuverlässig, wenn die visuelle Trennung minimal ist.
• Das Label-Feld-Mapping wird bei Textareas nicht intuitiv erkannt, was zu Eingabefehlern führt.
• Eine deutlichere Hintergrund- oder Border-Lösung würde die Entdeckbarkeit („discoverability“) und Erfassbarkeit erhöhen.
• In der Barrierefreiheitsprüfung (insbesondere BITV/WCAG 1.4.11 Non-text Contrast) ist das Risiko einer Fehlinterpretation gegeben.

Die Anpassung entspricht somit dem nachgewiesenen Bedarf der Nutzenden, nicht einer rein ästhetischen Optimierung.

Kontext (Optional)

Ein Vorschlag wurde innerhalb des UX-Gewerks bereits erarbeitet.

Akzeptanzkriterien

• ReadOnly State für Checkbox und Radio ergänzt.
• Änderung für Light-/Dark-Mode in Figma umgesetzt.
• Figma-Veröffentlichung -> Extra Ticket
• CSS/HTML updaten -> Extra Ticket in CSS/HTML
• Gesamtdoku erstellen und Q.S.
• Veröffentlichung auf Dokusaurus kern-ux.de -> Extra Ticket