Resources · 78
Data tables: preserve meaning on mobile and with screen readers
Structure units, headers, sorting and alternatives so comparisons remain usable.
· 2 min
What this guide helps achieve
- Define the comparison task
- Associate headers
- Keep context on small screens
- Test a real decision
Quick check
- Should every table become cards?
- Does a blank cell mean zero?
- Do th elements guarantee accessibility?
Step-by-step method
- 01
Define the comparison task
State the reader’s decision and limit columns to that need. Display period, unit and scope. Distinguish zero, unknown and not applicable. Make differing currencies or calculation bases explicit before readers compare rows.
Deliverable: row and column definitions.
- 02
Associate headers
Use an actual table for tabular relationships, with a caption and header cells. In simple tables scope identifies row or column header direction. Simplify complex structures first; where complexity remains necessary, check explicit cell associations.
Deliverable: verified structure and associations.
- 03
Keep context on small screens
Preserve relationships through horizontal scrolling or an alternative presentation. Cards should repeat useful labels without losing units. Make sorting controls accessible, announce sort state and distinguish raw numbers from formatted strings.
Deliverable: mobile, keyboard and sorting journey.
- 04
Test a real decision
Ask readers to compare rows, locate a missing value and change sorting. Check keyboard, zoom and screen-reader use for understandable headers. CSV exports can support reuse but cannot replace accessible reading on the page.
Deliverable: findings and repaired gaps.
Reusable worksheet
Complete with your authorised observations. These fields are a working template, not observed results.
| Field | Information to record |
|---|---|
| Meaning | Task, unit, period and missing values |
| Structure | Caption, headers and associations |
| Journey | Mobile, zoom, keyboard, screen reader and sorting |
Worked example
Illustrative situation
Fictional example: a comparison puts monthly and yearly subscription prices into one Price column.
Decision and expected evidence
Billing periods become explicit, missing values are named and headers are tested while sorting.
Distinguish the mechanisms
| Mechanism | Purpose | Check or limitation |
|---|---|---|
| Table | Compare row and column relationships | Retain headers during navigation |
| Cards | Read one entry at a time | Repeat labels and units |
| Chart | Show a trend | Provide values and a text explanation too |
Management indicators
| Indicator | What it measures | First action |
|---|---|---|
| Interpretable values | Cells with understandable context and status | Resolve ambiguity before visual embellishment |
| Completed tasks | Comparisons completed in tested journeys | Record interpretation errors |
Common pitfalls
- Retain headers during navigation
- Repeat labels and units
- Provide values and a text explanation too
Frequently asked questions
Should every table become cards?
No. Choose for the task; comparing rows may be easier in a well-structured table.
Does a blank cell mean zero?
No. Identify unavailable measurement, non-applicability or an observed zero explicitly.
Do th elements guarantee accessibility?
No. Check associations, comprehension, controls and zoom behavior.
Official references
References consulted: . The method and worksheet propose checks to adapt to your context; they do not constitute certification.
Continue exploring
Related analysis
