Accessible data tables
(Last Updated on 29 September 2020)
I’ve been working on a client project and one of the tasks was remediating some data tables. As I began researching the subject, it became obvious that most of the practical, tested advice comes from my old mates Steve Faulkner and Adrian Roselli.
I’ve collated them here so they’re in one place when I need to do this again, and in case you’re doing similar. But all the glory belongs with them. Buy them a beer when you next see them.
- How screen readers navigate data tables by Léonie Watson
- Short note on what CSS display properties do to table semantics TL;DR – changing the display property hides the semantics from the accessibility tree in some browsers and therefore from assistive tech.
- Functions to Add ARIA to Tables and Lists – Adrian shows how to restore table semantics with ARIA
- Short note on improving usability of scrollable regions – if your tables horizontally scroll, make sure that keyboard users can access the scrollers
- Fixed Table Headers – If you have scrolling tables, you might want ‘sticky’ headers that don’t scroll. Uncle Adrian shows you how.
- Tables, Tequila and Beer – Uncle Steve shows that simple tables don’t need the scope attribute to identify a th as a row or column header.
- Web Typography: Designing Tables to be Read, Not Looked At by Uncle Richard Rutter
- Table Design Patterns On The Web – Bonus link! Cousin Jing shows some different design patterns for responsive, accessible tables.