table-headers-attr-valid

Das „headers“-Attribut von Tabellenzellen muss auf gültige Kopfzellen verweisen

automaticWCAG 1.3.1 (A)Konfidenz: highSchweregrad: seriousperceivable

Prüft, dass jede id im headers-Attribut einer <td>/<th> auf eine Zelle (<td> oder <th>) in derselben Tabelle verweist (nicht fehlend, kein Element, das keine Zelle ist, nicht die Zelle selbst).

Anwendbarkeit. Gilt für <td>/<th>-Elemente mit nicht leerem headers-Attribut innerhalb einer <table>, deren semantische Rolle weiterhin table/grid/treegrid ist -- jede andere explizite Rolle (role="presentation"/"none", aber auch role="heading" oder jede andere echte Rolle) ersetzt die native Tabellensemantik, und dann gibt es keine Tabelle mehr, die headers beschreiben könnte. Eine präsentationale Rolle auf einer Tabelle mit einem globalen ARIA-Attribut oder einem tabindex wird nach der Konfliktauflösung von WAI-ARIA ignoriert, und die Tabelle bleibt eine Tabelle. Entspricht der Anwendbarkeit von ACT a25f45.

Erwartung. Jedes id-Token im headers-Attribut verweist auf ein Element, das: (a) existiert, (b) eine Zelle (<td> oder <th>) derselben <table> ist wie die verweisende Zelle und (c) nicht die Zelle selbst ist. Ein <td>, das über role="columnheader"/"rowheader" als Kopfzelle dient, ist ein gültiges Ziel, genau wie ein einfaches <th> -- ACT a25f45 verlangt nicht das native Tag.

Was ein Befund meldet.

invalid: ein Eintrag pro id im headers-Attribut, die nicht auf eine gültige Kopfzelle verweist: id und reason, nämlich missing (kein Element hat diese id), self-reference (die Zelle verweist auf sich selbst), not-a-cell (das Element ist kein <td> oder <th>) oder different-table (die Zelle liegt in einer anderen Tabelle).

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 id="h1">Name</th></tr>
  <tr><td headers="h1">Apple</td></tr>
</table>

headers="h1" verweist auf eine echte Zelle in derselben Tabelle.

fail

<table>
  <tr><th id="h2">Name</th></tr>
  <tr><td headers="missing">Banana</td></tr>
</table>

headers verweist auf eine id, die in der Tabelle nicht existiert.

Quellcode ansehen