Tabellen

Eine echte Tabellenbeschriftung verwenden

Regel: table-fake-caption
Schweregrad: Schwerwiegend
WCAG-Stufe A

Warum das wichtig ist

Eine erste Zeile, die wie ein Titel gestaltet ist, wird als Datenzelle gelesen. Die Tabelle bekommt keine Beschriftung, und die Zeile zerstört die Spaltenstruktur für alle, die Zelle für Zelle lesen.

So beheben Sie es

Verschieben Sie den Text in ein <caption>-Element als erstes Kind der <table>.
Gestalten Sie die caption per CSS, wenn sie wie die alte Zeile aussehen soll.
Entfernen Sie danach die übergreifende Zeile, damit die Spaltenzahl stimmt.

Im Markup

Fehlerhaft

<table>
  <tr><td colspan="3"><strong>Q3 revenue</strong></td></tr>
  <tr><th>Region</th><th>Q3</th><th>Q4</th></tr>
</table>

Korrekt

<table>
  <caption>Q3 revenue</caption>
  <tr><th>Region</th><th>Q3</th><th>Q4</th></tr>
</table>

Die Anforderung dahinter

Diese Regel ist eine Art, die folgenden WCAG-2.2-Erfolgskriterien zu verfehlen. Das W3C, das den Standard herausgibt, erläutert jedes davon:

1.3.1 Info und Beziehungen (öffnet in neuem Tab) — WCAG-Stufe A

Weiterführende Quellen

Deque University zu table-fake-caption (öffnet in neuem Tab)

Deque entwickelt axe-core, die quelloffene Prüf-Engine unseres Scanners. Ihre Seite dokumentiert die Regel so, wie die Engine sie umsetzt.

Automatische Prüfungen finden Fehler, die ein Browser nachweisen kann. Ob eine Untertitelspur inhaltlich stimmt, ob ein Alternativtext wirklich hilft oder ob sich eine Seite durchgängig mit der Tastatur bedienen lässt, kann nur ein Mensch beurteilen.