Responsive table accessibility issue

[anandamaryon1]

Bug Report

What is the issue?

The responsive table, when shown on small screens as a stacked list, does not have matching visual and code order.

The table visually presents as a list of key value pairs, but the code remains marked up as a table. This makes keyboard navigation confusing for sighted screen reader users, as the order they navigate through content does not match the visual representation.

Potential fixes

Ideally the information will be communicated via a screen reader in the same order as it's presented on screen. So, when in responsive 'stacked' view, a screen reader will communicate the inserted labels and their values, and not the underlying table headings and structure.

Another potential option is to have the markup completely swap for the stacked view, using display none to flip between two separate elements eg. table and dl.

Another option is to use scroll overflow tables instead of stacked responsive tables. (These are less ideal for informational tables and for using on small screens. But can be preferable for data-heavy comparison tables. Ideally we'd have both options, made accessibly.)

Related to

https://github.com/nhsuk/nhsuk-service-manual-community-backlog/issues/26