From 7d45453518e013716df9882d236ac705699af5e1 Mon Sep 17 00:00:00 2001 From: Nickzlos Date: Tue, 10 Dec 2024 15:13:23 +0100 Subject: [PATCH] docs: Remove necessity to use a label --- .../form-controls/text-field/guidelines.mdx | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/docs/src/content/03-components/form-controls/text-field/guidelines.mdx b/packages/docs/src/content/03-components/form-controls/text-field/guidelines.mdx index be9d8aed5..56c520d8c 100644 --- a/packages/docs/src/content/03-components/form-controls/text-field/guidelines.mdx +++ b/packages/docs/src/content/03-components/form-controls/text-field/guidelines.mdx @@ -49,11 +49,10 @@ gekennzeichnet. ## Label -Jedes TextField muss ein zugehöriges [Label](/03-components/content/label) -besitzen. Das Label ist entscheidend, um die Eingabeanforderungen zu verstehen -und sollte daher so gewählt werden, dass es alle Informationen liefert, um das -TextField korrekt ausfüllen zu können. Außerdem sollte das Label knapp (max. 2 -Wörter), präzise und weder versteckt noch auspunktiert sein. +Jedes TextField sollte ein passendes [Label](/03-components/content/label) +besitzen. Ein gutes Label vermittelt alle notwendigen Informationen, um das TextField +korrekt auszufüllen. Außerdem sollte es knapp (max. 2 Wörter), präzise und weder +versteckt noch auspunktiert sein. @@ -81,8 +80,8 @@ Formatierungsbeispiele liefern. Placeholder sind nicht accessible und dürfen daher keine Informationen enthalten, die für das korrekte Ausfüllen des TextFields erforderlich sind. Das größte Problem ist, dass Placeholder verschwinden, sobald Text eingegeben wird. -Darüber hinaus werden sie von manchen Assistenztechnologien nicht korrekt erkann -und sind kognitiv schwieriger zu verarbeiten als die FieldDescritption. Statt +Darüber hinaus werden sie von manchen Assistenztechnologien nicht korrekt erkannt +und sind kognitiv schwieriger zu verarbeiten als die FieldDescription. Statt einen Placeholder zu verwenden, ergänze das TextField mit ... - einem [Label](/03-components/content/label) für Informationen, die essenziell @@ -108,8 +107,11 @@ Das TextField kann sowohl über die Tastatur erreicht und aktiviert werden als auch mit Assistenztechnologien angesteuert werden. Damit auch der Inhalt barrierefrei ist, solltest du: -- immer ein [Label](/03-components/content/label) verwenden, welches essenzielle - Eingabeanforderungen über das Label kommuniziert. +- wenn möglich ein [Label](/03-components/content/label) verwenden, welches essenzielle + Eingabeanforderungen über das Label kommuniziert. Können die Eingabeanforderungen an + das TextField durch den Kontext erschlossen werden, kann auf den Einsatz eines Labels + verzichtet werden. In diesem Fall muss das TextField über *aria-labelledby* verknüpft + oder über ein *aria-label* beschrieben werden. - die FieldDescription nutzen, um Unterstützung, Beispiele oder Formatierungshilfen zu geben. - Placeholder nicht für Inhalte verwenden, die zum Ausfüllen des TextFields