Abstract for my session Talkin’ Tables:
This session will walk through the basics of how to construct an HTML table. More than basic structure, it will talk about support and how it is exposed to screen readers in particular. With that foundation it will walk through patterns for responsive tables, fixed column and/or row headers, sortable tables, tables with expandable content, labeling controls in a table, and selecting rows. Each of these will take into account WCAG conformance, actual support, and the necessary HTML, ARIA, CSS, and JavaScript to pull it off. Even if you cannot apply these to your table patterns, they should give you insights into how to consider the code in your own tables. We probably won’t talk about grid roles. At least not much.
Ideally you’re here because you followed the link in the slides. Otherwise this post might not make a lot of sense.
As of 18 May I have embedded a 3MB tagged PDF of the slides. The export from PowerPoint is not great. The videos are not retained. The PDF tags are verbose and complex. It does not pass PDF/UA. So reader beware.
The following informed the talk either directly or because of a related concept. Probably ignore some of the older ones. They don’t get many updates and may be based on old technologies or techniques (or both).
- Don’t Turn a Table into an ARIA Grid Just for a Clickable Row, November 2023
- Avoid Spanning Table Headers, February 2023
- Brief Note on Calendar Tables, August 2022
- It’s Mid-2022 and Browsers (Mostly Safari) Still Break Accessibility via Display Properties, July 2022
- Column Headers and Browser Support, February 2022
- Accessible Cart Tables?, January 2022
- Scroll Snap Challenges, July 2021
- Multi-Column Sortable Table Experiment, June 2021
- Sortable Table Columns, April 2021
- Under-Engineered Responsive Tables, November 2020
- Sortable Table Column Mad Libs, September 2020
- Block Links, Cards, Clickable Regions, Rows, Etc., February 2020
- Fixed Table Headers, January 2020
- Table with Expando Rows, September 2019
- Uniquely Labeling Fields in a Table, May 2019
- Functions to Add ARIA to Tables and Lists, May 2018
- Display: Contents Is Not a CSS Reset, May 2018
- Tables, JSON, CSS, ARIA, RWD, TLAs…, April 2018
- Tables, CSS Display Properties, and ARIA, February 2018
- A Responsive Accessible Table, November 2017
- Hey, It’s Still OK to Use Tables, November 2017
- Keyboard and Overflow, February 2016
- It’s OK to Use Tables, July 2012
These are the three ARIA issues we discussed: