aria-practices
aria-practices copied to clipboard
Add an option to the date picker to provide inactive days
https://w3c.github.io/aria-practices/examples/dialog-modal/datepicker-dialog.html A common scenario for date pickers is to have only some dates available. For instance booking an appointment where some of the days are taken would be unavailable.

- Option 1: allowing the user to navigate to inactive dates and then telling them that it is inactive.
<button disabled...> - Option 2: hide greyed out dates from the screen reader with
<button aria-hidden ="true" tabindex="-1" >and add some offscreen text on the first focusable date via aria-describedby that says something like. "Note: Only some dates are available, other dates are inactive"
If the purpose of the component is to pick an available date to enter into the input field, I think the first option could be time consuming, frustrating and perhaps confusing to hear over and over again . I'm not sure how option 1 would work with the roving tabindex on this component (arrow keys trapped and the active button has tabindex="0" and the rest have tabindex="-1"). It's weird because in static content the user would hear disabled elements using their arrow keys but in an application like this model the arrow keys are used to navigate active buttons (dates)
Someone in favour of option 1 could argue that these inactive greyed out dates are available to sighted users, so they should be available to blind users. In that case we would assume the purpose of the component is to look up a date and find out which day of the week it falls on. This is an unlikely scenario.
I don't have strong opinions but we should probably give some guidance in this area.
NOTE: the question of low contrast for disabled states is a separate issue. At some point another affordance (i.e an icon wih a line through it) might emerge to indicate the disabled state but it hasn't yet.
Sometimes the greyed out days can also be activated. They are only gray to indicate that they belong to the previous or next month. So here the correct output of the month would be a solution.
Sometimes the deactivated days contain a tooltip or a color coding with a hint why they are deactivated (e.g. holiday, weekend, already booked event). In this case the days should get the focus, be marked as deactivated and printed with the hint.