Source: https://cd.union-investment.de/grundlagen/Grafikelemente/tabellen
[...]
Der Tabellenaufbau vermittelt Klarheit und Übersichtlichkeit. Dies wird durch ein reduziertes Farbspektrum ebenso erreicht wie durch den Verzicht auf vertikale Trennlinien. Auch die seitlichen Tabellenränder bleiben offen.
Bitte beachten
Im Rahmen der Barrierefreiheit müssen Texte einen ausreichend hohen Kontrast zum Hintergrund aufweisen. Eine Hervorhebung von Zellen, Spalten oder Zeilen allein durch Farbe reicht nicht aus, wenn dadurch Information vermittelt werden soll. Es wird dann ein zusätzliches, farbunabhängiges, visuelles Merkmal benötigt, beispielsweise Fettung des Textes.
Anwendungsbeispiele
Stilistik von Tabellen
Farbigkeit von Tabellen
Typografie in Tabellen
Barrierefreie Tabelleninhalte
Der Tabellenstil von Union Investment zeichnet sich durch einen reduzierten Aufbau aus. Gliedern Sie Tabellen durch horizontale Trennlinien. Für diese empfehlen wir eine Linienstärke von 0,5 Pt für Printmedien, 1 Px in Digitalmedien und 0,75 Pt in Office-Anwendungen. Sofern sie für die Lesbarkeit sinnvoll sind, können Sie zusätzlich vertikale Trennlinien hinzufügen. Die seitlichen Tabellenränder stehen immer offen.
Optional können großzügig aufgezogene Hintergrundflächen die gesamte Tabelle samt Überschrift einfassen.
Für eine bessere Orientierung können Sie Zeilen und Spalten durch Grau oder UI-Blau in unterschiedlichen Abstufungen flächig hervorheben.
Die Farbigkeit der Trennlinien ist je nach Medium unterschiedlich:
Da es sich hierbei um rein strukturgebende Elemente handelt, ist das Erfüllen des Mindestkontrast (3:1) seitens WCAG nicht verpflichtend.
Die Hintergrundflächen können Weiß, UI-Blau oder Grau sein, allerdings sollten UI-Blau und Grau nicht innerhalb einer Tabelle gemischt werden. In Print- und Office-Anwendungen können Flächen in UI-Blau200 oder Grau200 eingesetzt und sollten innerhalb eines Mediums konsistent sein. Sie können jedoch aus inhaltlichen Gründen kombiniert werden.
In Digitalmedien sind neben Weiß nur UI-Blau100 und Grau100 als Hintergrundfarben oder Hervorhebung möglich.
Für Hervorhebungen kann für Print- und Office-Anwendungen UI-Blau200, UI-Blau300, UI-Blau400 sowie Grau200, Grau300 und Grau verwendet werden. Zusätzlich können in allen Medien entsprechende Einträge in bold gesetzt werden.
Für Tabelleninhalte und -überschriften gelten die Prinzipien zu Typografie aus den Basiselementen.
Inhalte innerhalb von Tabellen können links- bzw. rechtsbündig oder zentriert ausgerichtet werden.
Auch die vertikale Ausrichtung innerhalb der Zelle sowie die Randabstände sind frei wählbar. Wichtig ist ein konsequenter Stil innerhalb eines Mediums.
Um barrierefrei zu sein, muss eine (digitale) Tabelle Spalten- und/oder Zeilenköpfe aufweisen, damit assistive Technologien beim Interpretieren der Zellen Kontext geben können, welcher Wert was bedeutet. Desweiteren darf es innerhalb einer Tabelle keine leeren Zellen geben. Dies gilt insbesondere für Zellen in der Kopfzeile. Da ein Screenreader Tabellen von links nach rechts interpretiert, mit Startpunkt links oben, können leere Zellen zu Missinterpretationen führen. Generell sollte daher für jede Zelle ein geeigneter Textinhalt gefunden werden. Im Web kann der Spaltenkopf programmatisch visuell verborgen werden.
Neben Text (book, bold), Verlinkungen und Icons können auch die Risikoklassen Tabelleninhalt sein. Damit die Risikofarben visuell barrierefrei sichtbar sind, werden die Risikomarker mit einer dunklen Konturlinie umrandet.
Nächstes Kapitel Schaubilder
Drucken Nach oben
