Making Table Based Forms Accessible

You have designed a table which contains many fillable forms, edit fields, or checkboxes. This table is pretty huge, and you want to make sure that it is accessible. You don't need to spend hours on labeling each field, especially if the table is not automatically generated.

In general, what you need to do with every single form field is to attach a label to it, both visually, and programmatically. One way around it would be to label each field individually, but the visual results won't be too appealing having to repeat the same label over and over again. However, programmatically it will be correct.

UInstead, focus on coding your table properly. When you use row or column headers, you label that entire row or column, and this label will be applicable to the fields as well.

For instance, use TH tags and scope attributes as needed. If the label is the first cell of the row or column, you can ommit the scope attribute.

When people use a screen reading technology, this way the labels associated to the form fields will be announced properly.

You still need to make sure that you display the labels on the screen when the table is huge and requires scrolling.

For more information, read how to design accessible tables.