Form Controls without Labels in a Table

Sometimes it is necessary to have form controls within tables. And while tables provide their own labeling mechanism, it is important that each and every control still has its dedicated label.

Forms in tables are rather rare, but they can be a necessity. Be sure though you are using tables not simply for layout purposes – the days of layout tables are long gone. Forms in tables only make sense if they are handling data that has a tabular structure itself.

It is important that the table itself is marked up properly using table headers <th>. This allows navigating the table (and the contained form controls) using desktop screen readers’ table navigation: simply press Ctrl + Alt + Up/Down/Left/Right when inside a table.

But what about navigation in focus mode (using the Tab key)?

As we know from General good form example, each and every form control ought to have its own label.

But when placing form controls into a table, one could argue that proper table headers should be a suitable substitute for “real” labels. Technically speaking, this sounds reasonable.

So take a look at the following example and try to navigate it using the Tab key:

Working Example

Explanation

Firefox announces both the table’s column and row headers like a charm in focus mode. For example, when focusing on the “insurance” checkbox in the row “DHL”:

Insurance. DHL. checkbox not checked.

But Internet Explorer does only announce the row headers:

DHL. checkbox not checked.

What a bummer.

Code

<form>
  <table>
    <thead>
      <tr>
        <th>
          Delivery provider
        </th>
        <th>
          Insurance
        </th>
        <th>
          Comment
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>
          <input id="dhl" name="provider" type="radio" /><label for="dhl">DHL</label>
        </th>
        <td>
          <input type="checkbox" />
        </td>
        <td>
          <textarea></textarea>
        </td>
      </tr>
      <tr>
        <th>
          <input id="ups" name="provider" type="radio" /><label for="ups">UPS</label>
        </th>
        <td>
          <input type="checkbox" />
        </td>
        <td>
          <textarea></textarea>
        </td>
      </tr>
      <tr>
        <th>
          <input id="post" name="provider" type="radio" /><label for="post">Post</label>
        </th>
        <td>
          <input type="checkbox" />
        </td>
        <td>
          <textarea></textarea>
        </td>
      </tr>
    </tbody>
  </table>
</form>

table
  border-collapse: collapse

td, th
  border: 1px solid

NIL