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. …

About

Dominic Mercier

Front-end Developer based in Drummondville (Quebec), Canada.

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