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…
I have written a bunch about responsive tables. Maybe too much. I keep trying to give developers the information they need to make informed decisions — ARIA attributes, screen reader & browser pairing results, bugs, and so on. I have spread things out over years of posts. I have filed…
Visually and functionally sortable column headers on tables are straightforward (I have a post on that coming soon). However, making them accessible can be a bit frustrating. To clarify, making them accessible to screen readers is frustrating. I wrote the post I promised in the opening: Sortable Table Columns There…
Whether you call them cards, block links, or some other thing, the construct of making an area of content clickable (tappable, Enter-key-able, voice-activatable, etc.) is not new. While hit area size is mostly a usability issue, marketers often want a larger click area around their calls to action (CTAs) to…
Related Under-Engineered Responsive Tables A Responsive Accessible Table Hey, It’s Still OK to Use Tables Keyboard and Overflow