Putting a Data Table on a Phone

Field engineers using the product on phones were calling the office to ask for information that was in the table but hidden on their screen.

A job management product with a twelve-column job list. The responsive implementation hid all but three columns below the tablet breakpoint, choosing which to keep based on what looked most important in a review.

• Field use was almost entirely on phones, frequently one-handed and outdoors.
• Which columns mattered varied by job type and by engineer.
• Connectivity was unreliable, so a detail view per row meant a round trip that often failed.
• The table was also used on desktop by dispatchers, who needed all twelve columns.

Keep every column and wrap the table in a labelled, keyboard-focusable horizontal scroll container, with the job reference column pinned to the left edge.

Hidden data is unreachable data. Horizontal scrolling is widely disliked in design reviews and is understood by users, who scroll horizontally in maps and image galleries without difficulty. Pinning the identifying column meant a scrolled row was never ambiguous. WCAG explicitly exempts tables from the reflow requirement precisely because this trade exists.

• Call logs from the office showing which fields were being requested by phone.
• Contextual observation of engineers using the product on site, which showed one-handed use and frequent connectivity failures.
• Testing the scroll container with a screen reader and with keyboard only.
• Confirming that the exemption in WCAG 1.4.10 covered this case.

• Horizontal scrolling reviewed poorly with stakeholders, who described it as unfinished.
• The pinned column reduced the visible width of the scrolling area.
• Additional work to make the scroll container accessible, since a plain overflow container is not keyboard focusable by default.

Calls to the office asking for job details fell sharply. Engineers reported the table as usable rather than as good, which was the correct outcome for a tool used in the rain.