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.

JAWS 2022 with Chrome 103

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).

NVDA 2022.2 with Firefox 103

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:

August
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

September
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).

October
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).

November
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:

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.

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:

No, I am not trying ::first-letter here.

No comments? Be the first!

Leave a Comment or Response

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>