WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: accessible calendar controls


From: Bryan Garaventa
Date: Jan 26, 2022 11:16AM

There really isn't, mainly because there is no way to predict when or how a disabled element may be relevant. There are definitely bad UI designs where disabled elements are improperly used to represent controls that would be better served with toggles and the like, but these conditions have to be taken on a case by case basis.

To clarify, the word unavailable on Windows comes from the state that is set on the element in the accessibility tree when disabled, and isn't meant to convey that you can do something specific to make it enabled, though some UIs may make it possible to change something to cause the element to become enabled automatically.

You can see an example of this at
Where the Submit button is disabled until you type the right answer in the edit field.

In this case, the disabled attribute is used on a standard button element, but it sets the same state as though aria-disabled were being used. If the ARIA attribute were used here instead, it would actually be incorrect because doing so would not disable the button, it would just be conveyed as being disabled without preventing the wrong data from being submitted.

Regarding the radio button example, often this is used correctly in circumstances where some conditions are true sometimes but not always. For example, if a specific number of shipping options are provided by a company, but depending on the product, only some of these are actually available at checkout, then the radios that are not applicable will be disabled.

I'm not sure if this answers your question, but hopefully it helps a bit.

All the best,

Bryan Garaventa
Principal Accessibility Architect
Level Access, Inc.
415.624.2709 (o)

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Geethavani.Shamanna
Sent: Wednesday, January 26, 2022 5:38 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] accessible calendar controls

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.

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