Table Layout for Screen Readers
Good Table
This table is easier to understand when using a screen reader because the column headers are indicated in the html code and the cells are not merged. Adding the word “Week” in column one cells also makes the information flow better when it is read aloud by the screen reader. Using the word “to” in the chapter assignments instead of a dash and spelling out the month in the due date column also make the table more understandable when read by assistive technologies like a screen reader.
| Week | Assignment | Due Date |
|---|---|---|
| Week 1 | Reading Chapters 1 to 3 | January 20 |
| Week 1 | Post Introductions to Discussion List | January 20 |
| Week 2 | Read Chapters 4 to 6 | February 1 |
| Week 3 | Read Chapter 7 | February 8 |
| Week 3 | Paper Due | February 9 |
Bad Table
This table is more difficult for a blind student to understand because the column headers are not labeled in the html code, and the merged cells confuse the reading order and the use of a dash and month abbreviations is not very clear.
| Week | Assignment | Due Date |
|---|---|---|
| 1 | Reading Chapters 1-3 | Jan. 20 |
| Post Introductions to Discussion List | ||
| 2 | Read Chapter 4-6 | Feb. 1 |
| 3 | Read Chapter 7 | Feb. 8 |
| Paper Due | Feb. 9 |
Demonstration
See this video example of a screen reader reading these two tables.