Tables and Grids
While it is possible to to use CSS flexbox and grid layouts to make any set of elements look like a table, you should use proper tables whenever both the horizontal and vertical axes contain information that is relevant to a cell.
As Sarah Higley puts it, the clue is whether items can be reflowed at smaller screen sizes without losing relevant information. Items that are organized into a grid for layout purposes where the column location is arbitrary, like a set of photo cards, should not be marked up as a table. If the data is the sort of thing where you might run your finger down one column and across the row to find a specific piece of metadata, as in a spreadsheet, then you should use a table.
Screen readers like JAWS have special commands and keyboard shortcuts to help visually impaired people navigate tables. These tools are not available for <div>s and other non-semantic elements that might be laid out in grids using CSS. See How screen readers navigate data tables by Léonie Watson (YouTube, 2 minutes).
Use <thead>, <tbody>, and <th> tags as needed to distinguish column and row headers from body cells. You should create the row and column associations with ARIA roles, for two reasons. For tables containing form inputs, we can recycle column and row headers to create unique form field labels. Also, when rearranging the contents of the table visually via CSS display properties, the built-in column and row associations will be lost, and screen readers will rely on ARIA to preserve the special keyboard navigation features for tables.
Tables can get visually crowded, which can create cognitive overload. Steve Schoger of Refactoring UI has tips on reducing the use of borders and using alignment and padding effectively to make tables look less overwhelming.
Further reading on tables
- To Grid or Not to Grid, Sarah Higley Explains when to use
<table>vs CSS-based grid layouts - Hey, It’s Still Okay to Use Tables, Adrian Roselli Demonstrates how to mark up a table for accessibility
- The Most Accessible Catalog Results Page Ever, Kate Deibel A Code4Lib conference presentation on using table markup while rearranging the contents of each row with CSS to retain accessibility affordances while achieving more compact visual layouts
- A Responsive Accessible Table, Adrian Roselli Demonstrates how to reflow table cells within each row for small screens (a simpler example than Kate’s)
- Changing a table’s visual layout, Accessibility Developer Guide See "Lost semantics due to layout changes"
- Testing tables: see Axe DevTools Extension Update: New Intelligent Guided Test for Data Tables
- Abbreviations in table headers:
- Using ARIA grid roles for interactive tables (but not read-only or read-mostly ones)
- “WAI-ARIA provides a role, grid, that is closely associated with tables. This role is intended to be paired with specific keyboard behavior, letting keyboard users navigate table cells as they would be able via screen reader software (using their arrow keys).
- You do not need to use the grid role to make most tables accessible to screen readers. The grid-related behavior should only be implemented where users not running screen reader software need to easily access each cell to interact with it. One example might be a date picker where each date is clickable within a grid representation of a calendar month”
- Another example: Adobe’s React ARIA UseTable (supports keyboard movement like a spreadsheet even though the examples are read-only)
- Conclusion: role="grid" is for Excel-like web apps: Google Sheets, AirTable, etc.
- TODO: Column widths and rendering vs. Bootstrap:
- table-layout: auto vs fixed
- Colgroups
Note