Navigating tables
There are two identically presented tables on this page.
Activity - navigating a poorly marked-up table
Use VO + Cmd + t to jump to the first table.
You can use VO + left/right arrow keys to progress through the table in source‐code order, cell by cell, row by row. Of course this means it isn't the most speedy of navigation modes and doesn't use the table as intended (looking up rows and columns).
So you can also use VO + up/down arrow keys to move vertically too.
On this first table you will hear the number of the column and row you are on read out along with the contents of the cell you are in, but there is no other information. On anything but a tiny table it will be really easy to lose track of what you are looking at.
Poorly marked-up table
This table doesn't use any markup to identify the relationships between cells. Each cell is just a td.
| Date | Amount | Status |
| June 2020 | £109.80 | Complete |
| July 2020 | £155 | Complete |
| August 2020 | £145.40 | Pending |
Activity - navigating a well marked-up table
Now try the second table.
You'll hear a difference immediately. Where the first table was just announced as “table” the second actually has a name to let you know what the contents are going to show. This is especially important where there might be more than one table on the page as this will assist users in finding the data they want.
As you move around using VO + arrow keys you get some additional information compared to the first one.
As you move from column to column you will hear the column heading announced and as you move from row to row you will hear the row heading announced. You can imagine how much difference this can make to finding information in a table.
Well marked‐up table
This table uses th tags and scope attributes to identify how the data is related, along with a caption.
| Date | Amount | Status |
|---|---|---|
| June 2020 | £109.80 | Complete |
| July 2020 | £155 | Complete |
| August 2020 | £145.40 | Pending |
Captions
By adding a caption to our table we make it much easier for screen‐reader users to both understand what is in the table and to find it in a page where there are multiple tables.
The caption acts as an accessible name for the table which as you heard is announced when the user moves to the table, but is also displayed in the Rotor.
Extra navigation for tables
Large tables can be quite time-consuming to move through row-by-row for screen-reader users, so they also have some additional key commands which they can use to make moving around them much easier.
Activity
Voiceover doesn't have as many in-table navigation commands as JAWS or NVDA, but it has a couple which do help. Try these commands with the table below once you are in a cell.
- Move to first cell of the table
- VO + Home
- or on laptops VO + fn + Left arrow
- Move to last cell of the table
- VO + End
- or on laptops VO + fn + Right arrow
| Date | User | Amount | Status |
|---|---|---|---|
| June 2020 | John | £109.80 | Complete |
| July 2020 | Kim | £155 | Complete |
| August 2020 | Josh | £89.50 | Complete |
| September 2020 | Ali | £60 | Complete |
| October 2020 | Carl | £115.20 | Pending |
Tables can be quite complex elements to navigate and often hold a lot of data the user will need to process. We can make that much easier by ensuring tables are marked up correctly.
Key takeaway
Give tables captions to help identify what the table is about. Correctly mark up your tables to give meaningful associations between your data.