html mit Adi Prinz

Semantische Tabellenstruktur

Datentabellen sollten mit den dafür vorgesehenen HTML-Elementen aufgebaut werden. Dadurch können Browser und Hilfstechnologien die Bedeutung der einzelnen Bereiche erkennen.

Tabellenbeschriftung mit caption

Das Element <caption> gibt der Tabelle eine sichtbare Beschriftung. Es steht unmittelbar nach dem öffnenden <table>-Element.

<table>
  <caption>Monatliche Kursanmeldungen 2026</caption>

  <thead>
    <tr>
      <th scope="col">Monat</th>
      <th scope="col">HTML</th>
      <th scope="col">CSS</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">Jänner</th>
      <td>18</td>
      <td>14</td>
    </tr>
  </tbody>
</table>

Eine aussagekräftige Beschriftung hilft allen Benutzern, den Zweck der Tabelle schnell zu erfassen. Screenreader können die Beschriftung zusammen mit der Tabelle ausgeben.

Spaltenüberschriften mit scope

Mit scope="col" wird festgelegt, dass eine Überschriftszelle für die darunterliegenden Zellen derselben Spalte gilt.

<thead>
  <tr>
    <th scope="col">Produkt</th>
    <th scope="col">Anzahl</th>
    <th scope="col">Preis</th>
  </tr>
</thead>

Ein Screenreader kann dadurch beim Lesen einer Datenzelle die zugehörige Spaltenüberschrift nennen. Beim Wert „49,90 €“ kann beispielsweise zusätzlich „Preis“ ausgegeben werden.

Zeilenüberschriften mit scope

Die erste Zelle einer Datenzeile enthält häufig die Bezeichnung des Datensatzes. Wenn sie als Zeilenüberschrift dient, wird dafür <th scope="row"> verwendet.

<tbody>
  <tr>
    <th scope="row">Tastatur</th>
    <td>2</td>
    <td>49,90 €</td>
  </tr>

  <tr>
    <th scope="row">Maus</th>
    <td>3</td>
    <td>24,90 €</td>
  </tr>
</tbody>

Für die Zelle mit dem Wert „2“ bestehen damit zwei Beziehungen: Die Spaltenüberschrift lautet „Anzahl“ und die Zeilenüberschrift „Tastatur“.

Werte des scope-Attributs

Für einfache Tabellen reichen meistens col und row. Die Werte colgroup und rowgroup werden bei Tabellen mit mehrstufigen Überschriften benötigt.

Vollständiges einfaches Beispiel

<table class="kurstabelle">
  <caption>Teilnehmerzahlen der EDV-Kurse</caption>

  <thead>
    <tr>
      <th scope="col">Kurs</th>
      <th scope="col">Termin</th>
      <th scope="col">Teilnehmer</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">HTML Grundlagen</th>
      <td>12. September 2026</td>
      <td>14</td>
    </tr>

    <tr>
      <th scope="row">CSS Grundlagen</th>
      <td>19. September 2026</td>
      <td>12</td>
    </tr>

    <tr>
      <th scope="row">Excel Grundlagen</th>
      <td>26. September 2026</td>
      <td>16</td>
    </tr>
  </tbody>
</table>

Dieses Beispiel besitzt eine Tabellenbeschriftung, eindeutige Spaltenüberschriften und eine Überschrift für jede Datenzeile. Für eine einfache Datentabelle ist damit bereits eine gute barrierefreie Grundstruktur vorhanden.

Tabellen nicht für das Seitenlayout verwenden

Tabellen sind für Daten vorgesehen, die in Zeilen und Spalten zueinander in Beziehung stehen. Sie sollten nicht verwendet werden, um Bereiche einer Webseite nebeneinander anzuordnen.

<!-- Nicht für das Seitenlayout verwenden -->
<table>
  <tr>
    <td>Navigation</td>
    <td>Hauptinhalt</td>
  </tr>
</table>

Für das Seitenlayout stehen mit CSS Flexbox und CSS Grid wesentlich besser geeignete Techniken zur Verfügung.

Mehrstufige Spaltenüberschriften

In der folgenden Tabelle werden die Spalten „HTML“ und „CSS“ unter der gemeinsamen Überschrift „Webdesign“ zusammengefasst. Die Spalten „Word“ und „Excel“ gehören zur Gruppe „Microsoft 365“.

<table>
  <caption>Teilnehmerzahlen nach Kursbereich</caption>

  <thead>
    <tr>
      <td></td>
      <th colspan="2" scope="colgroup">Webdesign</th>
      <th colspan="2" scope="colgroup">Microsoft 365</th>
    </tr>

    <tr>
      <th scope="col">Monat</th>
      <th scope="col">HTML</th>
      <th scope="col">CSS</th>
      <th scope="col">Word</th>
      <th scope="col">Excel</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">Jänner</th>
      <td>18</td>
      <td>14</td>
      <td>12</td>
      <td>20</td>
    </tr>

    <tr>
      <th scope="row">Februar</th>
      <td>16</td>
      <td>15</td>
      <td>10</td>
      <td>22</td>
    </tr>
  </tbody>
</table>

colspan="2" verbindet jeweils zwei Zellen. Mit scope="colgroup" wird angegeben, dass die Überschrift für diese Spaltengruppe gilt.

Mehrstufige Zeilenüberschriften

Auch mehrere Zeilen können zu einer gemeinsamen Gruppe gehören. Dafür werden rowspan und scope="rowgroup" verwendet.

<table>
  <caption>Kurstermine nach Themenbereich</caption>

  <thead>
    <tr>
      <th scope="col">Bereich</th>
      <th scope="col">Kurs</th>
      <th scope="col">Termin</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th rowspan="2" scope="rowgroup">Webdesign</th>
      <th scope="row">HTML Grundlagen</th>
      <td>12. September 2026</td>
    </tr>

    <tr>
      <th scope="row">CSS Grundlagen</th>
      <td>19. September 2026</td>
    </tr>
  </tbody>

  <tbody>
    <tr>
      <th rowspan="2" scope="rowgroup">Microsoft 365</th>
      <th scope="row">Word Grundlagen</th>
      <td>26. September 2026</td>
    </tr>

    <tr>
      <th scope="row">Excel Grundlagen</th>
      <td>3. Oktober 2026</td>
    </tr>
  </tbody>
</table>

Die beiden Themenbereiche werden jeweils in einem eigenen <tbody>-Element zusammengefasst. Die Zelle mit scope="rowgroup" beschreibt die zugehörige Gruppe von Zeilen.

Explizite Zuordnung mit headers und id

Bei sehr komplexen Tabellen können Überschriften und Datenzellen ausdrücklich miteinander verbunden werden. Jede Überschriftszelle erhält dafür eine eindeutige id. Die Datenzellen verweisen mit dem Attribut headers auf die zugehörigen Überschriften.

<table>
  <caption>Teilnehmerzahlen nach Kursbereich</caption>

  <thead>
    <tr>
      <td></td>
      <th id="webdesign" colspan="2">Webdesign</th>
      <th id="microsoft365" colspan="2">Microsoft 365</th>
    </tr>

    <tr>
      <th id="monat">Monat</th>
      <th id="html">HTML</th>
      <th id="css">CSS</th>
      <th id="word">Word</th>
      <th id="excel">Excel</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th id="jaenner">Jänner</th>
      <td headers="jaenner webdesign html">18</td>
      <td headers="jaenner webdesign css">14</td>
      <td headers="jaenner microsoft365 word">12</td>
      <td headers="jaenner microsoft365 excel">20</td>
    </tr>
  </tbody>
</table>

Für den Wert „18“ nennt headers="jaenner webdesign html" alle zugehörigen Überschriften: „Jänner“, „Webdesign“ und „HTML“.

scope oder headers verwenden?

Für die meisten Tabellen ist scope ausreichend und leichter zu schreiben. headers sollte verwendet werden, wenn sich die Beziehungen zwischen Überschriften und Datenzellen nicht mehr eindeutig durch scope ausdrücken lassen.

Komplexe Tabellen möglichst vereinfachen

Eine technisch korrekte Tabelle kann trotzdem schwer verständlich sein. Sehr viele Überschriftsebenen, verbundene Zellen und unterschiedliche Zellbeziehungen erschweren die Orientierung für alle Benutzer.

Häufig ist es besser, eine große Tabelle in mehrere kleinere Tabellen aufzuteilen. Jede Tabelle erhält dabei eine eigene, aussagekräftige Beschriftung.

Tabelleninhalt verständlich prüfen

Bereits vor der technischen Prüfung sollte kontrolliert werden, ob Aufbau und Inhalt der Tabelle leicht verständlich sind.

• Besitzt die Tabelle eine aussagekräftige Beschriftung?
• Sind Spalten- und Zeilenüberschriften eindeutig formuliert?
• Ist die Reihenfolge der Spalten logisch?
• Sind Abkürzungen und Maßeinheiten verständlich?
• Kann eine sehr große Tabelle in kleinere Tabellen aufgeteilt werden?

HTML-Struktur prüfen

Im Quellcode sollte kontrolliert werden, ob die vorgesehenen Tabellenelemente entsprechend ihrer Bedeutung verwendet wurden.

Tastaturbedienung prüfen

Gewöhnliche Tabellenzellen sind nicht interaktiv und müssen deshalb nicht mit der Tabulatortaste erreichbar sein. Enthält die Tabelle jedoch Links, Schaltflächen, Kontrollkästchen oder andere Bedienelemente, müssen diese vollständig mit der Tastatur bedienbar sein.

<table>
  <caption>Verfügbare Kursunterlagen</caption>

  <thead>
    <tr>
      <th scope="col">Kurs</th>
      <th scope="col">Datei</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">HTML Grundlagen</th>
      <td>
        <a href="html-grundlagen.pdf">PDF herunterladen</a>
      </td>
    </tr>
  </tbody>
</table>

Beim Prüfen mit der Tabulatortaste muss der Link erreichbar sein. Außerdem muss deutlich sichtbar sein, wenn er den Tastaturfokus besitzt.

table a:focus-visible {
  outline: 3px solid #0d6efd;
  outline-offset: 3px;
}

Scrollbare Tabellen prüfen

Breite Tabellen werden auf kleinen Bildschirmen häufig in einem horizontal scrollbaren Container dargestellt. Dabei muss geprüft werden, ob alle Spalten erreichbar bleiben.

<div
  class="table-scroll"
  tabindex="0"
  role="region"
  aria-label="Teilnehmerzahlen nach Kursbereich"
>
  <table>
    ...
  </table>
</div>

Der Scrollbereich sollte mit der Tastatur erreichbar sein und einen sichtbaren Fokusrahmen erhalten.

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

.table-scroll:focus-visible {
  outline: 3px solid #0d6efd;
  outline-offset: 2px;
}

Bei der Prüfung sollte die Browserbreite verkleinert werden. Anschließend wird kontrolliert, ob die letzte Spalte ohne Verlust von Informationen erreicht werden kann.

Zoom und Vergrößerung prüfen

Tabellen sollten auch bei einer starken Vergrößerung der Webseite lesbar und bedienbar bleiben. Eine sinnvolle Prüfung erfolgt beispielsweise mit einem Browserzoom von 200 % und 400 %.

• Werden keine Tabelleninhalte abgeschnitten?
• Bleiben Überschriften und Daten vollständig lesbar?
• Kann eine breite Tabelle horizontal verschoben werden?
• Überdecken sich Texte und Bedienelemente nicht?
• Bleiben Links und Schaltflächen erreichbar?

/* Problematisch bei vergrößertem Text */
td {
  height: 40px;
  overflow: hidden;
}

Farben und Kontraste prüfen

Text, Rahmen, Fokusmarkierungen und wichtige Hervorhebungen müssen sich deutlich vom Hintergrund unterscheiden. Informationen dürfen außerdem nicht ausschließlich durch eine Farbe vermittelt werden.

<td>
  <span class="status status-erfolgreich">
    Erfolgreich
  </span>
</td>

.status-erfolgreich {
  color: #146c43;
  font-weight: bold;
}

.status-erfolgreich::before {
  content: "✓ ";
}

Der Status wird nicht nur grün dargestellt, sondern zusätzlich durch Text und ein Symbol gekennzeichnet. Dadurch bleibt seine Bedeutung auch erkennbar, wenn Farben nicht oder nur eingeschränkt wahrgenommen werden.

Prüfung mit einem Screenreader

Bei wichtigen Tabellen sollte zusätzlich eine Prüfung mit einem Screenreader erfolgen. Unter Windows kann dafür beispielsweise der integrierte Screenreader Narrator verwendet werden.

Bei der Prüfung sollte kontrolliert werden:

• Wird die Tabellenbeschriftung ausgegeben?
• Wird die Anzahl der Zeilen und Spalten sinnvoll erkannt?
• Werden beim Wechsel zwischen Datenzellen die zugehörigen Überschriften genannt?
• Werden mehrstufige Überschriften korrekt zugeordnet?
• Sind Links und andere Bedienelemente verständlich beschriftet?

Automatische Prüfwerkzeuge

Browser-Erweiterungen und Entwicklungswerkzeuge können einige Probleme automatisch erkennen. Sie weisen beispielsweise auf fehlende Beschriftungen, ungültige Attribute oder unzureichende Farbkontraste hin.

Eine automatische Prüfung kann jedoch nicht zuverlässig beurteilen, ob eine Tabellenbeschriftung verständlich ist oder ob die Zuordnung der Überschriften inhaltlich sinnvoll gewählt wurde.

Checkliste für barrierefreie Tabellen