Empfohlene Praxis Priorität: Gering
Eine Kopfzelle der Tabelle ist leer
Eine Tabelle hat eine Kopfzelle ohne Text, zum Beispiel die linke obere Ecke einer Größentabelle oder eine Spalte mit Aktions-Buttons. Das ist eine empfohlene Praxis, keine Anforderung der WCAG-Stufe AA.
Dieser Text wurde automatisch übersetzt und noch nicht von Muttersprachlern geprüft.
Warum das für Ihre Kunden wichtig ist
Wenn Screenreader-Nutzende sich durch eine Tabelle bewegen, wird vor jedem Wert die Kopfzelle vorgelesen, die seine Bedeutung erklärt. Eine leere Kopfzelle lässt Werte ohne Zusammenhang, sodass Größentabellen, Preisvergleiche oder die Bestellhistorie schwerer verständlich werden.
Wen es betrifft
- Screenreader-Nutzende
- blinde Menschen
- Menschen mit Sehbehinderung, die Bildschirmlupen mit Sprachausgabe nutzen
So beheben Sie es
Geben Sie jedem <th> (oder Element mit role="columnheader" bzw. "rowheader") einen Text, der seine Spalte oder Zeile beschreibt, etwa „Größe“ oder „Aktionen“. Soll der Text nicht sichtbar sein, verwenden Sie visuell versteckten Text, statt die Zelle leer zu lassen. Ist die Zelle eigentlich keine Kopfzelle, etwa eine leere Eckzelle, verwenden Sie <td> statt <th>.
Bei Shopify
Tabellen stammen meist aus Produktbeschreibungen, Größentabellen-Seiten oder Apps. Bearbeiten Sie die Tabelle im Rich-Text-Editor oder in der App, sodass jede Kopfzelle Text hat; bei Tabellen aus dem Theme korrigieren Sie das Liquid-Template.
Bei Shoptet (CZ)
Kommt meist von Tabellen in Produktbeschreibungen oder Textseiten. Bearbeiten Sie die Tabelle im Editor und füllen Sie die Kopfzellen aus; bei Tabellen im Template selbst wenden Sie sich an Shoptet oder einen Partner.
Bei PrestaShop
Kann in Produktbeschreibungen, Vergleichsseiten und Kundenkonto-Templates auftreten. Bearbeiten Sie den Inhalt im Backoffice oder überschreiben Sie die .tpl-Datei des Themes.
Bei WooCommerce
Häufig in Plugins für Größentabellen, Vergleiche und Tabellen sowie auf Kontoseiten wie der Bestellhistorie. Tragen Sie die Kopfzeile in den Plugin-Einstellungen ein oder überschreiben Sie das Template in einem Child-Theme.
Standards
Kein WCAG-Erfolgskriterium, sondern eine empfohlene Praxis, die die Website leichter nutzbar macht.
Automatische Prüfung: axe-core-Regel empty-table-header.
dequeuniversity.com, github.com, www.w3.org