Introduction to screen‐readers: Voiceover MacOS Edition

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.

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 as you heard is announced when the user moves to the table, but is also displayed in the Rotor.

Voiceover Rotor showing how a caption affects the accessible name

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.


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
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