Saying farewell to HTML tables

A very important underlying feature of Orbeon Forms is the grid. A grid groups controls in rows and columns, and can optionally repeat rows.

When we first implemented grids many years ago, we used tables for the underlying HTML markup. In HTML, tables serve two main purpose:

1. Presenting tabular data (which is their original purpose).
2. Laying out other content.

The reason that tables got to be used for laying out content is that they offered layout features which no other HTML and CSS construct supported. Over time, however, CSS has introduced most of the necessary support, in particular display: table and related, as well as the more recent Flexible Box Layout (also known as "flexbox").

Because assistive technology such as screen readers usually describe tables to the user as being tables when reading a page, there is widespread agreement that one should not use tables for purposes other than presenting tabular data so as to not confuse the user.

So in the upcoming Orbeon Forms 2016.2 we have changed the layout of grids to no longer use HTML tables when possible.

There are two cases where we still use HTML tables:

• Grids which contain "row spans".
• Repeated grids.

The case of row spans is hopefully a temporary limitation: it is just plain harder to emulate row spans with pure CSS, and we hope that this won't be a big issue because the use of row spans in Orbeon Forms is fairly rare. Further, we now place the ARIA presentation role on such tables to help screen readers.

For the case of repeated grids, using HTML tables makes some sense because the data is actually presented in tabular form with headings, rows and columns.

The specific HTML layout is documented here.

As an aside, we have also removed the use of HTML tables in the error summary component.

We hope you like these changes which will be available in Orbeon Forms 2016.2!