跳到内容
+

无障碍功能

了解日期和时间选择器如何实现无障碍功能和指南，包括遵循国际标准的键盘导航。

指南

通用的无障碍一致性指南包括

  • 全球公认的标准：WCAG
  • 美国
  • 欧洲：EAA（欧洲无障碍法案）

WCAG 2.1 有三个一致性级别：A、AA 和 AAA。AA 级别超过了无障碍的基本标准，是大多数组织的常见目标，因此这也是我们旨在支持的目标。

WAI-ARIA 创作实践包括关于 日期选择器对话框 和 日期选择器微调按钮 模式的示例，这些示例提供了关于如何优化这些组件的无障碍功能的宝贵信息。

对话框注意事项

Desktop 和 Mobile 日期和时间选择器都使用 role="dialog" 来显示其交互式视图部分，因此它们应遵循 模态框无障碍指南。此行为已尽可能自动化，确保日期和时间选择器在大多数情况下都可访问。基于以下规则，将正确的 aria-labelledby 值分配给对话框组件

  • 如果工具栏可见，则使用 toolbar id；
  • 如果工具栏隐藏，则使用输入标签的 id；

屏幕阅读器兼容性

日期和时间选择器使用 ARIA 角色和跨交互元素的强大焦点管理，以向用户传达必要的信息，并针对辅助技术进行了优化。

键盘支持

日期和时间选择器由字段、日历和时钟组件的不同组合组成。这些组件中的每一个都旨在直观地响应键盘交互，从而提供广泛的键盘导航支持。

字段

下表描述了所有 字段组件 的键盘支持

按键 描述
向左箭头、向右箭头 在日期/时间部分之间移动焦点
向上箭头 将焦点部分的数值增加 1
向下箭头 将焦点部分的数值减少 1
Page Up 将焦点部分的数值增加 5
Page Down 将焦点部分的数值减少 5
Home 将焦点部分设置为最小值
End 将焦点部分设置为最大值

日期日历

在 可用的视图组件 中，day 是唯一实现特定键盘支持的组件

按键 描述
Page Up 将日历移动到下个月，并将焦点保持在同一天
Page Down 将日历移动到上个月，并将焦点保持在同一天
Home 将焦点移动到本周的第一天
End 将焦点移动到本周的最后一天

日期选择器

日期选择器 结合了日期字段和日期日历组件的功能。

根据哪个组件处于焦点，选择器将提供相应的键盘支持，来自 日期字段 或 日期日历。

日期范围日历

日期范围日历 实现了与 日期日历 组件的 day 视图类似的键盘支持，不同之处在于在上一月和下一月之间导航必须使用日历标题中的箭头来实现。

按键 描述
向上箭头、向下箭头、
向左箭头、向右箭头		 在可用值之间移动焦点
Page Up 将焦点移动到本月的最后一天
Page Down 将焦点移动到本月的第一天
Home 将焦点移动到当前月份内本周的第一天
End 将焦点移动到当前月份内本周的最后一天

日期范围选择器

当与键盘交互时，日期范围选择器 将焦点保持在字段组件上，从而提供与 日期范围字段 相同的键盘导航支持，并在日历组件上一致地更新更改。