Empfohlene Praxis Priorität: Schwerwiegend
Formularfelder haben keine sichtbare Beschriftung
Einige Formularfelder werden nur über einen Tooltip (title-Attribut), eine versteckte Beschreibung oder ein verstecktes Label benannt, sodass auf dem Bildschirm keine Beschriftung erscheint. Dies ist eine empfohlene Praxis, die über das Niveau WCAG 2.2 AA hinausgeht, auf das sich die Barrierefreiheitsgesetze stützen.
Dieser Text wurde automatisch übersetzt und noch nicht von Muttersprachlern geprüft.
Warum das für Ihre Kunden wichtig ist
Kunden sehen ein leeres Feld und müssen raten, ob Telefonnummer, Postleitzahl oder Gutscheincode gemeint ist. Ein Tooltip erscheint nur beim Überfahren mit der Maus, nie auf dem Smartphone, und ein Platzhalter verschwindet, sobald man zu tippen beginnt. Wer per Sprachsteuerung bedient, kann ein Feld nicht beim Namen nennen, den er nicht sieht.
Wen es betrifft
- Menschen mit kognitiven Einschränkungen oder Gedächtnisproblemen
- ältere Kundinnen und Kunden
- Nutzer von Sprachsteuerung
- Smartphone-Nutzer
So beheben Sie es
Geben Sie jedem input, select und textarea ein sichtbares <label>, verknüpft über for und id, oder umschließen Sie das Feld mit dem Label. Verwenden Sie weder das title-Attribut noch aria-describedby oder ein visuell verstecktes Label als einzigen Namen, und behandeln Sie einen Platzhalter nicht als Label. Bei kompakten Feldern wie Suche oder Newsletter genügt eine kurze sichtbare Beschriftung neben dem Feld.
Bei Shopify
Meist in Newsletter-, Such- oder eigenen Kontaktformularen in den Sections oder Snippets des Themes, wo das Label versteckt ist und nur ein Platzhalter erscheint. Machen Sie das Label im Liquid und CSS dieser Section sichtbar; bei Formularen aus Apps wenden Sie sich an den App-Entwickler.
Bei Shoptet (CZ)
Hängt vom Template ab. Prüfen Sie die Template-Einstellungen oder eine neuere Template-Version; ist ein Label vorhanden, aber versteckt, kann eigenes CSS über die Optionen für eigenen Code von Shoptet es sichtbar machen. Andernfalls wenden Sie sich an Shoptet oder einen Partner.
Bei PrestaShop
Meist in den Templates der Newsletter-, Such- oder Kontaktmodule. Überschreiben Sie die .tpl-Datei des Moduls in Ihrem Theme und zeigen Sie ein echtes Label statt Platzhalter oder title.
Bei WooCommerce
Meist durch das Theme, ein Formular-Plugin oder einen Page-Builder, der Labels für einen minimalistischen Look ausblendet. Aktivieren Sie die Labels in den Einstellungen des Formular-Plugins oder zeigen Sie sie über Templates oder CSS eines Child-Themes an.
Standards
Kein WCAG-Erfolgskriterium, sondern eine empfohlene Praxis, die die Website leichter nutzbar macht.
Automatische Prüfung: axe-core-Regel label-title-only.
dequeuniversity.com, github.com, www.w3.org