Example 5 - Rows Before Bros - screen readers can't handle tables with rowscope
Summary
Assistive technology support for complex tables is inconsistent; sometimes even broken. This problem is particularly pertinent when tables contain header cells that span multiple rows.
Examples
| Name of card holder | Credit Card number | Balance | Due Date | Actions |
|---|---|---|---|---|
| Daisy Domergue | xxx0088 | $1633 | 02/05/2016 | |
| xxxx9004 | 02/02/2016 | $1558 | ||
| Dufus Domergue | xxx.9889 | $5590 | 01/30/2016 | |
| xxx.7709 | $6550 | 01/31/2016 | ||
| xxx.9900 | $0 | 02/28/2016 |
Explanation
Support for headers that span multiple rows has been absent in most if not all screen readers, despite being part of the html specification for years. This makes it difficult for screen reader users to perceive the data relationship within tables where a header cell spans multiple rows. Workarounds are possible but non-trivial. The bullet proof solution is to split a complex table into 2 or more simple tables and avoid rowheader cells that span more than a single row, but that requires a visual re-design of the webpage, which is costly and can disrupt other users. It is also possible to explicitly associate header cells with individual table cells using headers/id method or aria-describedby, but that requires the developer to associate header cells with every cell in the table, because these methods do not compliment regular header cell markup.
Imagine...
A blind customer calls your bank in a frenzy because their credit card balance is overdue and they received penalties. The customer claimed that they were confused and accidentally paid their spouse's credit card instead of their own, because they misinterpreted the credit card statement table.
So...