There are two identically presented tables on this page.
Activity - navigating a poorly marked-up table
Use t to jump to the first table. NVDA will tell you how many columns and rows it has.
You can use up/down arrows 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).
However you can also use Control + Alt and either left/right arrow or up/down arrow keys to move horizontally and 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 distinction between any of the cells.
Poorly marked-up table
| 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 Control + Alt + arrow keys you get some additional information.
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
| 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 is announced when the user moves to the table.
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 - extra navigation commands
Try these commands with the table below - don't expect to remember all of these but it is good to understand some screen-readers have this option.
- Move to first row (current column)
- Ctrl + Alt + Page Up
- Move to last row (current column)
- Ctrl + Alt + Page Down
- Move to start of current row
- Ctrl + Alt + Home
- Move to end of current row
- Ctrl + Alt + End
- Read entire column
- NVDA + Ctrl + Alt + Up arrow
- Read entire row
- NVDA + Ctrl + Alt + Left arrow
- Move to start of table (also works for other types of containers like lists)
- Shift + Comma
- Move past end of container (also works for other types of containers like lists)
- Comma
| 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.