HTML Academy · Lektion

Barrierefreiheit bei Tabellen: scope, summary und caption

Fügen Sie caption- und scope-Attribute zur Unterstützung von Screenreadern hinzu.

Barrierefreiheit bei Tabellen: scope, summary und caption ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum die Barrierefreiheit von Tabellen wichtig ist

Benutzer von Screenreadern navigieren Datentabellen Zelle für Zelle – sie benötigen für jede gelesene Datenzelle den Kontext der zugehörigen Kopfzeile.

Ohne korrektes Markup lesen Screenreader nur die Rohwerte ohne Kontext zu Spalte oder Zeile vor
Barrierefreie Tabellen machen Daten für alle verständlich

Das caption-Element

<caption> stellt einen sichtbaren Titel für die Tabelle bereit:

<table>
  <caption>Q4 2024 Product Sales by Region</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>
<!-- caption is the first child of table -->
<!-- Screen readers announce it when entering the table -->
<!-- Helps all users understand the table's purpose at a glance -->

caption formatieren

Formatieren und positionieren Sie caption mit CSS:

caption {
  caption-side: bottom;  /* or top (default) */
  font-style: italic;
  font-size: 0.875rem;
  color: #666;
  text-align: left;
  padding: 0.5rem 0;
}

Das scope-Attribut von th

Das Attribut scope teilt Screenreadern mit, auf welche Zellen sich eine Kopfzelle bezieht:

<thead>
  <tr>
    <th scope="col">Name</th>      <!-- header for a column -->
    <th scope="col">Score</th>
    <th scope="col">Grade</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">Alice</th>    <!-- header for a row -->
    <td>95</td>
    <td>A</td>
  </tr>
</tbody>

scope-Werte

Werte des Attributs scope:

col – Kopfzelle gilt für die Zellen in derselben Spalte
row – Kopfzelle gilt für die Zellen in derselben Zeile
colgroup – Kopfzelle gilt für die Zellen in einer Spaltengruppe
rowgroup – Kopfzelle gilt für die Zellen in einer Zeilengruppe (tbody/thead)

scope für komplexe Kopfzeilen

Zusammengefasste Kopfzeilen verwenden den scope-Wert colgroup oder rowgroup:

<thead>
  <tr>
    <th rowspan="2" scope="col">Name</th>
    <th colspan="2" scope="colgroup">2024</th>   <!-- colgroup -->
  </tr>
  <tr>
    <th scope="col">Q1</th>
    <th scope="col">Q2</th>
  </tr>
</thead>

Das headers-Attribut von td

Verwenden Sie bei sehr komplexen Tabellen headers, um Zellen ausdrücklich mit ihren Kopfzellen zu verknüpfen:

<thead>
  <tr>
    <th id="hname">Name</th>
    <th id="hq1">Q1</th>
    <th id="hq2">Q2</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th id="ralice" headers="hname">Alice</th>
    <td headers="hq1 ralice">95</td>
    <td headers="hq2 ralice">88</td>
  </tr>
</tbody>

Wann scope und wann headers verwenden?

Richtlinien:

Einfache Tabellen mit einzeiligen Kopfzeilen → verwenden Sie scope="col" und scope="row"
Komplexe zusammengefasste Kopfzeilen → verwenden Sie das Attribut headers mit ID-Referenzen
WCAG 1.3.1 verlangt, dass Tabellenkopfzeilen programmgesteuert mit ihren Datenzellen verknüpft sind

aria-label bei table

Wenn ein caption aus visuellen Gründen nicht gewünscht ist, verwenden Sie aria-label:

<!-- caption with visually-hidden class -->
<table aria-label="Q4 2024 Product Sales by Region">
  ...
</table>
<!-- Or use aria-labelledby to reference a heading -->
<h2 id="table-title">Sales Data</h2>
<table aria-labelledby="table-title">...</table>

Barrierefreiheit von Tabellen testen

So überprüfen Sie, ob Ihre Tabelle barrierefrei ist:

Verwenden Sie das Bedienfeld Tables in Screenreadern (VoiceOver, NVDA)
Installieren Sie die Browser-Erweiterung axe DevTools
Führen Sie die CLI pa11y für die URL Ihrer Seite aus
Der W3C Markup Validator erkennt ein fehlendes caption

summary-Attribut (veraltet)

Das Attribut summary wurde bei komplexen Tabellen für Screenreader verwendet – es ist in HTML5 inzwischen veraltet:

<!-- Old HTML 4.01 — do not use: -->
<table summary="This table shows quarterly sales...">

<!-- Modern HTML5 replacement: -->
<table>
  <caption>This table shows quarterly sales...</caption>
</table>
<!-- Or: aria-describedby to a paragraph -->

Checkliste für barrierefreie Tabellen

Checkliste für die Barrierefreiheit von Datentabellen:

Verwenden Sie <caption>, um die Tabelle zu beschriften
Verwenden Sie <th> für alle Kopfzellen
Fügen Sie allen <th>-Elementen scope hinzu
Verwenden Sie <thead>, <tbody> und <tfoot> für die Struktur
Verwenden Sie bei komplexen Tabellen id + headers

Kurztest

Welchen scope-Wert sollten Sie für ein th verwenden, das als Kopfzelle für eine ganze Spalte dient?

Zusammenfassung: Barrierefreiheit von Tabellen

Das Wichtigste zu barrierefreien Tabellen:

<caption> – sichtbarer Tabellentitel, der von Screenreadern angesagt wird
scope="col" – Spaltenkopf
scope="row" – Zeilenkopf
scope="colgroup/rowgroup" – zusammengefasste Kopfzeilen
id + headers – für komplexe mehrstufige Kopfzeilen
Testen Sie mit axe, pa11y oder VoiceOver

Häufig gestellte Fragen

Ist die Lektion „Barrierefreiheit bei Tabellen: scope, summary und caption“ kostenlos?

Ja — der vollständige Text von „Barrierefreiheit bei Tabellen: scope, summary und caption“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Barrierefreiheit bei Tabellen: scope, summary und caption“?

Fügen Sie caption- und scope-Attribute zur Unterstützung von Screenreadern hinzu. Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Barrierefreiheit bei Tabellen: scope, summary und caption“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

table, tr, td und th
Struktur von thead, tbody und tfoot
colspan und rowspan zum Zusammenfassen
Barrierefreiheit bei Tabellen: scope, summary und caption

← Zurück zu HTML Academy