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, for example:

• AEM Data Table Component
• ILogin ESAM Tables (requires sign in)

There is no specific ARIA Pattern for responsive tables, but consider:

• Sortable Table Example
• Disclosure (Show/Hide) Pattern

and the following requirements:

• Expand/collapse (and sort) controls must be focusable
• Controls must be clickable by keyboard (space) and speech recognition
• Controls must have 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
• Do NOT use aria-owns -- it breaks VoiceOver

(Note: in the tests below, tables are already "collapsed" -- so we don't have to resize the browser to test.)