How to build accessible & responsive HTML table.

Dominic Mercier
Jun 19, 2018 · 2 min read

While working on a client project, i was asked to find a way to make HTML table accessible to screen readers. Our design comps required a vertically stacked layout for mobile devices and a horizontally stacked layout on tablet/desktop browsers.

I expected screen readers to be able to read my HTML code and read each cell when entering on it. I though everything would work out of the box, as html table are nothing new and that their implementation is a solved case since a long time ago. I was horribly wrong.

The problem with responsive table.

To achieve responsive layout with my table, i choose to use flexbox. On mobile devices, table rows and cells will be stacked vertically. The problem is that tables are not treated like tables if you change their css display mode. By setting their css display to “block” or “flex”, tables are treated like <div>. The same logics goes for table rows and cells.

To work around this limitation, you have to specify ARIA roles attribute on each table’s rows, cells and on the table himself. Once you know that information, everything make sense and you could figure how to make it work.

The full code

Note: Open this CodePen in a new window to play with window’s size.

Writing notes

  1. <table> must have role=”table” attribute.

I hope this article will be helpful to other people.
Thanks for reading!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store