3b – Accessible Tables in the WYSIWYG Editor

Introduction

This project documentation describes the setup of accessible tables in the WYSIWYG editor for newsletter HTML. Since newsletters are traditionally built using nested tables to control layout, purely semantic structuring using native HTML table elements (<table>, <th>, <td>, <thead>, <tbody>) is not sufficient. To still ensure correct perception by screen readers, differentiated role annotations are used.

Layout tables are separated from real data tables with role=“presentation“ or role=“none“, while roles such as table, row, columnheader, rowheader, and cell are deliberately assigned within content-bearing tables. This allows control over which tables are ignored as structural layout aids and which are interpreted as real data structures. This setup enables a clear separation between visual presentation and semantic meaning – a basic requirement for accessible newsletters in the WYSIWYG editor.

Configuration of the Tables

In order for the table structure to be marked correctly, a wrapper table is required, which indicates that everything contained within it belongs to one associated table.

Note: This was implemented using a one-column structure. In Maileon it is NOT possible to place structures inside structures; sub-elements must be implemented using “Split” blocks. If the element is already a vertical split (click it and check the type in the top right), it should be possible to drag it directly into the new table wrapper.

View of the two block types in the editor:

Step 1: Target Design

First, define which elements are contained in the table, what their meaning is, and which elements repeat.

The lower part is not a table footer. A table footer would be an element where, for example, column totals are displayed.

Step 2: Insert Wrapper Table

Insert a structure with one column.

Step 3: Configure Wrapper

Once the wrapper is selected, the Accessibility Settings can be chosen on the right under Settings

The following option must be selected there.

Step 4: Insert the Headers

A split must now be inserted and configured. To do this, drag a split inside and format it. Unfortunately, in most cases existing “vertical splits” from older layouts cannot simply be reused, since they were created as structures.

It is recommended to first define the design, for example bold text and 5-pixel spacing.

Then create the correct number of cells, define width and alignment, and name the cells.

Note: To define the number of columns or width, the split above it must always be selected (icon in the middle).

First, make a note of the numbers from the old table (if available).

Result:

Step 5: Mark Header Cells as Headers

Now click each cell (including empty cells!) and select the role “columnheader” in the Accessibility Settings.

Step 6: Mark Header Row as a Row

Unfortunately, there is no option to mark the header row as a “header row”. The only option is to mark it as “row”. If you do not do this, this row will not be read as the header for rows

Step 7: Insert Data Rows

Insert and configure the data table in the same way as the header. To simplify things, in this example we simply drag the “vertical split” (article row) into the new construct. Ensure that the blue frame appears correctly.

Correct:

The element is placed in the correct substructure.

Incorrect:

The element is placed in the newsletter slot after the intended element.

Step 8: Define the Cells

Now the content must be marked as “cell”, so that the screen reader knows that it should read a header for each value.