table-th-has-data-cells

<th>-Elemente müssen mindestens eine Datenzelle beschreiben

automaticWCAG 1.3.1 (A)Konfidenz: highSchweregrad: moderateperceivable

Prüft, dass eine Tabelle mit <th>-Elementen auch mindestens eine <td>-Datenzelle enthält, die diese Kopfzellen beschreiben können.

Anwendbarkeit. Gilt für <table>-Elemente, die ihre Tabellensemantik behalten, im Accessibility Tree enthalten sind und mindestens ein <th> enthalten, das sichtbar ist, im Accessibility Tree enthalten ist und nicht durch eine andere explizite Rolle als rowheader/columnheader überschrieben wird. Gilt auch für die reine ARIA-Entsprechung: ein Element, dessen Rolle zu grid/treegrid aufgelöst wird (ohne native <table>), das mindestens ein betroffenes Element mit der Rolle columnheader/rowheader enthält. Rollen werden so aufgelöst wie von User Agents: das erste Token des role-Attributs, das eine bekannte Rolle nennt, ohne Berücksichtigung der Groß-/Kleinschreibung abgeglichen; ein role-Attribut ohne bekanntes Token lässt die implizite Rolle bestehen. In der reinen ARIA-Form zählt ein Custom Element, dem seine ElementInternals die Rolle grid, treegrid, header oder cell geben (this.attachInternals().role), ohne role-Attribut, das eine andere nennt, wie eines mit diesem role-Attribut.

Erwartung. Die Tabelle enthält außerdem irgendwo mindestens ein <td>, und in einer Tabelle ohne colspan oder rowspan (oder einem grid ohne aria-colspan, aria-rowspan oder aria-colindex) ist jeder Kopfzelle nach dem HTML-Tabellenmodell eine Datenzelle zugeordnet: eine nach ihr in ihrer Spalte oder Zeile, soweit ihr scope es zulässt, ohne headers-Attribut, oder eine, deren headers-Attribut sie nennt.

Was ein Befund meldet.

  • row, column: wo eine nicht zugeordnete Kopfzelle steht, ab 0 gezählt: Zeilen von oben, Zellen innerhalb der Zeile von links.

Diese Felder in data.details helfen, einen Befund zu lesen und zu reproduzieren. Außer reasonCode und den wenigen Feldern, die Ausgabeschema als stabil nennt, sind sie kein stabiler Vertrag: Ein Feld kann in einer Minor-Version umbenannt werden oder wegfallen, bauen Sie also nicht darauf auf.

Beispiele

pass
<table>
<tr><th>Name</th></tr>
<tr><td>Apple</td></tr>
</table>

Die Tabelle hat mindestens ein <td>, für das das <th> als Kopfzelle dienen kann.

fail
<table>
<tr><th>Name</th></tr>
</table>

Die Tabelle hat ein <th>, aber nirgends ein <td>.

So prüfen Sie es

Wenn diese Regel nicht entscheiden kann, meldet sie cantTell und überlässt die Frage einer Person. Jede Frage, die sie stellen kann, steht hier unter ihrem Reason-Code, mit den Schritten, um sie zu beantworten. Ein Befund enthält dieselben Schritte in howToCheck, in der Sprache des Scans. Siehe Ausgabeschema.

TABLE_TH_NO_ASSIGNED_CELL

  1. Suchen Sie die im Bericht genannte Kopfzelle (Zeile und Spalte sind angegeben, ab 0 gezählt).
  2. Sehen Sie sich die Zellen unter ihr in ihrer Spalte oder nach ihr in ihrer Zeile an, je nachdem, was ihr scope angibt.
  3. Entscheiden Sie, ob die Kopfzelle Daten beschriften soll: Fehlen die Zellen, die sie überschreiben sollte, oder sind diese als Kopfzellen ausgezeichnet, beschriftet sie nichts.
  4. Steht ein Screenreader zur Verfügung, bewegen Sie sich durch die Datenzellen der Tabelle und notieren Sie, ob diese Kopfzelle jemals angesagt wird.

Bestanden. Die Kopfzelle soll keine Daten beschriften (sie kann eine einfache Zelle sein), oder die Daten, die sie überschreibt, sind so ausgezeichnet, dass ihnen die Kopfzelle zugeordnet ist.

Nicht bestanden. Einer Kopfzelle, die Daten beschriften sollte, sind keine Datenzellen zugeordnet, sodass ihre Beziehung nicht vermittelt wird; das verstößt gegen WCAG 1.3.1.

Quellcode ansehen