3b – Barrierefreie Tabellen im WYSIWYG Editor (DE)

Barrierefreie Tabellen im WYSIWYG Editor

Dokumentation

Maileon

Dokumentation für das XQueue System

Diese Dokumentation darf ohne vorherige schriftliche Genehmigung durch die XQueue GmbH weder teilweise noch ganz reproduziert, in Datenbanken gespeichert oder in irgendeiner Form übertragen werden. Der Inhalt dieser Dokumentation dient ausschließlich zu Informationszwecken, kann jederzeit geändert werden und stellt keine Verpflichtung seitens der XQueue GmbH dar. Für Fehler der in dieser Dokumentation enthaltenen Informationen wird keine Haftung übernommen.

Christian-Pleß-Straße 11-13
63069 Offenbach am Main

Einleitung

Diese Projektdokumentation beschreibt das Setup barrierefreier Tabellen im WYSIWYG-Editor für Newsletter-HTML. Da Newsletter traditionell mit verschachtelten Tabellen zur Layoutsteuerung aufgebaut sind, ist eine rein semantische Strukturierung über native HTML-Tabellenelemente (<table>, <th>, <td>, <thead>, <tbody>) nicht ausreichend. Um dennoch eine korrekte Wahrnehmung durch Screenreader zu gewährleisten, wird eine differenzierte Rollen-Annotation eingesetzt.

Dabei werden Layout-Tabellen mit role=“presentation“ oder role=“none“ von echten Datentabellen abgegrenzt, während in inhaltstragenden Tabellen die Rollen table, row, columnheader, rowheader und cell gezielt vergeben werden. So kann gesteuert werden, welche Tabellen als strukturelle Layout-Hilfen ignoriert und welche als echte Datenstrukturen interpretiert werden. Dieses Setup ermöglicht eine klare Trennung zwischen visueller Darstellung und semantischer Bedeutung – eine Grundvoraussetzung für barrierefreie Newsletter im WYSIWYG-Editor.

Konfiguration der Tabellen

Damit die Tabellenstruktur ordnungsgemäß markiert werden kann, wird eine „Wrapper“ Tabelle benötigt, welche markiert, dass alles, was darin enthalten ist, als zusammengehörige Tabelle zählt.

Hinweis: dies wurde über eine Struktur mit einer Spalte realisiert. In Maileon ist es NICHT möglich, dass Strukturen in Strukturen abgelegt werden, es müssen die Unterelemente mittels „Split“-Blöcken realisiert werden. Sollte das Element bereits ein vertikaler Split (anklicken und oben rechts nach dem Typ schauen), dann sollte es möglich sein diesen direkt in den neuen Tabellenwrapper zu „ziehen“.

Ansicht der 2 Blocktypen im Editor:

Schritt 1: Zieldesign

Zunächst wird festgelegt, welche Elemente ind er Tabelle enthalten sind, welche Bedeutung sie haben und, welche wiederholt werden.

Der untere Teil ist kein Table-Footer, ein Table Footer wäre ein Element, wo z.B. die Summen pro Spalte stehen.

Schritt 2: Wrapper Tabelle einfügen

Dazu wird eine Struktur mit einer Spalte eingefügt.

 

Schritt 3: Wrapper konfigurieren

Wenn der Wrapper angeklickt ist können rechts unter Einstellungen die „Barrierefreiheits-Einstellungen“ ausgewählt werden.

Dort muss folgender Punkt ausgewählt werden:

Schritt 4: Einfügen der Header

Es muss nun ein Split eingefügt und konfiguriert werden. Dazu einen Split hineinziehen und formatieren. Leider ist es meist nicht möglich bestehende „Vertikale Splits“ einfach aus dem alten Layout zu übernehmen, da diese als Strukturen aufgebaut wurden.

Es empfiehlt sich zunächst das Design festzulegen, etwa fette Schrift, 5 Pixel Abstand.

Dann kann die korrekte Anzahl von Zellen erstellt, die Breite und Ausrichtung definiert und die Zellen benannt werden.

Anmerkung: Um Spaltenanzahl oder Breite zu definieren muss immer der darüberliegende Split ausgewählt werden (Icon in der Mitte):

Zunächst die Zahlen der alten Tabelle (falls vorhanden) merken:

Das Ergebnis:

Schritt 5: Markieren der Header-Zellen als Header

Nun klickt man jede einzelne Zelle (auch leere Zellen!) an und wählt unter den Barrierefreiheits-Einstellungen die Rolle „columnheader“ aus.

Schritt 6: Markieren der Headerzeile als Zeile

Leider gibt es keine Möglichkeit die Headerzeile als „Headerzeile“ zu markieren. Die einzige Möglichkeit ist sie als „row“ zu markieren. Macht man das nicht, wird diese Zeile nicht als Überschriften für Rows vorgelesen.

Schritt 7: Daten-Zeilen einfügen

Datentabelle analog zum Header einfügen und konfigurieren. Zur Vereinfachung ziehen wir hier im Beispiel einfach den „vertikalen Split“ (Artikelzeile) in das neue Konstrukt. Dabei muss darauf geachtet werden, dass der blaue Rahmen richtig erscheint.

Richtig:

Das Element wird in die korrekte Unterstruktur gezogen.

Falsch:

Das Element wird in den Slot im Newsletter NACH dem eigentlich angestrebten Element gezogen.

Schritt 8: Definieren der Zellen

Nun müssen die Inhalte noch als „cell“ markiert werden, damit der Screenreader weiß, dass er zu jedem Wert auch einen Header vorlesen soll.

 

Bei Fragen zögern Sie nicht, uns zu kontaktieren!

T. 069 83008980

Maileon

 

Christian-Pleß-Straße 11-13
63069 Offenbach am Main