Tabellen

Das ist eine sehr gute Frage, die über die grundlegende Struktur hinausgeht! In solchen Fällen, wo du mehrere Hierarchieebenen bei den Spaltenüberschriften hast, benötigst du das headers -Attribut.

Du gibst jeder <th> -Zelle eine eindeutige id . Dann referenzierst du diese id s in den <td> -Zellen mit dem headers -Attribut, um die korrekte Zuordnung zu gewährleisten. Das ist komplexer als scope , aber für verschachtelte Überschriften unerlässlich. Ein Beispiel könnte so aussehen:

<table>

<caption>Umsatz nach Quartal und Jahr</caption>

<thead>

<tr>

<th rowspan=“2″>Region</th>

<th colspan=“2″>2023</th>

<th colspan=“2″>2024</th>

</tr>

<tr>

<th id=“q1-23″>Q1</th>

<th id=“q2-23″>Q2</th>

<th id=“q1-24″>Q1</th>

<th id=“q2-24″>Q2</th>

</tr>

</thead>

<tbody>

<tr>

<th>Nord</th>

<td headers=“q1-23″>100</td>

<td headers=“q2-23″>120</td>

<td headers=“q1-24″>130</td>

<td headers=“q2-24″>150</td>

</tr>

</tbody>

</table>

Am Ende sollte das Ganze etwa so aussehen:

Umsatz nach Quartal und Jahr

Region

2023

2024

Q1

Q2

Q1

Q2

Nord

100

120

130

150

Das ist ein häufiges Problem in der Praxis! Wenn dein CMS diese Attribute nicht über die grafische Oberfläche anbietet, hast du meist folgende Möglichkeiten:

• HTML-Ansicht nutzen: Gehe in die Quelltext-Ansicht (HTML-Ansicht) des Editors und füge die Attribute manuell ein. Das erfordert etwas HTML-Kenntnisse, ist aber der direkteste Weg, um Konformität zu erreichen.

• Plug-ins/Erweiterungen: Prüfe, ob es für dein CMS Plug-ins oder Erweiterungen gibt, die die Barrierefreiheit von Tabellen verbessern und diese Attribute nachträglich hinzufügen können.

• Entwickler-Support: Wenn die Tabelle sehr wichtig ist, kontaktiere eure Entwickler. Eventuell können sie eine angepasste Komponente oder ein spezielles Template bereitstellen, das diese HTML-Struktur automatisch erzeugt.

• Alternative Darstellungsform: Wenn alle Stricke reißen und du die Tabelle nicht barrierefrei im CMS umsetzen kannst, ziehe ernsthaft in Betracht, eine barrierefreie Alternative anzubieten (wie in Schritt 5 deiner SOP beschrieben), zum Beispiel eine gut strukturierte Textversion oder eine zugängliche PDF-Datei.

Das ist wichtig, weil leere Zellen für Screenreader verwirrend sind und Nutzer im Unklaren lassen. Statt die Zelle leer zu lassen, solltest du einen Platzhalter verwenden, der den Zustand klar kommuniziert:

• „N/A“ (Not Applicable / Nicht zutreffend)

• „k.A.“ (keine Angabe)

• „–“ (Gedankenstrich, wenn die Abwesenheit eines Wertes selbsterklärend ist und keine Verwechslungsgefahr besteht)

• „entfällt“

• „nicht verfügbar“

Wähle den Platzhalter, der am besten zum Kontext deiner Tabelle passt. Wichtig ist, dass er immer den gleichen Platzhalter für den gleichen Zustand verwendest, um Konsistenz zu gewährleisten.

Absolut! Responsivität ist der erste Schritt, aber bei komplexen Tabellen reicht sie oft nicht aus. Hier sind weitere Ideen für mobile Ansichten:

• Einzelne Zeilen als „Karten“: Eine gängige Methode ist, jede Tabellenzeile auf mobilen Geräten als eine Art „Karte“ oder Block darzustellen. Dabei werden die Spaltenüberschriften der Desktop-Ansicht zu Labels vor den jeweiligen Daten innerhalb dieses Blocks.

• Beispiel: Statt | Paket | Preis | Leistung | , wird auf dem Handy:

• Paket: Basic

• Preis: 29 €

• Leistungen: E-Mail-Support

• Accordion-Ansicht: Ähnlich wie bei Karten, aber die Details jeder Zeile sind einklappbar, sodass der Nutzer nur die relevanten Informationen auf den ersten Blick sieht und bei Bedarf aufklappen kann.

• Horizontales Scrollen: Wenn die Tabelle nicht anders darstellbar ist, kannst du sie in einen Container packen, der horizontales Scrollen erlaubt. Stelle sicher, dass die erste Spalte (oft die Zeilenüberschrift) fixiert bleibt, damit der Kontext beim Scrollen erhalten bleibt.

• Wichtige Spalten zuerst: Ordne die Spalten so an, dass die wichtigsten Informationen zuerst kommen, da diese auf kleineren Bildschirmen oft am besten sichtbar sind.

Es gibt tatsächlich Fälle, in denen eine Tabelle zwar Daten enthält, aber dennoch nicht die beste Wahl für die Darstellung ist:

• Sehr kleine Datenmengen: Wenn du nur zwei oder drei Datenpunkte hast, die du einfach in einem Satz oder einer kurzen Liste zusammenfassen könntest (z.B. „Die Studie ergab X für Gruppe A und Y für Gruppe B.“), ist eine Tabelle oft überflüssig und macht den Text unnötig fragmentiert.

• Narrative Daten: Wenn die Daten primär dazu dienen, eine Geschichte zu erzählen oder eine Entwicklung zu beschreiben, kann ein Fließtext mit integrierten Zahlen oder eine Infografik/Diagramm oft wirkungsvoller sein, als eine reine Datentabelle. Tabellen sind gut für Vergleiche und detaillierte Ansichten, aber nicht immer für die Übermittlung einer Botschaft.

• Komplexe Beziehungen ohne klare Zeilen-/Spaltenzuordnung: Wenn die Daten keine klare, hierarchische Beziehung zueinander haben, die sich in Zeilen- und Spaltenüberschriften abbilden lässt, könnte eine Liste von Definitionen , ein Glossar oder eine Mindmap besser geeignet sein.