Synonyme: Table

Siehe auch: Liste, Hierarchische Tabelle

Eine Tabelle dient der strukturierten Anzeige von Daten (siehe DIN EN ISO 9241-161: 8.44).

Eine Tabelle besteht aus Zellen, die in Spalten und Zeilen angeordnet sind. Meist befinden sich in der ersten Zeile die Spaltenüberschriften und häufig in der ersten Spalte die Zeilenüberschriften. Darüber hinaus können Tabellen verschiedene Funktionalitäten enthalten, z. B.

  • Sortieren und Filtern der Zellinhalte (z. B. über die Spaltenüberschriften),
  • Skalieren der Spalten- und Zeilengröße,
  • Ein- und Ausblenden von Spalten bzw. Änderung der Reihenfolge der Spalten,
  • Ein- und Ausblenden untergeordneter Tabellenzeilen (siehe: Hierarchische Tabelle),
  • Anzeige von Summenzeilen am Tabellenende,
  • Inline-Bearbeiten der Zellinhalte (im Folgenden als Bearbeitungsmodus bezeichnet),
  • externes Bearbeiten der Zellinhalte, z. B. über eine Werkzeugleiste oberhalb der Tabelle oder Schalter innerhalb der Tabellenzellen,
  • Auswählen von Tabellenzeilen, z. B. per Checkboxen (Mehrfach-Auswahl) oder Radiobutton (Einfach-Auswahl),
  • Auswählen von Tabellenzellen, z. B. per Markieren mit der Maus oder Tastatur,
  • Blättern oder Scrollen durch die Datensätze, ggf. mit einer Paginierung.

Die Anforderungen an die einzelnen Bedienelemente innerhalb der Tabelle werden beim jeweiligen Bedienelement beschrieben. Hier werden nur zusätzliche Anforderungen für das gesamte Element beschrieben.

Abbildung: Tabelle mit Spalten- und Zeilenüberschriften.
Nr.EigenschaftBeschreibungKlassifizierungReferenz
390KontrastDie Textinhalte der Tabellenzellen müssen zum Hintergrund ein Kontrastverhältnis von mindestens 4,5:1 aufweisen.MussEN 301 549: 9.1.4.3, 11.1.4.3
391KontrastDie grafischen Inhalte der Tabellenzellen müssen zum Hintergrund ein Kontrastverhältnis von mindestens 3:1 aufweisen.MussEN 301 549: 9.1.4.11, 11.1.4.11
392KontrastGrafisch übermittelte Statusunterschiede zwischen den Tabellenzellen müssen zum Hintergrund bzw. zu den Zellen mit einem anderen Status ein Kontrastverhältnis von mindestens 3:1 aufweisen.

Hinweis: Das gilt z. B. für den Status „gewählt“, „sortiert“ oder „bearbeitbar“.

SollEN 301 549: 9.1.4.1, 11.1.4.1, 9.1.4.11, 11.1.4.11
393KontrastSind die Tabellenzellen ausschließlich aufgrund ihrer farblichen Gestaltung als solche zu erkennen, muss diese Farbe zu benachbarten Farben ein Kontrastverhältnis von mindestens 3:1 aufweisen.

Hinweis 1: Eine Zelle kann z. B. aufgrund ihres Rahmens oder ihrer Hintergrundfarbe als solche erkennbar sein.

Hinweis 2: Die Anforderung gilt nicht, wenn die Zellen z. B. aufgrund der Abstände untereinander eindeutig als solche zu erkennen sind.

SollEN 301 549: 9.1.4.11, 11.1.4.11
394BeschriftungDie Spalten und Zeilen müssen über Spalten- und Zeilenüberschriften beschriftet werden.

Hinweis: Die gesamte Tabelle kann ebenfalls beschriftet werden.

MussEN 301 549: 11.5.2.6
395WertTabellen sollen keine Zeilen oder Spalten besitzen, die nur leere Zellen besitzen.SollEN 301 549: 11.5.2.7
396VergrößerungKeine Tabellenzelle darf bei 400% Zoom breiter als 320 px sein, damit deren Inhalte ohne horizontales Scrollen wahrnehmbar sind.MussEN 301 549: 9.1.4.10, 11.1.4.10
397FokussichtbarkeitErhält eine Tabellenzelle oder ein Element in dieser den Tastaturfokus, dann muss der Fokusindikator sichtbar sein (siehe Fokusindikator).MussEN 301 549: 9.2.4.7, 11.2.4.7
Nr.EigenschaftBeschreibungKlassifizierungReferenz
398TastaturbedienungAlle Bedienelemente innerhalb der Tabelle müssen mit der Tastatur erreicht, bedient und verlassen werden können (siehe folgende Tabelle Tastaturbedienung).

Hinweis 1: Dies gilt auch für Funktionen, die über die Spaltenüberschriften aufgerufen werden können, wie z. B. das Sortieren der Zellinhalte oder das Anpassen der Spaltenbreite über die Bereichstrenner zwischen den Spaltenüberschriften.

Hinweis 2: Alternativ können Bedienelemente außerhalb der Tabelle verwendet werden, um Tabellenfunktionalitäten zu ermöglichen.

Hinweis 3: Werden Tastaturkürzel eingesetzt, um die Tastaturbedienung zu ermöglichen, müssen diese in der Anwendung und Hilfe beschrieben werden.

Hinweis 4: Die Bedienung der Elemente darf nicht in den Konflikt mit der Navigation durch die Tabelle geraten. Wenn z. B. mit den Pfeiltasten durch die Tabelle navigiert werden kann, darf die Tabelle keine Bedienelemente enthalten, die mit den Pfeiltasten bedient werden, außer es kann in den Bearbeitungsmodus gewechselt werden.

MussEN 301 549: 9.2.1.1, 11.2.1.1, 9.2.1.2, 11.2.1.2
399KlickbereichDer Klickbereich der Bedienelemente innerhalb der Tabelle soll mindestens 24 x 24 px betragen (siehe Zeigeinstrumentbedienung).SollWCAG 2.2

Tastaturbedienung Tabelle (in einer Anwendung, die den virtuellen Cursor unterstützt)

Permalink "Tastaturbedienung Tabelle (in einer Anwendung, die den virtuellen Cursor unterstützt)"

Bei Anwendungen, die den virtuellen Cursor unterstützen, erhalten die Tabellen und deren Zellen nicht den Tastaturfokus. Lediglich interaktive Elemente innerhalb der Tabellenzellen sollen mit der Tastatur erreicht und bedient werden können. Dies gilt nur, sofern die Tabelle nicht mit role=grid ausgezeichnet ist. Tabellen mit role=grid werden wie Tabellen in Anwendungen ohne virtuellen Cursor bedient (siehe folgenden Abschnitt).

AktionTasteKlassifizierung
Fokussieren interaktiver Elemente in der TabelleTABErforderlich
Verlassen interaktiver Elemente in der TabelleTABErforderlich
Bedienung interaktiver Elemente in der TabelleEntsprechend des jeweiligen ElementsErforderlich

Tastaturbedienung Tabelle (in einer Anwendung, die den virtuellen Cursor nicht unterstützt)

Permalink "Tastaturbedienung Tabelle (in einer Anwendung, die den virtuellen Cursor nicht unterstützt)"

Bei Anwendungen, die den virtuellen Cursor nicht unterstützen, sowie bei Tabellen, die mit role=grid ausgezeichnet wurden, muss jede Tabellenzelle den Fokus erhalten können, damit deren Inhalte mit Assistenztechnologie (z. B. Screenreader) wahrnehmbar sind. Es ist nicht ausreichend, wenn z. B. nur zeilenweise durch die Tabelle navigiert werden kann. Bei Tabellen in Anwendungen, die den virtuellen Cursor nicht unterstützen, wird zwischen dem Navigations- und Bearbeitungsmodus unterschieden:

  • In Navigationsmodus kann mit den Pfeiltasten zwischen den Zellen navigiert werden.
  • Im Bearbeitungsmodus können die interaktiven Elemente innerhalb einer Zelle bedient werden. Sofern die Zelle mehrere interaktiven Elemente enthält, so kann im Bearbeitungsmodus zwischen den Elementen navigiert werden.
AktionTasteKlassifizierung
Fokussieren der TabelleTABErforderlich
Verlassen der TabelleTABErforderlich
Zellenweise Navigation innerhalb der Tabelle im NavigationsmodusPFEIL AUF/AB/LINKS/RECHTSErforderlich
Horizontale Schnellnavigation im Navigationsmodus (Navigation zur ersten bzw. letzten Zelle in der aktuellen Zeile)POS 1, ENDEErforderlich bei vielen Spalten
Vertikale Schnellnavigation im Navigationsmodus (mit einer fest definierten Schrittweite)BILD AUF/AB

Hinweis: Die Schrittweite soll mit der Anzahl der sichtbaren Zeilen übereinstimmen.

Erforderlich bei vielen Zeilen
Schnellnavigation im Navigationsmodus (Navigation zur ersten bzw. letzten Zelle in der aktuellen Zeile)STRG+POS 1, STRG+ENDEErforderlich bei vielen Zeilen und Spalten
Schnellnavigation im Navigationsmodus (Navigation zur ersten bzw. letzten Zelle in der Tabelle)STRG+POS 1, STRG+ENDEEmpfohlen
Wechsel in den BearbeitungsmodusF2, EINGABE, [Texteingabe bei Eingabefeldern]Erforderlich, wenn Bearbeitungsmodus vorhanden
Wechsel in den NavigationsmodusF2, EINGABE, ESC

Hinweis: Bei ESC sollen die vorgenommenen Änderungen in der Tabellenzelle verworfen werden.

Erforderlich, wenn Bearbeitungsmodus vorhanden
Navigation innerhalb der Zelle im BearbeitungsmodusTabErforderlich, wenn Bearbeitungsmodus vorhanden
Bedienung interaktiver Elemente im BearbeitungsmodusEntsprechend des jeweiligen ElementsErforderlich, wenn Bearbeitungsmodus vorhanden
Bedienung eines interaktiven Elements im Navigationsmodus (sofern die Zelle nur dieses Element enthält und das Element nicht mit den Pfeiltasten bedient wird)Entsprechend des jeweiligen Elements (z. B. EINGABE für Links und LEER für Schalter oder Checkboxen)

Hinweis: Elemente, die mit den Pfeiltasten bedient werden, dürfen sich nicht in Tabellen ohne Bearbeitungsmodus befinden, da die Pfeiltasten zur Navigation durch die Tabelle genutzt werden.

Erforderlich, wenn kein Bearbeitungsmodus vorhanden
Bedienung eines interaktiven Elements im Navigationsmodus (sofern die Zelle nur dieses Element enthält und das Element nicht mit den Pfeiltasten bedient wird)Entsprechend des jeweiligen Elements (z. B. EINGABE für Links und LEER für Schalter oder Checkboxen)Empfohlen, wenn Bearbeitungsmodus vorhanden
Auswählen von Tabellenzellen, -zeilen, -spalten
  • Per Checkboxen bzw. Radiobuttons oder
  • LEER

Hinweis: Die Auswahl benachbarter und nicht-benachbarter Zellen, Zeilen oder Spalten erfolgt wie beim Element Mehrfach-Auswahlliste beschrieben.

Erforderlich, wenn Auswählen möglich ist

Tabelle 1: Zeigeinstrumentbedienung Tabelle

Permalink "Tabelle 1: Zeigeinstrumentbedienung Tabelle"
AktionTasteKlassifizierung
Bedienung interaktiver ElementeEntsprechend des jeweiligen ElementsErforderlich
Auswählen von Tabellenzellen, -zeilen, -spalten
  • Per Linksklick auf die Checkboxen bzw. Radiobuttons oder
  • Linksklick auf eine Zelle, die kein Bedienelement enthält

Hinweis: Die Auswahl benachbarter und nicht-benachbarter Zellen, Zeilen oder Spalten erfolgt wie beim Element Mehrfach-Auswahlliste beschrieben.

Erforderlich wenn Auswählen möglich ist

Programmierung/Schnittstellen

Permalink "Programmierung/Schnittstellen"
Nr.EigenschaftBeschreibungKlassifizierungReferenz
400RolleDie Rollen Tabelle, Tabellenbeschriftung, Tabellenzeile, Spaltenüberschrift, Zeilenüberschrift und Tabellenzelle müssen an die Accessibility API übermittelt werden (siehe Accessibility API).MussEN 301 549: 9.1.3.1, 11.1.3.1, 9.4.1.2, 11.4.1.2, 11.5.2.5
401RolleDie einzelnen Rollen für Tabellen dürfen nur für Datentabellen verwendet werden. Layouttabellen, die lediglich der visuellen Gestaltung und nicht der Anzeige tabellarischer Daten dienen, dürfen nicht mit diesen Rollen ausgezeichnet werden.MussEN 301 549: 9.1.3.1, 11.1.3.1
402RolleInhalte, die mit der Tabelle assoziiert sind, aber keine tabellarischen Daten enthalten (wie z. B. die Paginierung), dürfen sich nicht innerhalb der Tabelle befinden.MussEN 301 549: 9.1.3.1, 11.1.3.1
403NameDie Tabelle muss einen knappen und aussagekräftigen Accessible Name besitzen.MussEN 301 549: 9.2.4.6, 11.2.4.6, 9.4.1.2, 11.4.1.2, 11.5.2.5
404NameSofern die Tabelle eine Beschreibung besitzt, muss diese als Accessible Description übermittelt werden.MussEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5
405StatusDer Status der Tabelle muss an die Accessibility API übermittelt werden (siehe Elementstatus).

Hinweis: Das gilt z. B. für den Status „bearbeitbar“, „sortierbar“ oder „auswählbar“, sofern diese Funktionen nicht explizit über fokussierbare Bedienelemente wahrnehmbar ist.

MussEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5
406StatusDer Status der Tabellenzellen muss an die Accessibility API übermittelt werden (siehe Elementstatus).

Hinweis: Das gilt z. B. für den Status „gewählt“, „sortiert“ oder „deaktiviert“.

MussEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5
407WertDer Inhalt der Tabellenzellen muss an die Accessibility API übermittelt werden (siehe Accessibility API).MussEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.7
408Spalten- und ZeilenüberschriftenWenn die Tabelle Spalten- und Zeilenüberschriften besitzt, so müssen diese für jede Zelle an die Accessibility API übermittelt werden.MussEN 301 549: 9.1.3.1, 11.1.3.1, 11.5.2.6
409Desktop: ElementhierarchieDie Eltern-Kind-Beziehungen der Elemente innerhalb der Tabelle müssen an die Accessibility API übermittelt werden.MussEN 301 549: 11.5.2.9
410BedienungDie Tabelle bzw. die darin enthaltenen interaktiven Elemente müssen mit Assistenztechnologie erreicht, bedient und verlassen werden können (siehe Accessibility API).MussEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.12, 11.5.2.17
411AktualisierungAktualisierungen hinsichtlich der Tabelleninhalte und dem Status der Tabellenzellen müssen an die Accessibility API übermittelt werden (siehe Accessibility API).MussEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.15
412Desktop: PositionGröße und Position der Tabellenzellen und der darin befindlichen interaktiven Elemente müssen an die Accessibility API übermittelt werden (siehe Fokusindikator).MussEN 301 549: 11.5.2.5

Praxistipp Tabellen in Desktop-Anwendungen

Permalink "Praxistipp Tabellen in Desktop-Anwendungen"

Einige Programmiersprachen für Desktop-Anwendungen ermöglichen nicht die Erstellung von Tabellen, welche die Anforderungen an die Navigation innerhalb der Tabelle (mit den Pfeiltasten) erfüllen. Stattdessen kann durch die Tabelle nur zeilenweise navigiert werden. Somit kann z. B. mit einem Screenreader die Tabelle nicht strukturiert wahrgenommen werden (weil die gesamte Zeile, ggf. ohne die dazugehörigen Spaltenüberschriften) ausgegeben werden. Darüber hinaus können dann meist auch die Bedienelemente in der Tabelle nicht mit der Tastatur bedient werden.
In folgenden Ausnahmefällen ist die Verwendung dieser Tabellen akzeptabel, sofern die verwendete Technologie keine Alternative anbietet:

  • Die Tabelle enthält nur zwei Spalten oder
  • die Tabelle enthält maximal fünf Spalten und die Spaltenüberschriften und Zellinhalte sind kurz (maximal ein bis zwei Worte oder Zahlen) und
  • die Spaltenüberschriften werden bei der Navigation durch die Zeilen mit ausgegeben oder die Ausgabe ist nicht notwendig, weil sich der Zweck der Spalten aus dem Kontext (z. B. dem Zellinhalt) ergibt und
  • die Zeilen und Spaltenüberschriften enthalten keine Bedienelemente bzw. alle Bedienelemente sind mit Assistenztechnologie wahrnehmbar (Rolle, Zweck, Status) sowie mit der Tastatur bzw. Assistenztechnologie bedienbar.

Sofern diese Anforderungen nicht erfüllt werden können, muss eine andere Darstellungsform für die Daten gewählt werden.

Interaktive Elemente in der Tabelle

Permalink "Interaktive Elemente in der Tabelle"

Einige Programmiersprachen für Software ermöglichen nicht die Erstellung von Tabellen, welche die hier genannten Anforderungen an die Bedienung interaktiver Elemente innerhalb von Tabellen erfüllen. In diesem Fall sollen interaktive Elemente innerhalb der Tabellen vermieden werden. Stattdessen sollen die Tabellen dann nur zur Anzeige von Daten verwendet werden und die zugehörigen interaktiven Elemente sollen sich außerhalb der Tabelle befinden. Beispiele:

  • So können vor der Tabelle ein oder mehrere Bedienelemente eingefügt werden, mit denen die Sortierung der Tabelleninhalte gesteuert wird.
  • Oberhalb der Tabelle kann ein Formular zum Filtern der Tabelleninhalte eingefügt werden.
  • Oberhalb der Tabelle kann ein Schalter eingefügt werden, über den sich ein modaler Dialog öffnen lässt. Im modalen Dialog kann die Tabelle vollständig mit der Tastatur konfiguriert werden (z. B. Anpassen der Spaltenbreiten).
  • Oberhalb der Tabelle befindet sich eine Werkzeugleiste, mit der ausgewählte Tabellenzeilen bearbeitet oder gelöscht werden können.

Alternativ können Tastaturkürzel oder Kontextmenüs verwendet werden, um die Tastaturbedienung zu ermöglichen. In diesem Fall muss auf diese Bedienalternative in der Anwendung und Hilfe hingewiesen werden.
Eine weitere Möglichkeit besteht darin, zusätzlich zu den ggf. nicht barrierefreien Bedienelementen in der Tabelle die barrierefreie Bedienung über Bedienelemente außerhalb der Tabelle zu gewährleisten.

Informationen zu diesem Artikel

Gerne können Sie uns Feedback per E-Mail zu unserer Handreichung senden!