Zum Inhalt springen
Pandus

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

Eine Liste aus Bezeichnungen und Werten ist falsch aufgebaut

Eine Beschreibungsliste (<dl>), oft für Produktdaten oder gewählte Optionen genutzt, enthält Elemente an der falschen Stelle oder in falscher Reihenfolge.

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

Warum das für Ihre Kunden wichtig ist

Screenreader-Nutzer erfahren womöglich nicht, welcher Wert zu welcher Bezeichnung gehört, etwa welche Zahl das Gewicht und welche die Größe ist. Produktdetails sind so schwerer zu verstehen.

Wen es betrifft

  • Screenreader-Nutzer

So beheben Sie es

Setzen Sie in eine <dl> nur Gruppen aus <dt> (Bezeichnung) und <dd> (Wert) in genau dieser Reihenfolge: Jede Gruppe beginnt mit einem oder mehreren <dt>, gefolgt von einem oder mehreren <dd>. Ein <div> darf eine ganze Gruppe umschließen; <script> und <template> sind ebenfalls erlaubt. Andere Elemente gehören in ein <dt> oder <dd>.

Bei Shopify

Seltener; meist in eigenen Sections für Produktdaten, Metafeld-Blöcken oder App-Markup. Korrigieren Sie die Struktur in den Liquid-Sections oder -Snippets des Themes.

Bei Shoptet (CZ)

Produktparameter werden vom Template ausgegeben. Melden Sie es Shoptet oder einer Partneragentur.

Bei PrestaShop

Themes zeigen Produktmerkmale oft als <dl>; angepasste Themes können die Struktur beschädigen. Korrigieren Sie das Markup in den Produkt-.tpl-Dateien des Themes.

Bei WooCommerce

WooCommerce zeigt gewählte Produktoptionen im Warenkorb und in den Bestelldetails als <dl> an; Themes oder Plugins, die diese Templates überschreiben, können die Struktur beschädigen. Korrigieren Sie es im Child-Theme-Template oder melden Sie es dem Plugin-Entwickler.

Standards

Standards
StandardAbschnitt
WCAG 2.2 1.3.1 (A) Info and Relationships
WCAG 2.1 1.3.1 (A) Info and Relationships
WCAG 2.0 1.3.1 (A) Info and Relationships
EN 301 549 4.1.1 9.1.3.1
EN 301 549 3.2.1 9.1.3.1
Section 508 2017 E205.4
ДСТУ EN 301 549 2022 9.1.3.1

Automatische Prüfung: axe-core-Regel definition-list. dequeuniversity.com, github.com, www.w3.org

Alle Regeln, die wir prüfen