Angular Material 中 Datepicker 的 A11yLabel 是什么？答案

【问题标题】：What are the A11yLabel for a Datepicker in Angular Material?Angular Material 中 Datepicker 的 A11yLabel 是什么？
【发布时间】：2018-04-28 06:40:18
【问题描述】：

在为日期选择器配置自定义格式时，dateA11yLabel 和 monthYearA11yLabel 是什么？他们在做什么？我没有在 Angular Material 文档中找到此信息。

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

【问题讨论】：

在角度日期选择器文档中找不到这个 dateA11yLabel 和 monthYearA11yLabel？
文档确实很差

标签： angular angular-material

【解决方案1】：

dateInput：用于在输入中显示所选日期的格式。

monthYearLabel：用于日期选择器顶部的“更改月/年”按钮的格式。

dateA11yLabel：当使用箭头键在日期选择器日历视图中逐日移动时，屏幕阅读器读取的内容。

例如，当专注于 21 年 8 月 16 日时，与其仅仅读取“16”，不如将其读取为“2021 年 8 月 16 日”，这样用户可以获得更多上下文，尤其是当他们从 1 过渡时一个月到另一个。

monthYearA11yLabel：使用键盘选择月份时屏幕阅读器读取的内容。

要进行测试，请在日期选择器触发器按钮（日历图标）上按 Enter，按 Tab 键转到“更改年份”按钮，按 Enter，按箭头键选择年份，按 Enter，然后按箭头键更改月份。与其像屏幕上显示的那样仅仅阅读“Aug”，不如让它阅读“August 2021”之类的内容可能会更好

例如，这些是我正在使用的值（使用Luxon 格式）

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
  },

如果您需要屏幕阅读器进行测试，NVDA 是一款不错的免费软件，或者您可以尝试 Safari 中的 VoiceOver 等内置阅读器。

我没有这方面的官方来源，但我有一些可访问性的经验，只是通过弄乱它来弄清楚。

【讨论】：

【解决方案2】：

这表示可访问性的格式，基本上，您是在定义辅助技术将如何看待和作用于日期适配器上有障碍的人。

您可以在这里找到 a11y 的详细信息：https://a11yproject.com/

【讨论】：