Website Accessibility. Wie Du Deine Formulare inklusiv & zugänglich gestalten kannst und worauf Du dabei achten solltest, erkläre ich Dir in diesem Blogbeitrag.
Formulare sind ein zentrales Element Deiner Website – sie ermöglichen Dir die Interaktion & Kommunikation mit Deinen Besucher:innen und sind auch praktisch für die Datenerfassung. Doch zu oft werden sie so gestaltet, dass sie für Menschen mit Beeinträchtigungen schwer oder gar nicht nutzbar sind.
Warum Feldnamen (Labels) für barrierefreie Formulare so wichtig sind
Feldnamen oder Labels sind mehr als nur dekorative Elemente. Sie erfüllen mehrere entscheidende Funktionen:
- Orientierung für Screenreader-Nutzer:innen: Blinde und sehbeeinträchtigte Menschen navigieren Websites mit Screenreadern. Korrekte Labels helfen ihnen, die Formularfelder zu verstehen und auszufüllen.
- Unterstützung bei kognitiven Einschränkungen*: Menschen mit kognitiven Herausforderungen profitieren von klaren, dauerhaft sichtbaren Beschriftungen, die Kontext und Erwartungen vermitteln.
- Verbesserung der Benutzerfreundlichkeit: Auch für Nutzer:innen ohne Behinderungen sind eindeutige Labels hilfreicher als unklare oder fehlende Beschriftungen.
*Kognitive Einschränkungen beziehen sich auf Beeinträchtigungen in der Wahrnehmung, Aufmerksamkeit, Erinnerung, Problemlösung oder Verarbeitung von Informationen. Das kann viele Ursachen haben, wie z. B.:
- Lernschwierigkeiten (z. B. Dyslexie)
- Aufmerksamkeitsstörungen (z. B. ADHS)
- Gedächtnisprobleme (z. B. Demenz)
- Beeinträchtigungen durch Stress oder Erschöpfung
Menschen mit kognitiven Einschränkungen profitieren von klar strukturierten und gut lesbaren Formularen, die einfache Sprache und dauerhaft sichtbare Labels verwenden 😊
Auch wenn es aus Designaspekten hipp aussehen mag, auf Labels zu verzichten und stattdessen nur auf Platzhalter zu setzen, tu‘ es bitte nicht.
Platzhalter: Ergänzung, nicht Ersatz
Platzhaltertexte können zusätzliche Informationen bieten, ersetzen aber niemals vollständige Labels:
- Nutze Platzhalter für kurze, ergänzende Hinweise
- Wähle einen Kontrast, der gut lesbar ist
- Wichtige Infos gehören nie nur in den Platzhalter!
Die Angabe von Feldnamen (Labels) und Platzhaltern (Placeholders) in Website-Formularen ist aus Barrierefreiheitsgründen wichtig, weil sie die Zugänglichkeit für alle Websitebesucher:innen verbessert. Hier sind die Hauptgründe:
Bessere Unterstützung für Screenreader
- Screenreader lesen den Feldnamen (Label) vor, sodass blinde oder sehbehinderte Nutzer:innen genau wissen, welches Feld sie gerade ausfüllen.
- Platzhalter allein reichen nicht, da sie oft nicht von Screenreadern vorgelesen werden oder nach der Eingabe verschwinden.
Klarheit für Menschen mit kognitiven Einschränkungen
- Ein dauerhaft sichtbarer Label-Text hilft User:innen, sich zu orientieren, insbesondere bei komplexeren Formularen.
- Ein Platzhalter kann als zusätzliche Hilfe dienen, indem er ein Beispiel für die erwartete Eingabe zeigt.
Fehlerminimierung und Benutzerfreundlichkeit
- Wenn ein Platzhalter nach der Eingabe verschwindet, kann es für den Nutzer schwer sein, sich an das ursprüngliche Eingabeformat zu erinnern.
- Ein Label bleibt bestehen und sorgt für mehr Kontext während des gesamten Ausfüllprozesses.
Best Practice für barrierefreie Formulare
- Immer ein
<label>für jedes Eingabefeld verwenden (entweder sichtbar oder mitaria-labelfür Screenreader). - Platzhalter als ergänzende Hilfe nutzen, aber sich nicht ausschließlich darauf verlassen.
- Gute Kontraste und ausreichende Schriftgröße für Labels und Platzhalter sicherstellen.
Meine Top-Tipps für noch mehr Zugänglichkeit
- Achte darauf, Schriftfarben mit gutem Kontrast zum Hintergrund einzusetzen
- Die Schriftgröße sollte mindestens 16px betragen
- Formularfehler: Gib hilfsbereite statt kryptische Hinweise
- Tastaturnavigation muss sein
Pro-Tipp: Teste Deine Formulare regelmäßig mit Screenreadern und Menschen mit unterschiedlichen Fähigkeiten.
Lass uns gemeinsam das Internet ein Stückchen zugänglicher machen – eine Formularzeile nach der anderen! 😊
Weitere Beiträge rund um Accessibility & Barrierefreiheit auf Deiner Website
