Brief Note on Calendar Tables
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.
Here is the same table in NVDA so you can hear a slightly different pronunciation and at the speaking rate I use (which is slow for daily SR users). It shows the NVDA speech viewer too, which is why the previous video was so wide (I re-used capture size).
The Sample Table
With no styles other than the generic styles used for tables on my site, here is the table I used for the videos:
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
The column heading uses this code:
<th>
Tu
</th>
Uses abbr
attribute on <th>
Fun fact — abbr
has no support in browsers (macOS/VoiceOver applies heuristics to recognize it). The HTML Accessibility API Mappings shows abbr
mapped only for AX
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 |
Essentially this code benefits only macOS / Safari / VoiceOver users (not iOS / Safari / VoiceOver):
<th abbr="Tuesday">
Tu
</th>
Uses <abbr>
with title
attribute
In case when I mentioned an abbreviation above you thought I meant <abbr>
, I am covering it now. Though it would not have mattered anyway since it is also not exposed to users by browsers, though <abbr>
is mapped for each platform in HTML-AAM (yes, I know it also incorrectly references the attribute).
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
Safari misses <abbr>
, but VoiceOver picks up the slack — on macOS. Essentially this code benefits only macOS / VoiceOver users (not iOS / Safari / VoiceOver), which means macOS / VoiceOver / Chrome and macOS / VoiceOver / Firefox users all get a boost on <abbr>
:
<th>
<abbr title="Tuesday">Tu</abbr>
</th>
Uses aria-hidden
with visually-hidden text
If it is imperative that you show the abbreviation, then this approach will work with screen readers. There is visual and audio mismatch, but since the column headers are not interactive controls, you are not at risk of a 2.5.3 Label in Name failure (probably).
Sunday | Monday | Tuesday | Wednesday | Thursday | Friday | Saturday |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
Essentially this code is what you need:
<th>
<span aria-hidden="true">Tu</span>
<span class="visually-hidden">Tuesday</span>
</th>
If you don’t have a visuall-hidden
class already:
.visually-hidden:not(:focus):not(:active) {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
width: 1px;
height: 1px;
white-space: nowrap;
}
Yeah, I know that looks like a lot of code. Sometimes making a visually simple UI requires more effort. Shrug emoji.
Try It Yourself
Simple example embedded below, or use the debug version.
See the Pen Untitled by Adrian Roselli (@aardrian) on CodePen.
Browser Bugs
This is not a screen reader bug. It is easy to blame screen readers if you are unfamiliar with how they work, but in reality screen readers are faithfully representing what is coming from the browser (other than VoiceOver on macOS).
These are browser bugs:
- Firefox Bug 298199: support abbr attribute for table headers, 19 June 2005 (though I added a note today).
- Chromium Issue 1351490: `<th abbr>` not exposed to users, 9 August 2021.
- WebKit Bug 243744 – AX: `<th abbr>` not exposed to users, 9 August 2021.
Update: 10 August 2022
A couple years ago Sarah reminded us not to use <th aria-label>
or <th aria-labelledby>
and made some tests to show support.
Even though table column headers are allowed to get a name from author (i.e. aria-label or -labelledby), the spec doesn't say whether that label should be used as the column name for non-header cells.
Screen reader support for <th aria-label> is poor: jsfiddle.net/u1jtm7oL/3/show
This is a long-form way of saying:
– don't use aria-label or aria-labelledby on column headers
– wash your hands and listen to what disabled people say about coronavirus 😄
The lack of support for abbr
is not new. It just seems it has not gotten much traction. In that same thread, Sarah linked to a test:
Yup 😭. Also made a version with abbr testing results: jsfiddle.net/kfyuwtxa/1/show
(::first-letter + overflow-hidden is awesome, gonna steal that 😄)
No, I am not trying ::first-letter
here.
Leave a Comment or Response