Verwendung
Alle Arten von Eingabe- oder Auswahlelementen in Formularen benötigen zwingend eine dedizierte Beschriftung, idealerweise in Form eines label-Elements. Dies dient der eindeutigen Beschriftung der Elemente und der Kommunikation des Typs der benötigten Eingaben oder Auswahlen.
Sichtbare und programmatisch zugeordnete <label> vergrößern die klickbare Fläche der Formularelemente und unterstützen somit Bedienbarkeit, insbesondere bei Touch-UIs.
Hilfsmittel wie Screenreader bilden aus dem Text des Labels den sogenannten „Accessible Name“ – dieser wird zusammen mit der Rolle des jeweiligen Formularelements zur eindeutigen Identifikation gemeinsam vorgelesen.
In den überwiegenden Fällen muss hierzu das <label>-Element verwendet und mit dem Formularelement verknüpft werden. Der Einsatz eines äquivalenten aria-label-Attributs ist dann zulässig, wenn sich z. B. in Tabellen kein Raum für das Setzen eines sichtbaren Labels ergibt. Bitte beachten Sie hierzu den Abschnitt „Formularelemente in Tabellen“. <label> und aria-label in Kombination dürfen nicht verwendet werden, da hier die Gefahr besteht, dass unterschiedliche Informationen hinterlegt werden.
Platzierung
Als Textelement erben <label> ihre Formatierung aus den allgemeinen Regeln zur Typografie der jeweiligen Seite. Alle im Design System angelegten Eingabe- oder Auswahl-Elemente besitzen bereits dedizierte Labels. Bei der Platzierung ist lediglich darauf zu achten, dass Labels für die Input-Typen, in denen Texteingaben möglich sind (text, password, email, search, textarea) sowie select, grundsätzlich linksbündig oberhalb des Formularelement stehen. Die Labels von Checkboxen und Radiobuttons sind hingegen ohne Ausnahme rechts neben zugehörigen Eingabefeld angeordnet.
Unter Umständen steht in Formularen kein ausreichender Platz zur Verfügung, um ein sichtbares Label anzeigen zu können. In diesem Fall muss trotzdem ein <label>-Element im Markup hinterlegt werden, das aber durch Zuweisung der Klasse .visually-hidden in der Bildschirmdarstellung nicht angezeigt wird, für Screenreader-Nutzende aber weiterhin die für sie wichtigen Informationen bereitstellt.
<label for="#IDREF" class="visually-hidden">Labeltext</label> <input id="IDREF" … >Placeholder- und title-Attribute oder Tooltips sind ausdrücklich kein Ersatz für ein <label> oder aria-label, sondern dienen lediglich der optionalen Unterstützung der Nutzenden.
Beschriftung
Obwohl es keine definierte Maximallänge für Label-Texte gibt, so sollten diese doch möglichst knapp und prägnant formuliert sein. In den überwiegenden Fällen sollten hier 1–3 Worte ausreichend sein. Allerdings kann es fachlich notwendig sein, zum Beispiel längere Texte als Auswahloptionen bei Radiobuttons oder Checkboxen anzuzeigen, um bei Sachverhalten mit rechtlichen oder finanziellen Auswirkungen die nötige Präzision zu bieten.
Hierbei sollte allerdings beachtet werden, dass eine große Menge an überlangen Formular-Labels sehr ermüdend für Screenreader-Nutzende sein können („Cognitive Overload“). Bitte beachten Sie daher beim Texten von Formular-Labels auch die Hilfestellungen und Regeln im Kapitel Sprache.
Icons
Icons anstelle von Label-Texten sollen möglichst nicht verwendet werden. Ausnahmen sind nur bei sehr eingeschränkten und offensichtlichen Fällen wie z. B. einer Suche erlaubt, oder wenn es der zur Verfügung stehende Platz nicht anders zulässt, z. B. bei Formularelementen in einer Datentabelle.
Zustände
Label beziehen ihre Zustände aus dem zugeordneten Formularelement.
- default, hover & focus
- Bei Interaktion per Tastatur oder Maus erhalten Label keine gesonderten Zustände und behalten auch ihre Textfarbe, hervorgehoben werden lediglich die zugeordneten Formularelemente
disabled- Labels von inaktiven Formularelementen erhalten neben der optisch zurückgenommenen grauen Gestaltung auch einen Maus-Cursor vom Typ not-allowed. Die zugeordneten Formularelemente sind zwar fokussierbar, aber nicht editierbar.
readonly- Labels von nur-darstellenden Formularelementen sind in ihrer Gestaltung deutlich zurückgenommenen, reagieren auf keine Interaktionen und sind auch nicht fokussierbar, verhalten sich also wie statische Textelemente. Bitte beachten Sie, dass nicht alle Arten von Formularelementen über einen readonly-Zustand verfügen.
- error
- Im Fehlerfall wird das Formularelement hervorgehoben, an dem ein Eingabefehler identifiziert wurde, das Label verbleibt in seinem ursprünglichen Zustand
Do’s and Dont’s
So:
- Knappe, prägnante Beschreibung, idealerweise 1–2 Worte
- Unmittelbare optische Nähe zum Formularelement
So nicht:
- Vollständige Sätze und Fließtexte (Ausnahmen sind bei bestimmten Checkboxen zulässig)
- Aus Sicht der Nutzenden unverständliche Formulierungen aus der Innensicht einer Behörde