Introduction to screen‐readers: NVDA Edition

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

Dates and amounts
Date Amount Status
June 2020 £109.80 Complete
July 2020 £155 Complete
August 2020 £145.40 Pending


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)
Dates and amounts
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.

Next, content