Using Tables in Forms

While there are several ways to organize controls on a page, many users, especially those not familiar with HTML/CSS, will choose to use a table to provide the layout of the form page. In most cases, this isn't an issue. Process Director will automatically refactor tables to display responsively as the width of the user's viewport changes. On screens with narrow widths, tables will be refactored to display in a single column. This responsiveness change happens automatically, and requires no special configuration.

This use of tables may, however, create an accessibility issue. For tables inserted manually into a Form, the container table markup & structure may be parsed by the browser before the Form field content, and some rows may be announced as 'table row blank' to the user, because the Form container hasn't yet been parsed. This issue can result in screen readers being unable to convey the table contents correctly to users of screen reader software/devices for the disabled.

To fix this, you must set the table as a "presentation" table to change its role from being parsed as a data table to merely serving as a layout container. To do this, click the Source button on the top toolbar to open the Form's HTML source. Find the TABLE tag in the HTML source, and add the attribute, role="presentation", to the HTML tag.

Once you've done so, click the Source button again to return to the visual designer, then save the Form. This should resolve the accessibility issues that might arise from the table.

As the form designer, you must test tables for accessibility, and add the "presentation" role to tables where appropriate.

Process Director, in some cases, also inserts tables automatically, to control the layout of some controls. Process Director automatically adds the appropriate "role" attribute for tables it inserts into forms.