How to handle tables
Tables consist of solely browsable elements and do not offer any interactivity. To work through and understand the examples in this chapter, it is good to have a screen reader at hand and know how to handle it. In addition to this, there are some tools and bookmarklets that can be a huge help in your development workflow.
Keyboard only handling
For keyboard only users, tables do not offer any special functionality. So there's nothing to say here. Still, you may want to check out How to browse websites using a keyboard only.
Screen reader handling
For desktop screen reader users, tables offer a lot of special functionalities. Here follows a quick nomination of the most important features. Besides this, check out How to read websites using a desktop screen reader.
T: jump to next table
When reaching a table, screen readers will announce the number of rows and columns, together with the table's
<caption> (if available):
My hobbies. Table with 4 rows and 3 columns.
You can add
Shift to most shortcuts to reverse direction. For example press
Shift + T to jump to the previous table.
Both NVDA and JAWS provide a special navigation within tables:
Ctrl + Alt + Left/Right/Up/Down: navigate to left/right/upper/lower cell
In addition to the content of the currently focused cell, this announces the column's and/or row's header cells,
Row 1, column 1: Name.
JAWS braille viewer
In JAWS' braille viewer, next to the cell's content, the current row and column numbers are displayed like this:
r1c2 for row 1, column 2.
This conveys the tag names of a lot of HTML elements, including tables. It allows fast visual examination of wrong (or missing) elements.
For more details, see Contents Structured.