What are the A11yLabel for a Datepicker in Angular Material?

Question

What are the dateA11yLabel and the monthYearA11yLabel when configuring a custom format for a datepicker? What do they do? I did not find this information in the Angular Material documentation.

export const MY_FORMATS = {
  parse: {
    dateInput: 'LL',
  },
  display: {
    dateInput: 'LL',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

https://material.angular.io/components/datepicker/overview#customizing-the-parse-and-display-formats

Can't find this dateA11yLabel and the monthYearA11yLabel on angular date picker documentation? — Nitishkumar Singh

Roobot Roobot · Accepted Answer · 2021-08-17T00:42:45

dateInput: The format used for displaying selected dates in the input.

monthYearLabel: The format used for the 'change month/year' button at the top of the datepicker.

dateA11yLabel: What is read by a screen reader when using the arrow keys to move day-by-day through the datepicker calendar view.

For example, instead of it just reading "16" when focused on 8/16/21, it might be better to have it read "August 16, 2021" so the user has more context, especially when they transition from one month to another.

monthYearA11yLabel: What is read by a screen reader when choosing a month with a keyboard.

To test, hit Enter on the datepicker trigger button (calendar icon), Tab to the 'change year' button, hit Enter, arrow to a year, hit Enter, and arrow to change months. Instead of just reading "Aug" like it shows on screen, it might be better to have it read something like "August 2021"

For example, these are the values I'm using (using Luxon formats)

display: {
    dateInput: 'DD',  //e.g. "Aug 16, 2021" for en-US
    monthYearLabel: 'LLL yyyy',  //e.g. "Aug 2021" for en-US
    dateA11yLabel: 'DDD',  //e.g. "August 16, 2021" for en-US
    monthYearA11yLabel: 'LLLL yyyy',  //e.g. "August 2021" for en-US
  },

If you need a screen reader for testing, NVDA is a good free one, or you could try a built-in one like VoiceOver in Safari.

I don't have an official source for this, but I have some accessibility experience and just figured it out by messing around with it.

What are the A11yLabel for a Datepicker in Angular Material?

2 Answers