Tables should only be used to present data that has a logical relationship between rows and columns. When a screen reader encounters a table, it tells the user exactly which row and column they are in—but it only works if the table is structured for data, not for “design.”
The “Why”
- Context for Data: A screen reader user needs to know what a number means. Without a “Header Row,” a screen reader will just say “42” instead of “42 students in the Biology section.”
- Navigation Efficiency: Properly tagged tables allow users to use specific keyboard shortcuts to jump between cells, essentially “exploring” the data at their own pace.
- Avoiding Layout Confusion: Using tables to position text (like a two-column newsletter) creates a “reading order” nightmare, as the screen reader will read across the columns in a way that doesn’t make sense.
Examples: Before vs. After
The “Layout Table” Mistake
- Bad: You use a table to put a photo on the left and a paragraph on the right because it “looks nice.”
- The Result: The screen reader sees a table and starts announcing “Column 1, Row 1,” which confuses the user who just wants to read the story.
- Good: Use the Columns feature in Word or Alignment tools in Canvas to position content. Reserve tables only for data grids (like a grading scale).
The “Merged Cell” Problem
- Bad: You merge the top three cells to create a “Title” for the table.
- The Result: This breaks the “grid.” When the screen reader moves down, it loses track of which column it is in.
- Good: Use a Caption for the title of the table and keep the internal grid perfectly rectangular (no merged or split cells).
How-To: Strategies for Success
- Identify the Header Row: Every table must have a designated header row (usually the top row). This ensures that as a user moves through the data, the software repeats the “label” for that column.
- Keep it Simple: If a table is becoming too complex with multiple sub-headers, it is almost always better to break it into two smaller, simpler tables.
- Don’t Leave Empty Cells: If a cell has no data, type “N/A” or “None.” Blank cells can make a screen reader user think the table has ended or that information is missing.
- Add a Table Caption: Provide a brief title or summary above the table so the user knows what data they are about to explore.
- Avoid “Print-Only” Features: Never use “empty rows” to create vertical space between data. Use cell padding or paragraph spacing instead.
- The “Tab” Test: Click in the first cell and press Tab. Does the cursor move through the data in the same order you would read it? If it jumps around, the table structure is broken.
Apply This to Your Work
Ready to build your data grid? See the specific technical steps for your preferred platform: