How to make table header conrols keyboard accessible?

Question

I am implementing a data gird pattern for an interactive HTML table. The header cells can be used to change the appearance of the data.

The ARIA pattern (see Example 2) uses Spacebar key to sort rows, but I would like to add some custom buttons to control other aspects, like filtering rows.

How would a user access those custom buttons in the table header?

Some options that I have considered:

• Alt + Spacebar to activate the custom button. This only works if there is only one custom button and the shortcut might not be discoverable.
• Tab to move into custom button list. Works with multiple buttons and can probably be discovered by poking around, but the expectation is that Tab moves out of the table.
• Alt + ArrowDown to move into custom button list. This is what LibreOffice Calc uses to access quick-filter. Not sure it's discoverable.
• Give up and put those buttons outside the table altogether.

Any pointers to relevant documentation or examples would be appreciated.

Answer 1

Keyboard controls can help your application to be more efficient for the user, however if it is implemented poorly it could be a roadblock to them. One consideration that you have to take is that HTML allows you to have combination of keys to make the task you are intended to. For example if spacebar is already used to sort rows, don't try to misuse what is already in ARIA. One good example is f r, to "filter rows" like in the example below. Have in mind that it could be misinterpreted for file read.

<table style="width:100%">
  <tr>
    <th accesskey="f r">Company</th>
    <th accesskey="f r">Contact</th>
    <th accesskey="f r">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table> 

Another point to have into consideration is the language of the page, because the screen reader will inform the user which language is the page, and that will determine how the user will interact with your accesskeys. It is not the same f for file in English rather than a for file in Spanish.

Finally, the last point is that not all the browser or systems have the same keystrokes, like Shift + Alt + [Accesskey] on Windows, and Ctrl + Option + [Accesskey] on Mac.

I'll leave you this link where you can read further about it. Keyboard Accessibility

🎨🦾

Answer 2

I settled for the the following solution:

If column can be sorted, the header cell text is wrapped in tag. Clicking on the button triggers sorting.

If the cell needs additional buttons, they can just be put alongside.

When focusing on the cell with a button in it, the focus moves to the button, not the cell itself.

Since I use arrow key navigation, moving between buttons inside cells can be done with arrows. If arrow key is used to select next button inside the cell, but there are no more buttons in that direction, the focus moves to the next cell.

Similar with moving into the cell. If buttons are in a row, moving into a cell focuses the first button. If moving in from the right side, the last button is focused.