Responsive Table Test
Responsive tables collapse columns into expandable sections on narrow screens (and at high zoom settings) to eliminate the need for horizontal scrolling. There is no specific ARIA Pattern for responsive tables, but related examples include:
Additionally, responsive tables should meet the following requirements:
- Commands to expand/collapse rows (and sort columns) must be focusable
- Controls must be clickable by keyboard (space) and speech recognition
- Controls must have an indication that they are clickable (screen reader and visual)
- Controls must have aria-expanded="true/false" (and sort="ascending/descending")
- Controls must be clickable even if the cell contains a link
- Controls should have adequate target size for mobile devices
- Controls shouldn't trigger screen reader forms mode unexpectedly
- Ideally, controls would not be read as part of headers with table reading commands
- Collapsed columns should be associated with their row header
(Note: in the tests below, tables are already "collapsed" as if they were one a narrow screen -- so we don't have to resize the browser to test.)
Original Table (not collapsed)
| Agency | Acronym | Code | Staff |
|---|---|---|---|
| Aging | AGE | 402 | 147 |
| Agriculture | AGR | 406 | 355 |
| Arts Council | IAC | 503 | 17 |
Test 1: Clickable Headers (current implementation)
| Agency | Acronym | Code | Staff |
|---|---|---|---|
| Aging | AGE | 402 | 147 |
|
|||
| Agriculture | AGR | 406 | 355 |
|
|||
| Arts Council | IAC | 503 | 17 |
|
|||
- Works with the keyboard, but
- Expanded state is not read for rowheader without link unless tabbing
- When tabbing, forms mode activates; must press escape to exit
- Clicking header with link activates link; must tab to get focus to column header
- VoiceOver never reads state and cannot get focus to column header
- Headers may not be clickable with speech recognition
- Collapsed columns not associated with row headers
Test 2: Header Buttons & ARIA-Owns
| Agency | Acronym | Code | Staff |
|---|---|---|---|
| AGE | 402 | 147 | |
|
Code:
402
Staff:
147
|
|||
| AGR | 406 | 355 | |
|
Code:
406
Staff:
355
|
|||
| Arts Council | IAC | 503 | 17 |
|
Code:
503
Staff:
17
|
|||
- Works with keyboard, JAWS & NVDA, but visually-hidden column headers and aria-owns confuses VoiceOver
- Table is identified as having number of columns/row that are actually in table regardless of what is currently showing (i.e., 4 columns, 4 rows)
- Collapsed columns read as if they are in their original row (i.e., ctrl + alt + right arrow); don't appear to be extra rows
- Note: column headers cannot contain links or focusable elements; row headers with links will be read twice with table reading commands
Test 3: Header Buttons & Headers Attribute
| Agency | Acronym | Code | Staff |
|---|---|---|---|
| AGE | 402 | 147 | |
|
|||
| AGR | 406 | 355 | |
|
|||
| Arts Council | IAC | 503 | 17 |
|
|||
- Works with keyboard, JAWS, NVDA & VoiceOver (mostly)
- Table is identified as having number of columns/row that are showing (e.g., 2 columns, 5 rows)
- Collapsed columns are read as extra rows; NVDA & VoiceOver don't associate them with row headers (except by proximity)
- Note: column headers cannot contain links or focusable elements; row headers with links will be read twice with table reading commands
Conclusions?
- Test 2 seems like the best approach, but doesn't work well with VoiceOver on iOS, where we're most likely to need it
- Test 3 isn't ideal, but may be the best option that works in iOS?