NVDA is a free screen reader that Windows users can use. In this video, we use NVDA in Chrome to demo:
- Why accessible tables matter for NVDA
- How to navigate tables with NVDA
- How NVDA announces an accessible and inaccessible table
Transcript
Learning how to test with a screen reader means understanding how a screen reader interacts with and announces different elements. In this video series, we’ll listen to NVDA announce accessible and inaccessible website elements to help you familiarize yourself with how it should sound.
This video is all about tables. Watch the other videos in the series or learn more about how to make accessible tables in the resources below.
Why accessible tables matter for NVDA
Accessible tables have captions and headers. Screen readers use the caption to announce what the table is about before entering the table. They use the headers to announce where the user is in the table. For example, this table is about the average temperature in California, Florida, and South Carolina. The states are the row headers. The column headers are State, Average High Temperature, and Average Low Temperature.
A screen reader announces these headers before announcing the data, so the user knows what the data refers to as they navigate the table.
Navigating tables with NVDA
I’ll navigate to the table using the down arrow key, or I can select “t” to jump to the next table. Then, I’ll hold down both control and alt while using the arrow keys to navigate table cells.
NVDA announcing an accessible and inaccessible table
Let’s hear NVDA announce this accessible table.
NVDA: Main landmark table with four rows and three columns.
NVDA: Row 1 Column 1 State.
NVDA: Row 2 California. Average high temperature degrees F.
NVDA: Column 2. 78. 90.
NVDA: Florida row 3. 85. 90.
NVDA: South Carolina row 4. 80. 88.
NVDA: Average low temperature degrees F. Column 3. 65. 70.
NVDA announced the row or column heading when I changed rows or columns. This is helpful to users who rely on hearing the data, so they don’t have to remember where they are in the table.
Now, let’s hear this same table but without the proper table headings.
NVDA: Table with 4 rows and 3 columns.
NVDA: Row 1 column 1. State.
NVDA: Row 2. California.
NVDA: Column 2. 78. 90.
NVDA: Row 3. 85. 90.
NVDA: Row 4. 80. 88.
NVDA: Column 3. 65. 70.
Without proper headings, even small tables would be difficult to navigate with a screen reader because you can’t hear what the data relates to.
That’s how NVDA sounds announcing accessible and inaccessible tables. Subscribe to Pope Tech for more digital accessibility videos.