Check / Uncheck all in a Table

TL;DR: Unless you have user testing results saying otherwise, maybe put a check-all checkbox outside the table.

The rest of this post is an awkward mash-up of my posts Don’t Turn a Table into an ARIA Grid Just for a Clickable Row and Check-All / Expand-All Controls with a little bit of Uniquely Labeling Fields in a Table.

Demo

I made a demo. Try it out yourself!

Cruft-less version.

In the Column Header

The biggest challenge to placing the check-all checkbox in the column header is that its accessible name becomes the column header for all other checkboxes in the column. A second challenge is deciding on a visible label (wide column) or not (smaller target size for pointer users and hassle for voice users).

<th>
  <input type="checkbox" id="ChkAllColumn">
  <span>
    <label for="ChkAllColumn">Select all books</label>
  </span>
</th>

Consider screen reader users who navigate into the column, whether by table navigation or tabbing into that column for the first time to put focus on a checkbox. What the screen reader exposes (audio or Braille) can be confusing. In VoiceOver on macOS I sometimes got the row checkboxes to announce the wrong state, but could not figure out what caused it each time (hence no bug report).

In the Caption

Putting the check-all checkbox in the <caption> means the table’s name is always going to be at least the accessible name for the checkbox. I say “at least” since you may be tempted to stuff more in the caption.

<caption>
  <input type="checkbox" id="ChkAllCaption">
  <label for="ChkAllCaption">Select all books</label>
</caption>

A screen reader user can navigate the table without a confusing column header. The check-all checkbox will be in the context of the table. The label is visible for voice control users. But navigating between tables can be annoying when the table name has been co-opted for the checkbox label.

Outside the Table

When outside the table, the check-all checkbox doesn’t risk interfering with table use — table navigation, control announcement, accessible names, checkedness, and so on. The risk is that users unfamiliar with the page may move past it looking for the checkbox in the column header.

<p>
  <input type="checkbox" id="ChkAllOutside">
  <label for="ChkAllOutside">Select all books</label>
</p>
<table>

How well users recognize the purpose of the check-all checkbox comes down to your design and overall context. Programmatically, there’s a visible label for voice users and no part of the table has been co-opted. Hence, a design exercise.

Wrap-up

Unless you have user testing results saying otherwise, maybe put a check-all checkbox outside the table.

Alternatives may give you a check-all field with a confusing and verbose name or a table with a complex or meaningless name. They may also result in smaller targets or wider columns. Granted, even the pattern I suggest can be a problem for your users, but some of that can be mitigated with training, documentation, context, and / or consistency.

If you have other suggestions (ideally with examples and results of use), toss them into the comments.