WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: accessible calendar controls

for

From: glen walker
Date: Jan 25, 2022 2:23PM

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.