empty-table-header

Tabellenkopfzellen dürfen nicht leer sein

manualKonfidenz: mediumSchweregrad: minorperceivable

Prüft, dass Tabellenkopfzellen (<th> oder jedes Element mit role="columnheader"/"rowheader") sichtbaren Textinhalt haben. Eine Kopfzelle, die nur über aria-label/aria-labelledby benannt ist, wird ebenfalls gemeldet, da die tatsächliche Unterstützung durch Screenreader und Browser uneinheitlich ist.

Anwendbarkeit. Gilt für <th>-Elemente ohne widersprechende explizite Rolle sowie für jedes Element (natives <th> oder nicht) dessen Rolle zu columnheader oder rowheader aufgelöst wird. Das role-Attribut ist eine Fallback-Liste: Sein erstes bekanntes, nicht abstraktes Token ist, ohne Berücksichtigung der Groß-/Kleinschreibung, die Rolle, sodass role="foo columnheader" zählt und ein <th role="foo"> (kein bekanntes Token) seine implizite Kopfzellenrolle behält. Ein <th>, das role="columnheader"/"rowheader" explizit wiederholt, wird weiterhin erfasst, ein <th role="presentation"> (inhaltlich keine Kopfzelle mehr) wird korrekt ausgeschlossen, und eine reine ARIA-Kopfzelle (z. B. ein <div role="columnheader"> in einem Widget mit role="grid"/role="table") wird ebenfalls erfasst. Ein Custom Element, dem seine ElementInternals die Rolle columnheader oder rowheader geben (this.attachInternals().role), ohne role-Attribut, das eine andere nennt, zählt wie ein natives Element mit dieser Rolle.

Erwartung. Die Kopfzelle hat sichtbaren Textinhalt. Ein <th>, das nur über aria-label/aria-labelledby benannt ist (ohne sichtbaren Text), wird EBENFALLS gemeldet und nicht als gleichwertig behandelt: Die Unterstützung von aria-label auf <th> ist in der Praxis uneinheitlich. NVDA+Firefox und iOS VoiceOver+Safari ignorieren es vollständig (nur sichtbarer Text wird angesagt), und auch JAWS+Chrome/IE11 sagen nur sichtbaren Text in der Kopfzelle selbst an. Sichtbarer Text ist der einzige Mechanismus, der nachweislich in jeder getesteten Kombination funktioniert. Siehe https://html5accessibility.com/stuff/2024/05/22/not-so-short-note-on-aria-label-usage-big-table-edition/.

Was ein Befund meldet.

  • ariaName (TABLE_HEADER_NAME_NOT_VISIBLE_TEXT): der Name, den die Kopfzelle über aria-label oder aria-labelledby statt aus sichtbarem Text erhält.

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></table>

Die Kopfzelle hat sichtbaren Textinhalt.

can't tell
<table><tr><th></th></tr></table>

Die Kopfzelle hat weder Textinhalt noch einen zugänglichen Namen.

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_HEADER_EMPTY

  1. Suchen Sie die im Bericht genannte Kopfzelle und sehen Sie sich an, was sie auf dem Bildschirm zeigt.
  2. Untersuchen Sie sie im Bereich „Barrierefreiheit“ in den Entwicklertools des Browsers und notieren Sie ihren berechneten Namen; ein Bild mit Alternativtext oder ein beschriftetes Symbol darin kann ihr einen geben.
  3. Sehen Sie sich die Zellen unter oder neben ihr an und entscheiden Sie, ob sie eine Kopfzelle brauchen, um verstanden zu werden.
  4. Ist sie die leere Eckzelle oben links in einer Tabelle, deren erste Spalte Zeilenköpfe enthält, beachten Sie, dass sie nichts überschreibt.

Bestanden. Die Zelle hat einen Namen, der ihre Spalte oder Zeile beschreibt, oder sie ist eine leere Eckzelle, die keine Daten überschreibt (besser noch als td ausgezeichnet).

Nicht bestanden. Die Zelle überschreibt Datenzellen, hat aber weder sichtbaren Text noch einen Namen, sodass ihre Spalte oder Zeile keine Überschrift hat; ein Verstoß gegen die Best Practice für Tabellenkopfzellen.

TABLE_HEADER_NAME_NOT_VISIBLE_TEXT

  1. Suchen Sie die im Bericht genannte Kopfzelle und lesen Sie den Namen, den der Bericht angibt (aus aria-label oder aria-labelledby).
  2. Betrachten Sie die Zelle auf dem Bildschirm und bestätigen Sie, dass sie keinen eigenen Text zeigt.
  3. Bewegen Sie sich mit einem Screenreader durch eine Datenzelle in dieser Spalte oder Zeile und achten Sie darauf, ob der Name der Kopfzelle mit angesagt wird.

Bestanden. Die Kopfzelle wird mit ihren Datenzellen angesagt, oder die Zelle erhält sichtbaren Text (auch visuell verborgener Text in der Zelle funktioniert), der denselben Namen nennt.

Nicht bestanden. Die Kopfzelle hat keinen sichtbaren Text und beruht auf einem ARIA-Namen, der mit ihren Datenzellen nicht angesagt wird; ein Verstoß gegen die Best Practice der Empfehlungen zu zugänglichen Namen.

Quellcode ansehen