Angular Material 中日期选择器的 A11yLabel 是什么?

问题描述

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

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

推荐答案

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

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

monthYearLabel:用于日期选择器顶部的更改月/年"按钮的格式.

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

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

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

例如，它不只是读取16"当关注 8/16/21 时，最好将其读为2021 年 8 月 16 日"；因此用户有更多的上下文，尤其是当他们从一个月过渡到另一个时.

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:使用键盘选择月份时屏幕阅读器读取的内容.

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

要测试，请在日期选择器触发按钮(日历图标)上按 Enter，按 Tab 到更改年份"按钮，按 Enter，箭头指向年份，按 Enter，箭头更改月份.而不是仅仅阅读八月"就像它在屏幕上显示的那样，最好让它阅读诸如2021 年 8 月"之类的内容

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"

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

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

---

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

---

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.

我没有这方面的官方来源，但我有一些可访问性经验，只是通过弄乱它来解决问题.

这篇关于Angular Material 中日期选择器的 A11yLabel 是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！