SST - Einheitlicher Standard für Tabellen

Definitionen

Der SST-Standard legt Anforderungen an die Semantik, die Barrierefreiheit und die Funktionslogik von Tabellen fest.

Struktur und Semantik

Zentrale Tabellenelemente

• Wenn eine Tabelle einen Titel oder eine kurze Beschreibung benötigt, wird diese mit <caption> angegeben. Falls vorhanden, ist <caption> das erste Element innerhalb von <table>. Eine Tabellenbeschriftung macht den Zweck der Tabelle verständlicher, garantiert aber für sich allein keine SEO-Verbesserung.
• <thead> gruppiert Zeilen mit Spaltenüberschriften. Ein Browser oder Dokumentgenerator kann diese Gruppe beim seitenweisen Druck wiederholen; das tatsächliche Verhalten hängt vom Druckmodul und den Seiteneinstellungen ab.
• Ein oder mehrere <tbody>-Elemente gruppieren Datenzeilen. Mehrere <tbody>-Gruppen werden verwendet, wenn Zeilen in logische Abschnitte gegliedert sind. Eine Tabelle enthält höchstens eine <thead>- und eine <tfoot>-Sektion.
• <tfoot> enthält Summen- oder Ergebniszeilen. Nach dem aktuellen HTML-Modell wird es nach den Zeilengruppen der Tabelle platziert; CSS stellt es als Tabellenfußgruppe dar. Ältere Beispiele mit <tfoot> vor <tbody> sollten nicht als aktuelle Markup-Regel behandelt werden.
• <tr> definiert eine Zeile, <th> eine Kopfzelle und <td> eine Datenzelle. <th> und <td> müssen der tatsächlichen Rolle des Inhalts entsprechen und dürfen nicht allein nach dem gewünschten visuellen Stil gewählt werden.

Spaltengruppen

• <colgroup> kennzeichnet eine Gruppe von Spalten und wird nach <caption> und vor den Zeilengruppen platziert.
• <col> beschreibt eine oder mehrere Spalten innerhalb von <colgroup>. Das Attribut span legt fest, wie viele Spalten das Element umfasst.
• Enthält <colgroup> <col>-Elemente, wird deren Anzahl mit span an <col> angegeben. Alternativ kann span direkt an einem leeren <colgroup> ohne untergeordnete <col>-Elemente gesetzt werden.
• Mit <col> und <colgroup> lassen sich Spaltenbreiten und Hintergründe festlegen. Die darauf anwendbaren CSS-Eigenschaften sind begrenzt; beispielsweise richten text-align und padding an <col> keinen Text aus und legen keine Zellinnenabstände fest.
• Ein Spaltenhintergrund wird unter den Hintergründen von Zeilen und Zellen gezeichnet. Hat ein <th> oder <td> einen deckenden Hintergrund, ist die Farbe von <col> möglicherweise nicht sichtbar. Spaltenrahmen, die über <col> gesetzt werden, werden nur bei zusammenfallenden Rahmen angezeigt.

Barrierefreiheit

Überschriften und Zellbeziehungen

• In einer einfachen Tabelle werden Spaltenüberschriften mit <th scope="col"> und eine Zeilenüberschrift mit <th scope="row"> ausgezeichnet. Das Attribut scope ordnet eine Kopfzelle den zugehörigen Daten zu.
• Für Überschriften, die eine Gruppe von Zeilen oder Spalten umfassen, werden scope="rowgroup" und scope="colgroup" verwendet, sofern die Tabellenstruktur diesen Gruppen entspricht.
• Bei komplexen Tabellen mit mehrstufigen oder nicht benachbarten Überschriften reicht scope möglicherweise nicht aus. Überschriften und Datenzellen werden dann explizit über eindeutige id-Werte an <th> und die entsprechenden headers-Werte an <td> verknüpft.
• Eine visuelle Hervorhebung allein stellt die Beziehung zwischen Überschrift und Daten nicht programmatisch her. Die Tabellenstruktur muss mit assistiven Technologien geprüft werden.

Beispiel einfacher Zeilen- und Spaltenüberschriften:

<table>
  <caption>Projektbeteiligte</caption>
  <thead>
    <tr>
      <th scope="col">Feld</th>
      <th scope="col">Wert</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Benutzername</th>
      <td>Alexej</td>
    </tr>
  </tbody>
</table>

Gestaltung und Tabellenmodell

Innenabstände, Rahmen und leere Zellen

• Innenabstände werden an den Zellen <th> und <td> festgelegt. padding an einer Tabellenzeile <tr> steuert nicht die Innenabstände ihrer Zellen.
• border-collapse: collapse fasst benachbarte Zellrahmen zu einem gemeinsamen Raster zusammen. Bei border-collapse: separate werden Rahmen und Abstände dazwischen getrennt behandelt.
• empty-cells: show und empty-cells: hide steuern die Darstellung von Rahmen und Hintergründen leerer Zellen nur bei border-collapse: separate. Die Eigenschaft entfernt keine Zelle aus der Tabelle und legt nicht fest, was fehlende Daten bedeuten.
• Wenn ein fehlender Wert für die Interpretation der Daten relevant ist, wird ein verständlicher Wert oder Zustand angegeben. Eine leere Zelle darf keine Mehrdeutigkeit erzeugen.

Tabellenmodell beibehalten

• <table>, <tr>, <th> und <td> behalten ihr natives Tabellen-Anzeigemodell, wenn der Inhalt tatsächlich Zeilen und Spalten darstellt.
• Wird display einer Tabellenzeile auf flex oder grid geändert, ändert sich der Layoutalgorithmus: Die Zellen dieser Zeile nehmen nicht mehr am gemeinsamen Tabellenraster teil, sodass Spalten über mehrere Zeilen hinweg nicht mehr ausgerichtet sein können.
• Für die Anpassung einer Tabelle werden zunächst ihre native Breite, der Textumbruch und das Scrollen des Containers eingestellt. Eine alternative Kartenansicht ist als separate Darstellung möglich, sofern die Beziehungen zwischen Überschriften und Daten sowie eine verständliche Lesereihenfolge erhalten bleiben.

Datenausrichtung

• Die Ausrichtung wird explizit mit CSS festgelegt und nicht aus den Standardstilen des Browsers abgeleitet.
• Textwerte werden üblicherweise am Zeilenanfang, Zahlenwerte am Zeilenende ausgerichtet, damit sich Größen leichter vergleichen lassen. Für RTL werden logische Ausrichtungen wie text-align: start und text-align: end statt uneingeschränkt left und right verwendet.
• Sollen Zahlen anhand des Dezimaltrennzeichens verglichen werden, wird eine separate Markierung oder Formatierung verwendet, die die aktive Locale berücksichtigt.

Feste Tabellenaufteilung

• table-layout: fixed eignet sich, wenn Spaltenbreiten vorhersehbarer verteilt werden sollen und für die Tabelle selbst eine Breite ungleich auto festgelegt ist.
• Beim festen Algorithmus werden Spaltenbreiten zuerst durch an <col> festgelegte Breiten bestimmt, danach durch Breiten der Zellen in der ersten Zeile. Der verbleibende Platz wird auf die übrigen Spalten verteilt.
• Dieser Algorithmus hängt weniger vom Inhalt aller Zellen ab und kann das Layout vereinfachen, garantiert aber nicht in jeder Oberfläche eine schnellere Darstellung. Lange Inhalte können umbrechen, aus der Zelle herausragen oder eine gesonderte Behandlung erfordern.

Responsivität und Scrollen

• Passt eine Tabelle ohne Einbußen bei der Lesbarkeit nicht in die verfügbare Breite, wird das horizontale Scrollen mit overflow-x: auto auf einen separaten Container begrenzt. Die Containerbreite muss durch den übergeordneten Bereich eingeschränkt sein.
• Das <table>-Element behält seine native Tabellendarstellung. display: block wird nicht als Ersatz für einen Overflow-Container verwendet: Eine Änderung des Anzeigetyps kann die Zeilenaufteilung und gemeinsame Spaltenausrichtung beeinträchtigen.
• Horizontales Scrollen muss erkennbar und mit der Tastatur zugänglich bleiben. Ein separat scrollbarer Bereich benötigt einen verständlichen zugänglichen Namen, sichtbaren Fokus und Tastaturfokussierbarkeit, sofern Browser und Inhalt dies nicht bereits gewährleisten.
• -webkit-overflow-scrolling: touch ist keine Grundvoraussetzung für beschleunigtes Scrollen unter iOS und iPadOS 13 oder neuer. Auf dem iPhone kann die Eigenschaft einen Stacking Context erzeugen. Sie bleibt nur bestehen, wenn sie für ältere Zielsysteme nachweislich erforderlich ist und Nebenwirkungen geprüft wurden.
• Auf schmalen Bildschirmen werden nicht nur das Scrollen, sondern auch der Zugriff auf alle Spalten, Überschriften, Werte und fokussierbaren Elemente in den Zellen geprüft.

Beispiel für einen scrollbaren Container:

<div
  class="table-scroll"
  role="region"
  aria-label="Monatliche Umsatzübersicht"
  tabindex="0"
>
  <table class="data-table data-table--wide">
    <caption>Monatliche Umsatzübersicht</caption>
    <colgroup>
      <col class="data-table__month">
      <col span="2" class="data-table__metrics">
    </colgroup>
    <thead>
      <tr>
        <th scope="col">Monat</th>
        <th scope="col">Bestellungen</th>
        <th scope="col">Umsatz</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Januar</th>
        <td>120</td>
        <td>360.000 ₽</td>
      </tr>
      <tr>
        <th scope="row">Februar</th>
        <td>145</td>
        <td>435.000 ₽</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th scope="row">Gesamt</th>
        <td>265</td>
        <td>795.000 ₽</td>
      </tr>
    </tfoot>
  </table>
</div>

.table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table--fixed {
  table-layout: fixed;
}

.data-table--separate {
  border-collapse: separate;
  empty-cells: hide;
}

.data-table--wide {
  min-width: 42rem;
}

.data-table__month {
  width: 40%;
}

.data-table__metrics {
  background-color: #f5f5f5;
}

.data-table th,
.data-table td {
  padding: 0.75rem;
  border: 1px solid #ccc;
}

.data-table th {
  text-align: start;
}

.data-table td {
  text-align: end;
}

.table-scroll:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

Die Klasse data-table--wide wird nur verwendet, wenn Spalten eine festgelegte Mindestbreite benötigen; der Beispielwert 42rem wird an den Inhalt angepasst. Ein über <col> festgelegter Hintergrund bleibt sichtbar, solange er nicht von einem Zellen- oder Zeilenhintergrund überdeckt wird.

Zusätzliche Zustände

Fixierter Tabellenkopf

• Bei langen Tabellen können Überschriften während des vertikalen Scrollens sichtbar bleiben, indem position: sticky auf <th>-Zellen innerhalb von <thead> angewendet wird.
• Für fixierte Zellen werden ein Versatz und ein Hintergrund festgelegt; bei Bedarf kommt z-index hinzu. Andernfalls können Zeileninhalte durchscheinen oder Überschriften überdecken.
• position: sticky ist durch den nächstgelegenen Scroll-Container begrenzt. Bei einer Kombination aus fixiertem Tabellenkopf und horizontal scrollbarem Bereich wird das Verhalten sowohl beim Scrollen der Seite als auch innerhalb des Containers geprüft.

Beispiel für fixierte Überschriften:

.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #fff;
}

Tabellenkopf beim Drucken

• <thead> behält seine semantische Funktion als Kopfgruppe. Druck- und PDF-Engines können sie beim Umbruch einer langen Tabelle auf mehrere Seiten wiederholen; das Ergebnis wird in der Zielumgebung geprüft.

Prüfung

• Es wird geprüft, ob die Tabellenstruktur zum Datentyp passt und die Elemente in der richtigen Reihenfolge stehen: caption, colgroup, thead, tbody-Gruppen und tfoot.
• Jede Zeile und Spalte hat verständliche Überschriften; Beziehungen über scope oder id/headers werden mit einem Screenreader geprüft.
• Tabellen mit mehreren <tbody>-Gruppen, verbundenen Zellen und mehrstufigen Überschriften werden geprüft, sofern solche Fälle vorkommen.
• Auf schmalen Bildschirmen werden horizontales Scrollen, Tastaturzugriff und ein horizontales Überlaufen der Seite geprüft.
• Lange Inhalte bei table-layout: fixed sowie Fokus und Ebenen des fixierten Tabellenkopfs werden geprüft, sofern diese Funktionen verwendet werden.
• Leere Zellen werden mit dem tatsächlich verwendeten border-collapse-Wert geprüft; leere Werte dürfen die Bedeutung der Daten nicht verändern.
• Druckausgabe und Wiederholung der Überschriften werden in den vorgesehenen Browsern und PDF-Generatoren geprüft.

SST-Checkliste