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

Tabellenzellen verweisen auf falsche Überschriften

Eine Tabelle, zum Beispiel eine Größentabelle, eine Tabelle mit technischen Daten oder Versandkosten, verknüpft ihre Zellen über das Attribut headers mit den Überschriften, doch einige Verweise zeigen nicht auf Überschriftenzellen derselben Tabelle.

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

Warum das für Ihre Kunden wichtig ist

Screenreader nutzen diese Verknüpfungen, um einen Wert zusammen mit seinen Überschriften vorzulesen, etwa „Größe M, Brustumfang: 96 cm“. Sind sie fehlerhaft, hören blinde Kundinnen und Kunden Zahlen ohne Zusammenhang und wählen womöglich die falsche Größe oder Variante.

Wen es betrifft

blinde Kundinnen und Kunden
Screenreader-Nutzer

So beheben Sie es

Jede ID im headers-Attribut einer Zelle muss zu einem <th> in derselben Tabelle gehören, und eine Zelle darf nicht auf sich selbst verweisen. Korrigieren Sie falsche oder fehlende IDs. Bei einfachen Tabellen ist es oft leichter, die headers-Attribute ganz zu entfernen und Überschriften mit <th scope="col"> und <th scope="row"> auszuzeichnen, die Screenreader ohne zusätzliche Verknüpfungen verstehen.

Bei Shopify

Meist eine Größen- oder Datentabelle, die in eine Produktbeschreibung oder Seite eingefügt oder von einer Größentabellen-App erzeugt wurde. Korrigieren Sie das Tabellen-HTML in der Code-Ansicht des Editors oder wenden Sie sich an den App-Entwickler.

Bei Shoptet (CZ)

Meist eine Tabelle, die in eine Produktbeschreibung oder einen Artikel eingefügt wurde. Korrigieren Sie das Tabellen-HTML im Editor; die meisten einfachen Tabellen brauchen nur <th>-Zellen und kein headers-Attribut.

Bei PrestaShop

Meist eine Tabelle in einer Produktbeschreibung, auf einer CMS-Seite oder in einem Modul für Produktmerkmale. Korrigieren Sie das HTML im Editor oder im .tpl-Template des Moduls.

Bei WooCommerce

Meist eine Tabelle aus einem Tabellen- oder Größentabellen-Plugin oder HTML in einer Produktbeschreibung. Prüfen Sie die Barrierefreiheitsoptionen des Plugins oder korrigieren Sie die IDs im Tabellencode.

Standards

Standards
Standard	Abschnitt
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 td-headers-attr. dequeuniversity.com, github.com, www.w3.org

Die Seite gibt ihre Sprache nicht an
WCAG 3.1.1 A
Barrierefreiheits-Attribute haben falsche Werte
WCAG 4.1.2 A
Einige Schalter und Kontrollkästchen haben keinen Namen
WCAG 4.1.2 A
Einige Vektorgrafiken haben keine Textbeschreibung
WCAG 1.1.1 A

Alle Regeln, die wir prüfen