Create accessible complex tables in HTML5 forms

The default implementation of tables in HTML5 Forms uses HTML DIV elements to render a table. Rendering involves using ARIA roles to satisfy the accessibility requirements.

To avoid accessibility issues with screen-readers which do not fully support the ARIA-roles used with  data-tables, HTML5 Forms provides an alternate rendition for the tables. These tables are based on the new table format introduced in Designer which also supports:

• Row Headers
• Row-span

</extras>
    <text name="complexTable">1</text>
</extras>

To create a row span, select consecutive cells of a table in the same column, right-click on the selection, and then click Merge Cells.

Note: Creating a row-span works for leftmost cells only.

To mark a row as row header, select all cells in the row, right-click on the selection, and then click Mark Header.

To mark a cell as column header, select any cell in the column, right-click on the selection, and then click Mark Header.

• Lack of support for grow-able fields if rowspan is used in the table
• No support for nested tables (tables within table cells)
• Support for rowspan is limited to the header rows and header cells
• Support is limited to regular tables
• No support for data prefills in tables with rowspan > 1