Grid Cell ARIA Test
Generally, we still recommend using the standard HTML table tags where possible. But, if you have a situation where headers have to be separate, this is a good solution to use today. Testing took place March 9, 2012.
If you have table headers and table data in a separate frames, it is possible to use this technique by repeating the table headers in the data content frame. The table headers that are repeated, can be hidden off-screen using CSS. See the frame table header solution.
The Test
Test to see if ARIA grid is a good solution when you have the table headers in a separate table from the data.
| Student | Gender | Age |
|---|
| Katie Martin | Female | 25 |
|---|---|---|
| Charlie Smith | Male | 18 |
| Calvin Meehan | Male | 19 |
Results
| Configuration | Result Summary | Result Notes |
|---|---|---|
| JAWS 11 & IE 8 | No Issues | |
| JAWS 12 & IE 9 | No Issues | |
| JAWS 13 & IE 8 | No Issues | |
| JAWS 13 & IE 9 | No Issues | |
| JAWS 12 & FF 10 | No issues | |
| JAWS 11 & FF 10 | No Issues | |
| JAWS 13 & FF 10 | No Issues | |
| JAWS 13 & Chrome 17 | Headers are not read, though they are read for traditional tables. | It does treat the two tables as a single table and the row and column numeric announcements are correct. |
| WindowEyes 7.5.3 & IE 9 | No Issues | |
| WindowEyes 7.5.3 & FF 10 | No Issues | |
| VoiceOver & Safari | No Issues | |
| VoiceOver & Safari in iOS 5.0.1 for iPad | Headers are not read, though they are read for traditional tables. | "Table start" and "table end" illustrate that the two tables are being treated as one. |
| NVDA 2012.1beta2 & IE 8 | Treats the two tables as separate tables. | |
| NVDA & IE 9 | No Issues | |
| NVDA & FF 10 | No Issues |