Zum Inhalt springen
Pandus
de Sprache ändern
Menü

WCAG-A/AA-Anforderung Priorität: Mittel

Manche Formularfelder haben mehrere Beschriftungen

Ein Formularfeld, etwa für E-Mail, Menge oder Adresse, ist mit zwei oder mehr <label>-Elementen verknüpft.

Dieser Text wurde automatisch übersetzt und noch nicht von Muttersprachlern geprüft.

Warum das für Ihre Kunden wichtig ist

Screenreader gehen damit unterschiedlich um: Manche lesen nur die erste Beschriftung, manche alle, manche nur die letzte. Nutzer von Sprachsteuerung wissen womöglich nicht, welche Worte sie sagen sollen, um das Feld zu erreichen. Im Checkout oder bei der Registrierung macht das die Eingabe langsamer und fehleranfälliger.

Wen es betrifft

  • blinde Kundinnen und Kunden
  • Screenreader-Nutzer
  • Nutzer von Sprachsteuerung

So beheben Sie es

Geben Sie jedem Feld genau ein <label>. Brauchen Sie zusätzlichen Text, etwa einen Hinweis oder ein Formatbeispiel, verknüpfen Sie ihn per aria-describedby statt mit einer zweiten Beschriftung. Prüfen Sie, ob neben der sichtbaren Beschriftung eine versteckte Doppelung vom Theme oder einem Plugin existiert.

Bei Shopify

In Standard-Themes selten; meist durch Theme-Anpassungen oder Formular-Apps, die neben der Theme-Beschriftung eine eigene einfügen. Entfernen Sie die Doppelung im Liquid-Snippet oder in den App-Einstellungen.

Bei Shoptet (CZ)

Im Standard-Template selten; meist durch eigenen Code oder Formulare von Drittanbietern. Korrigieren Sie zuerst Ihren eigenen Code; für das Template wenden Sie sich an Shoptet oder einen Shoptet-Partner.

Bei PrestaShop

Meist in angepassten .tpl-Formular-Templates oder Modulen mit eigenen Beschriftungen (Newsletter, Checkout-Felder). Lassen Sie im Theme oder in überschriebenen Modul-Templates eine Beschriftung pro Feld.

Bei WooCommerce

Häufig durch Formular-Plugins, Checkout-Feld-Editoren oder Page-Builder, die neben der Theme-Beschriftung eine zweite einfügen. Prüfen Sie die Feldeinstellungen oder Plugin-Templates und lassen Sie eine Beschriftung pro Feld.

Standards

Standards
StandardAbschnitt
WCAG 2.2 3.3.2 (A) Labels or Instructions
WCAG 2.1 3.3.2 (A) Labels or Instructions
WCAG 2.0 3.3.2 (A) Labels or Instructions
EN 301 549 4.1.1 9.3.3.2
EN 301 549 3.2.1 9.3.3.2
Section 508 2017 E205.4
ДСТУ EN 301 549 2022 9.3.3.2

Automatische Prüfung: axe-core-Regel form-field-multiple-labels. dequeuniversity.com, github.com, www.w3.org

Ähnliche Prüfungen

Alle Regeln, die wir prüfen