Tabellenüberschriften

Silktide prüft, ob Tabellen, die Daten präsentieren, Kopfzellen definieren. Überschriften teilen Personen, die verwenden, mit, was jede Zeile und Spalte bedeutet – etwas, das sehende Leserinnen und Leser aus dem Layout der Tabelle erschließen.

Betrachten Sie eine Tabelle mit Nachnamen und Städten. Ohne eine Kopfzeile könnte ein Wert wie „Washington“ beides sein – die Bedeutung wird erst klar, wenn die Spalten beschriftet sind.

<!-- Problem: Überschriften sind gewöhnliche Zellen und tragen daher keine Bedeutung -->
<table>
  <tr>
    <td>Nachname</td>
    <td>Stadt</td>
  </tr>
  <tr>
    <td>Washington</td>
    <td>London</td>
  </tr>
</table>

Warum das wichtig ist

Ein bewegt sich durch eine Tabelle Zelle für Zelle. Wenn Überschriften definiert sind, kann er die zugehörige Überschrift zusammen mit jedem Wert ansagen, sodass „London“ als „Stadt: London“ gelesen wird. Ohne Überschriften hört die Person lediglich eine Abfolge von Werten und muss sich das Layout der Tabelle merken, um sie zu verstehen – und bei größeren Tabellen ist das praktisch unmöglich.

Die oberste Zeile fett zu setzen oder anders zu färben, reicht nicht. Visuelle Gestaltung hat für Hilfstechnologien keine Bedeutung; nur das zugrunde liegende zählt.

So beheben Sie das Problem

Ändern Sie jede Überschriftenzelle von <td> zu <th> und fügen Sie ein scope-Attribut hinzu, das angibt, ob sie eine Spalten- oder eine Zeilenüberschrift ist:

<!-- Behoben: Überschriften sind echte Kopfzellen -->
<table>
  <tr>
    <th scope="col">Nachname</th>
    <th scope="col">Stadt</th>
  </tr>
  <tr>
    <td>Washington</td>
    <td>London</td>
  </tr>
</table>

Wenn die Tabelle überhaupt keine Daten präsentiert und nur der visuellen Anordnung der Seite dient, fügen Sie dem <table>-Element role="presentation" hinzu, damit Hilfstechnologien ihre Struktur ignorieren. Noch besser: Ersetzen Sie Layouttabellen durch CSS – von Layouttabellen wird im modernen Webdesign dringend abgeraten.

So prüft Silktide das

Alle Tabellen auf jeder Seite finden.
Tabellen mit role="presentation" überspringen.
Tabellen mit nur einer Zeile oder nur einer Spalte überspringen, da sie wahrscheinlich keine Datentabellen sind.
Jede verbleibende Tabelle melden, die überhaupt keine <th>-Kopfzelle enthält.

Fehlerbehebung

Meine Tabelle hat Überschriften, aber es sind formatierte `<td>`-Zellen

Zellen, die nur wie Überschriften aussehen, zählen nicht. Hilfstechnologien können keine Schriftarten oder Farben erkennen; wandeln Sie die Zellen in <th>-Elemente um.

Meine Layouttabelle wird beanstandet

Silktide überspringt nur Layouttabellen, die role="presentation" deklarieren. Wenn eine Tabelle wirklich nur der Darstellung dient, fügen Sie dieses Attribut hinzu – oder ersetzen Sie die Tabelle durch ein CSS-Layout.