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

Manche Beschriftungen verweisen auf das falsche Element

Mehrere Elemente haben dieselbe id, und diese id wird genutzt, um eine Beschriftung, Beschreibung oder Fehlermeldung mit einem Feld oder Bedienelement zu verknüpfen.

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

Warum das für Ihre Kunden wichtig ist

Hilfstechnologien finden den passenden Text über die id. Ist sie doppelt vergeben, liest ein Screenreader womöglich die Beschriftung oder den Fehler eines anderen Feldes vor, etwa die Rechnungs- statt der Lieferadresse oder den Namen eines anderen Filters.

Wen es betrifft

blinde Kundinnen und Kunden
Screenreader-Nutzer
Nutzer von Sprachsteuerung

So beheben Sie es

Vergeben Sie jede id auf der Seite nur einmal, besonders solche, auf die aria-labelledby, aria-describedby, aria-controls oder <label for> verweisen. Wiederholte Bausteine (Produktkacheln, Schnellansicht-Pop-ups, Mobil- und Desktop-Menü) sollten ids mit einem Zusatz erzeugen, etwa der Produkt- oder Section-ID. Prüfen Sie jeden gemeldeten Fall: axe markiert ihn zur manuellen Prüfung.

Bei Shopify

Häufig wird eine Section oder ein Snippet doppelt ausgegeben (Header für Mobil und Desktop, Produktkacheln, Schnellansicht) – mit fester id. Ergänzen Sie im Liquid-Code einen eindeutigen Zusatz, zum Beispiel section.id oder product.id; Widgets aus Apps muss der App-Entwickler korrigieren.

Bei Shoptet (CZ)

Stammt meist aus dem Template oder aus eigenem Code, der mehrfach eingefügt wurde. Korrigieren Sie zuerst Ihren eigenen Code; für das Template wenden Sie sich an Shoptet oder einen Shoptet-Partner.

Bei PrestaShop

Meist in .tpl-Templates des Themes oder in Modulen, die denselben Block mehrfach ausgeben, etwa Produkt-Miniaturen oder ein Menü für Mobil und Desktop. Machen Sie die ids im Theme oder in überschriebenen Modul-Templates eindeutig.

Bei WooCommerce

Häufig bei Page-Buildern und Widgets, die doppelt eingebunden sind (Mobil- und Desktop-Menü, wiederholte Formulare), sowie bei Plugins mit fest codierten ids. Korrigieren Sie die ids im Child-Theme oder in den Widget-Einstellungen; Plugin-Ausgaben melden Sie dem Plugin-Entwickler.

Standards

Standards
Standard	Abschnitt
WCAG 2.2	4.1.2 (A) Name, Role, Value
WCAG 2.1	4.1.2 (A) Name, Role, Value
WCAG 2.0	4.1.2 (A) Name, Role, Value
EN 301 549 4.1.1	9.4.1.2
EN 301 549 3.2.1	9.4.1.2
Section 508 2017	E205.4
ДСТУ EN 301 549 2022	9.4.1.2

Automatische Prüfung: axe-core-Regel duplicate-id-aria. dequeuniversity.com, github.com, www.w3.org

Tabellenüberschriften beschreiben keine Daten
WCAG 1.3.1 A
Klickbare Elemente sind ineinander verschachtelt
WCAG 4.1.2 A
Der Titel einer Tabelle steht in einer Tabellenzelle
WCAG 1.3.1 A
Videos oder Töne starten von selbst mit Ton
WCAG 1.4.2 A

Alle Regeln, die wir prüfen