Screen readers and HTML tables
Let's take that same inaccessible table (i.e., course schedule) that was developed on the previous page. Without properly marking up the table headers, a screen reader user would not be able to accurately associate the data in each cell with the appropriate column or row header.
The expected output from the screen reader is listed below the table:
| Monday | Tuesday | Wednesday | Thursday | Friday | |
| Eric | FREN 100, 9:00am-10:15am | MATH 100,1:30pm-2:45pm | No class | MATH 100, 1:30pm-2:45pm | BIOL 100, 3:30pm-4:45pm |
| Jessica | ENGL LAB 200, 9:00am-11:00am | No class | ENGL LAB 200, 9:00am-11:00am | No class | ENGL LAB 200, 9:00am-11:00am |
Screen Reader Output...
Monday, Tuesday, Wednesday, Thursday, Friday, Eric, FREN 100, 9:00am-10:15am, MATH 100, 1:30pm-2:45pm, No class, MATH 100, 1:30pm-2:45pm, BIOL 100, 3:30pm-4:45pm, Jessica, ENGL LAB 200, 9:00am-11:00am, No class, ENGL LAB 200, 9:00am-11:00am, No class, ENGL LAB 200, 9:00am-11:00am
Screen Reader Testing Activity:
Using NVDA, press the down arrow key to move through the table. As the screen reader's focus moves left-to-right announcing the content of each data cell, note the information provided to the end user.
While the screen reader can access the data in each cell, it is difficult to make sense of it if you are only presented with data one cell at a time.
The table below is a more accurate visual representation of how tabular data (without table headers) is presented to a screen reader user at any given time.
| MATH 100, 1:30pm-2:45pm | |||||
As you can see in this example, the screen reader announces the data in the highlighted cell but no context is provided to help the user understand the information.
Now, let's take a look at how adding table headers changes the information being presented to a screen reader user...