Challenge
With limited space in the user interface, the team needed to present a table of data that supported screenreaders and met accessibility standards. Ideally, the tables would be responsive on mobile and still be readable.
Proof of Concept
As part of the ideation process, I conducted research to understand how to build tabular data in HTML in such a way that they can be legible for sighted users, but also be usable and readable for screenreaders. Research suggested that using HTML tables was the best approach for this.
To demonstrate the possibilities and test the order in which screenreaders read out the table data, I built a Proof of Concept using HTML and CSS. The table displays the data in a way that works for all user types, in a readable order and format.
On mobile, the table layout reverts to a vertical view, displaying all table data in a stacked format.
See the Pen Accessible multi-row tables by Samantha Howes (@dusterbed) on CodePen.