WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: accessible calendar controls

for

From: Geethavani.Shamanna
Date: Jan 26, 2022 6:37AM

Hi Glen and all,

I recently tested a page where there were three radio buttons; one was selected by default, and the other two were disabled. The screen reader announced the labels of these radio buttons followed by 'unavailable'. It wasn't of course clear as to when those radio buttons would become available or what the user needed to do in order for them to turn into an enabled state.

With regard to disabled radio buttons, what is considered good practice? Should information about when they become available or what the user needs to do be included within the label?

Many thanks.
Geetha
-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of glen walker
Sent: 25 January 2022 21:23
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] accessible calendar controls

CAUTION: This mail comes from outside the University. Please consider this before opening attachments, clicking links, or acting on the content.

The whatsock example is a nice demo of unavailable days. You need to keep two things in mind if you're going to use aria-disabled. The first is that it's intended for interactive elements. Setting aria-disabled on plain text or a non-interactive element *should* still cause the screen reader to announce that it's disabled but it might be confusing if it's not an interactive element to begin with. In the case of choosing a date from a calendar, it seems appropriate to use.

Secondly, if you only use aria-disabled by itself with no other clarifying text, the screen reader might only announce that the element is "unavailable". Both JAWS and NVDA say "unavailable" when aria-disabled is true. VoiceOver on ios (and maybe on macos) will say "dimmed". Hearing "unavailable" or "dimmed" by itself might not convey enough information.
In the case of a calendar widget, hearing "unavailable" for a date actually makes sense. The date is not available. Hearing that a date is "dimmed"
might not make sense.

The whatsock example also has a title attribute on the button. The title will be used as the accessible description (which is generally announced after the accessible name) and has a value of "Disabled". For tech-savvy screen reader users, they will probably figure out that "unavailable" or "dimmed" combined with "Disabled" means they can't choose that date. You might want a more descriptive description, so to speak. Perhaps a title of "this date is not available". You have to balance between being desciptive enough and being succinct.