Zum Inhalt springen
Pandus
de Sprache ändern
Menü

WCAG-A/AA-Anforderung Priorität: Mittel · experimentelle Prüfung: ggf. manuell nachsehen

Große Tabellen haben Zellen ohne Überschriften

Eine größere Datentabelle (mehr als 3 × 3 Zellen), etwa eine Größentabelle, technische Daten oder Versandkosten, hat keine Überschriftenzellen, sodass die Werte nicht mit ihrer Bedeutung verknüpft sind.

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

Warum das für Ihre Kunden wichtig ist

Screenreader lesen eine Zelle zusammen mit ihren Zeilen- und Spaltenüberschriften vor, etwa „Größe L, Taille: 84 cm“. Ohne Überschriften hören blinde Kundinnen und Kunden nur eine Folge von Zahlen und wissen nicht, zu welcher Größe oder Variante sie gehören.

Wen es betrifft

  • blinde Kundinnen und Kunden
  • Screenreader-Nutzer

So beheben Sie es

Kennzeichnen Sie die Kopfzeile und, falls sie die Zeilen benennt, die erste Spalte mit <th> statt <td> und ergänzen Sie scope="col" bzw. scope="row". Setzen Sie die Kopfzeile in <thead>. Nutzen Sie bei komplexen Tabellen mit mehreren Überschriftenebenen die Attribute id und headers. Ordnet die Tabelle Inhalte nur optisch an, ersetzen Sie sie durch ein CSS-Layout oder ergänzen Sie role="presentation".

Bei Shopify

Meist eine Größen- oder Datentabelle in einer Produktbeschreibung oder eine von einer App erzeugte Tabelle. Ändern Sie in der Code-Ansicht des Editors die <td>-Zellen der ersten Zeile in <th> oder bitten Sie den App-Entwickler, Überschriftenzellen auszugeben.

Bei Shoptet (CZ)

Meist eine in eine Produktbeschreibung oder einen Artikel eingefügte Tabelle. Ändern Sie in der Quellcode-Ansicht des Editors die Zellen der ersten Zeile in <th>.

Bei PrestaShop

Meist in einer Produktbeschreibung, einer CMS-Seite oder einem Modul für Produktmerkmale. Ändern Sie die Überschriftenzellen in der Quellcode-Ansicht des Editors oder im .tpl-Template des Moduls in <th>.

Bei WooCommerce

Meist ein Tabellen-Plugin oder in eine Produktbeschreibung eingefügtes HTML. Viele Tabellen-Plugins bieten eine Option, die erste Zeile als Kopfzeile zu verwenden; aktivieren Sie sie oder korrigieren Sie das Tabellen-HTML.

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 td-has-header. dequeuniversity.com, github.com, www.w3.org

Ähnliche Prüfungen

Alle Regeln, die wir prüfen