Was in einer Tabelle steckt

veröffentlicht in

Tabellen benötigen einen Namen

Tabellen müssen nach den Web Content Accessibility Guidelines (WCAG) 2.2 keinen Titel erhalten. Auch nach dem HTML-Standard sind caption-Elemente für Tabellen optional. Nach Accessible Rich Internet Applications (ARIA) 1.2 müssen jedoch Elemente mit der Rolle "table" einen Namen (genauer: accessible name) erhalten. Eine Möglichkeit, den Namen zu bestimmen, ist mit dem caption-Element.

Titel für Tabellen

Wenn eine Tabelle einen Titel oder eine Beschriftung erhält, dann sollten Sie den Titel mit einem caption-Element auszeichnen. In dem Fall muss das caption-Element das erste Kindelement des table-Elements sein.

<table>
<caption>Titel der Tabelle</caption>
… Rest der Tabelle …
</table>

Einen Titel sollten Sie vor allem dann für eine Tabelle berücksichtigen, wenn eine Tabelle nicht leicht verständlich ist. Beispielsweise ist der Zweck der folgenden Tabelle nicht unbedingt klar:

123456
1234567
2345678
3456789
45678910
567891011
6789101112

Der Titel der Tabelle kann mit dem caption-Element bestimmt werden:

Tabelle 1: Mögliche Ergebnisse beim Wurf zweier Würfel
123456
1234567
2345678
3456789
45678910
567891011
6789101112

Ein Titel, der mit einem caption-Element ausgezeichnet wird, wird gleichzeitig zum Namen der Tabelle.

Namen für Tabellen

Wenn eine Webseite Tabellen enthält und die Tabellen in einem Screenreader aufgelistet oder angesprungen werden, wird der Name der Tabelle zusammen mit einer semantischen Kennzeichnung wie "Tabelle" und den Dimensionen der Tabelle ausgegeben. Vor allem wenn eine Webseite mehrere Tabellen enthält, sind Namen für Tabellen erforderlich, damit die Tabellen mit einem Screenreader voneinander unterschieden werden können:

Liste von Tabellen im Screenreader JAWS
Quelle: www.qvm-portal.de

Es gibt verschiedene Techniken, den Namen einer Tabelle zu bestimmen. Die HTML Accessibility API Mappings (HTML-AAM) beschreiben die Algorithmen, wie ein Browser einen Namen für verschiedene HTML-Elemente ermitteln muss. Die allgemeine Rangfolge für die Bestimmung des Namens einer Tabelle ist wie folgt:

  1. Das aria-labelledby-Attribut hat Vorrang vor
  2. dem aria-label-Attribut, das Vorrang vor
  3. dem caption-Element, das Vorrang vor
  4. dem title-Attribut hat und
  5. wenn keins der vorherigen Techniken verfügbar ist, hat die Tabelle keinen Namen.

Wenn eine Tabelle einen Namen erhalten soll, dann wird immer das caption-Element empfohlen. Das caption-Element ist für alle zugänglich während die anderen Techniken immer nur für bestimmte Nutzende zugänglich sind.

Wenn eine Tabelle kein caption-Element besitzt, benötigt die Tabelle nach der ARIA-Spezifikation immer noch einen Namen. Entweder verknüpfen Sie eine sichtbare Beschriftung mit dem aria-labelledby-Attribut für das table-Element oder Sie legen den Namen der Tabelle mit dem aria-label-Attribut fest.

<figure>
<table aria-labelledby="foo">
…
  </table>
  <figcaption id="foo">Titel der Tabelle</figcaption>
  </figure>

Wenn eine Tabelle ihren Namen per aria-labelledby- oder aria-label-Attribut erhält, werden Browser ein vorhandenes caption-Element als Beschreibung (genauer: accessible description) der Tabelle im Accessibility-Tree hinterlegen.

Beschreibung für Tabellen

Die HTML-AAM beschreiben auch die Algorithmen, wie ein Browser eine Beschreibung für verschiedene HTML-Elemente ermitteln muss. Die allgemeine Rangfolge für die Bestimmung der Beschreibung einer Tabelle ist wie folgt:

  1. Das aria-describedby-Attribut hat Vorrang vor
  2. dem aria-description-Attribut, das Vorrang vor
  3. dem caption-Element (Nur wenn es nicht bereits für den Namen dieses Knotens verwendet wird), das Vorrang vor
  4. dem title-Attribut hat (Nur wenn es nicht bereits für den Namen dieses Knotens verwendet wird) und
  5. wenn keins der vorherigen Techniken verfügbar ist, hat die Tabelle keine Beschreibung.

Generell ist eine Beschreibung für eine Tabelle optional. Für komplexe Tabellen verlangt aber der HTML-Standard, dass der Aufbau der Tabelle beschrieben wird. Diese Beschreibung kann als Beschreibung der Tabelle eingesetzt werden.

Wenn eine Tabelle ihren Namen durch ein aria-labelledby- oder aria-label-Attribut erhält, kann auch das caption-Element zur Beschreibung der Tabelle werden. Im folgenden Beispiel lautet der Name der Tabelle "Ausmisten/Entrümpeln" . Die Beschreibung der Tabelle ist dann "Beschreibung der Tabelle":

<table aria-label="Ausmisten / Entrümpeln">
  <caption>
  <details>
   <summary aria-label="Beschreibung der Tabelle"></summary>
   <p>Die Tabelle besteht aus drei Spalten. Es gibt zwei Reihen an Kopfzellen gefolgt von einer Reihe mit Datenzellen. Die linke Kopfzelle lautet "Auf den Flohmarkt verkaufen" und überspannt zwei Reihen. Für die zweite und dritte Spalte gibt es jeweils zwei Kopfzellen: Eine gemeinsame Kopfzelle "verschenken", die beide Spalten überspannt, sowie zwei einzelne Kopfzellen "Schule" und "Second Hand Shop" für die zweite und dritte Spalte in der zweiten Reihe.</p>
   </details>
  </caption>
  <thead>
<tr>
<th id="aktion-verkaufen" rowspan="2">auf dem Flohmarkt verkaufen</th>
<th id="aktion-verschenken" colspan="2">Verschenken</th>
</tr>
<tr>
<th id="aktion-verschenken-schule" headers="aktion-verschenken">Schule</th>
<th id="aktion-verschenken-shop" headers="aktion-verschenken">Second Hand Shop</th>
</tr>
</thead>
<tr>
<td headers="aktion-verkaufen">Schallplatten</td>
<td headers="aktion-verschenken aktion-verschenken-schule">Bücher</td>
<td headers="aktion-verschenken aktion-verschenken-shop">Klamotten</td>
</tr>
</table>

Weil Namen und Beschreibungen immer nur aus Text bestehen, sollten die caption-Elemente nicht mehr als 1-2 Sätze enthalten. Das caption-Element darf viele verschiedene Elemente enthalten, einschließlich Überschriften oder erweiterbare Schaltflächen. Bei der Ermittlung des Namens werden die semantischen Informationen (zum Beispiel ob es sich um eine Überschrift oder eine erweiterbare Schaltfläche handelt) nicht an Screenreader übertragen. Wenn aber beispielsweise ein details-Element im caption-Element enthalten ist, dann wird der Name der Schaltfläche Teil des Namens beziehungsweise der Beschreibung der Tabelle.