Accessible Tables and Data
Tables are perfect for presenting rows and columns of related data, but only if they are coded properly. A table that is just boxes drawn on screen leaves screen-reader users unable to tell which figure belongs to which heading.
Done well, an accessible table announces its structure clearly, so everyone can read the data with confidence.
Use Real Table Markup
Proper header cells and a caption let assistive technology associate each piece of data with its row and column headings as the user moves around.
- Mark column and row headers as header cells, not data.
- Add a short caption describing the table's purpose.
- Keep one idea per table rather than merging several.
Avoid Layout Tables
Tables should hold data, never be used to position a page layout. Layout belongs to CSS; using tables for it confuses screen readers and makes pages brittle on mobile.
Frequently Asked Questions
What about very large or complex tables?
We keep them as simple as the data allows, add clear headers and a caption, and on small screens let them scroll or restructure so the figures stay readable rather than spilling off the page.
If you need a hand with any of this, your Progressive Robot delivery team is ready to help. Raise a ticket from the Support area of your client portal or speak to your account manager and we will guide you through the next steps.