TL;DR: Unless you have user testing results saying otherwise, maybe put a check-all checkbox outside the table. The rest of this post is an awkward mash-up of my posts Don’t Turn a Table into an ARIA Grid Just for a Clickable Row and Check-All / Expand-All Controls with a little…
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,…
I spoke at the 2024 Web Accessibility in Mind Conference (in partnership with PopeTech). As soon as the video is available I will embed it. This post is a stub to hold the links during my talk and will be updated sometime within a few days after my talk with…
Again, title says it all. However, there is an equally bad opposite approach you might be tempted to use, so let me clarify: Don’t use ARIA grid roles simply to make rows clickable in a table, and Don’t put click handlers on table rows (<tr>s) to make them clickable. Step…
Spanned table headers are not well supported across screen readers. While you can visually style these all sorts of ways to make the spanning clear, I am focusing on the programmatic outcomes. Which essentially means how they are exposed to screen reader users. This post uses only HTML <table>s. It…
If you build calendars on the web and abbreviate the days in the column headings (you do use column headings, yeah?), this is how it sounds to a JAWS user. Sorry, your browser doesn’t support embedded videos, but don’t worry, you can download it. The caption file is also available…
It was late 2020 when I last tested how browsers use CSS display properties to break the semantics of elements. I had been waiting for Safari to fix how it handles display: contents for four years now, and was excited when the announcement came in June. Then I started testing…
Data tables need column headers. Monolitten, a granite column of humans (each with a head) at Vigelandsanlegget, a sculpture park in Frognerparken in Oslo, Norway. What they probably do not need is a new set of column headers every few rows, particularly not when they change the meaning of the…
The online holiday shopping coupled with my need to make a new invoice template got me looking at a common table structure that is harder to expose to screen readers than it seems at first glance. One I first coded in, checks watch, 1997 when I was an ecommerce developer…
Though JS-free fixed table row and column headers have been possible for quite some time, Safari’s and Chrome’s recent fixes got some people pretty excited. Enough that folks are copying code samples in whole, without always paying attention to necessary considerations. That same excited demo included other CSS properties that…
This post expands on what I covered in my April 2021 post, Sortable Table Columns. You may want to read that first to understand the broader challenges and techniques for making a table sortable by one column at a time. That last statement is what matters here. ARIA 1.1 says…
An accessible sortable table is not necessarily the same as a usable sortable table. Outline: Basics Let The User Know This Thing Has Sorted Screen Reader Announcement Sort Arrows Column Background Column Background via <col> Let The User Know This Thing Sorts SVGs Layout Windows High Contrast Mode Screen Readers…