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

Der Titel einer Tabelle steht in einer Tabellenzelle

Eine Datentabelle, etwa eine Größentabelle oder Preisliste, hat ihren Titel in einer verbundenen ersten Zeile statt in einer richtigen Tabellenbeschriftung.

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

Warum das für Ihre Kunden wichtig ist

Screenreader lesen die Beschriftung einer Tabelle vor, sobald man sie erreicht, sodass klar ist, worum es geht. Ein Titel in einer Zelle wird dagegen als Daten gelesen, bringt die Spaltenstruktur durcheinander und macht die Zahlen schwerer verständlich.

Wen es betrifft

blinde Kundinnen und Kunden
Screenreader-Nutzer

So beheben Sie es

Verschieben Sie den Titel aus den Tabellenzellen in ein <caption>-Element direkt nach dem öffnenden <table>-Tag, zum Beispiel <caption>Größentabelle, Damen-T-Shirts</caption>, und entfernen Sie die verbundene erste Zeile (die Zelle mit colspan). Gestalten Sie die Beschriftung bei Bedarf per CSS, damit sie wie zuvor aussieht.

Bei Shopify

Meist eine Größentabelle oder andere Tabelle, die in eine Produktbeschreibung oder Seite eingefügt oder von einer App erzeugt wurde. Korrigieren Sie das Tabellen-HTML in der Code-Ansicht des Editors oder bitten Sie den App-Entwickler, ein <caption> auszugeben.

Bei Shoptet (CZ)

Meist eine in eine Produktbeschreibung oder einen Artikel eingefügte Tabelle. Korrigieren Sie das Tabellen-HTML in der Quellcode-Ansicht des Editors.

Bei PrestaShop

Meist eine Tabelle in einer Produktbeschreibung, einer CMS-Seite oder einem Modul. Korrigieren Sie das HTML in der Quellcode-Ansicht des Editors oder im .tpl-Template des Moduls.

Bei WooCommerce

Meist ein Tabellen-Plugin oder in eine Produktbeschreibung eingefügtes HTML. Prüfen Sie, ob das Plugin eine Option für Tabellentitel oder Beschriftung hat, die <caption> ausgibt; sonst korrigieren Sie das Tabellen-HTML.

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 table-fake-caption. dequeuniversity.com, github.com, www.w3.org

Tabellenüberschriften beschreiben keine Daten
WCAG 1.3.1 A
Ein Listeneintrag steht außerhalb einer Liste
WCAG 1.3.1 A
Barrierefreiheits-Attribute sind falsch geschrieben
WCAG 4.1.2 A
Videos oder Töne starten von selbst mit Ton
WCAG 1.4.2 A

Alle Regeln, die wir prüfen