0
votes

For an app a table, that is dynamically populated with data, is important.

How should I do the tab order for tables of data? I searched for guidelines, but could not find a good one so far.

Possibilities I see are:

  • Only include the table itsef using a 'tabindex=0' attribute in the 'table' tag.
  • Include the table rows in the tab order with a 'tabindex=0' attribute in the 'tr' tag.

I guess using the arrow keys will allow for detail navigation.

What do you advice?

1

1 Answers

1
votes

The table itself and the rows themselves are generally not keyboard focusable because they're not interactive elements. If the row was selectable or expandable, then maybe it could be focusable but it's usually an element in the table row (or more accurately, an element in a the table cell) that is selectable or expandable.

Without more details on the behavior you're trying to achieve, it's hard to give exact advice, but my initial thought is that none of the table elements proper (<table>, <tr>, <td>) should be focusable.

Regarding arrow keys for navigation, that's the pattern for a grid, which is a type of table that has editable cells (similar to a spreadsheet). Again, I don't have enough info on your situation to know if a grid is what you're trying to create.

For screen reader users, they already have a way to navigate to the table and navigate within the table using the screen reader shortcut keys, so don't worry about trying to make things focusable for screen reader users.