Accessible Responsive Tables

[tom-napier]

Problem

In the accessibility team we've seen a few product teams finding issues with tables, particularly in agent-facing services, that are not responsive. These are causing layout breakages and failing Web Content Accessibility Guidelines (WCAG) Success Criterion 1.4.10 Reflow. In discussions, it seems like there isn't good awareness of different techniques to handle tables that will otherwise overflow and break the layout.

What might be needed

Either some example approaches to provide more guidance to devs, or a responsive table component.

Some possible approaches

• Basic approach to making tables not break layout (from tempertemper)
• Updated approach to the previous example, with some progressive enhancement
• Responsive table approach
• ONS Design System responsive table example

Discussion points

• Is the issue actually that tables are being used when there's a better approach?
• Is the need here a new component, or guidance/patterns in the Design System?