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:

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

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

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

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.