3 Tables

Adding Header Cells

Column Headers

Tables must have header cells. To add them, highlight the cells that should be headers, click the table icon dropdown in the toolbar, hover over “cell” and click “table cell properties”. Then, next to “cell type,” click the dropdown and select “header cell.”

Row Headers

For row headers, you should set the scope to “row”.

Row & Column Groups

Some headers span multiple rows/columns. The scope of these must be set to “row group” or “column group” respectively.

Resources

• WebAIM’s Tables Tutorial (includes information about complex tables)

Table Alternatives

Sometimes, authors will use tables to visually format information in a specific but unfortunately inaccessible way. Here are some example cases and their solutions:

Text Boxes

Sometimes, authors will want a text box, but use a table. It is hard to catch sometimes, since they can look like text boxes (especially in the visual editor), but are not text boxes semantically.

Simply replace it with a standard text box in the “Textboxes” dropdown

If they want it customized (border color, only top and bottom borders, thickness, padding, margins, etc.), this can be done with classes. Always try to preserve original formatting.

Visually a Table, Functionally a List: ARIA Lists

Do not use ARIA until you are very familiar with it. No ARIA is better than bad ARIA.

This type of table is commonly used in language learning textbooks. Usually, it is a way to list out words (e.g., the options for a non-H5P fill in the blank activity). The key is that there are no header cells and no need for header cells. Functionally, it is just a list of words.

This is what the HTML markup will look like:

This is what the accessibility tree in the DOM will look like: