跳至內容
+

無障礙功能

了解日期與時間選擇器如何實作無障礙功能與指南，包括遵循國際標準的鍵盤導航。

指南

通用的無障礙功能一致性指南包括

  • 全球接受的標準：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 將焦點移至本週的最後一天

日期選擇器

日期選擇器結合了日期欄位和日期日曆元件的功能。

根據焦點所在的元件，選擇器將提供對應的鍵盤支援，來自日期欄位或日期日曆。

日期範圍日曆

日期範圍日曆實作了與日期日曆元件的日期檢視類似的鍵盤支援，但上個月和下個月之間的導航有所不同，必須使用日曆標題中的箭頭來達成。

按鍵 說明
向上箭頭、向下箭頭、
向左箭頭、向右箭頭		 在可用值之間移動焦點
Page Up 將焦點移至本月的最後一天
Page Down 將焦點移至本月的第一天
Home 將焦點移至當月內本週的第一天
End 將焦點移至當月內本週的最後一天

日期範圍選擇器

與鍵盤互動時，日期範圍選擇器會將焦點保持在欄位元件上，因此提供與日期範圍欄位相同的鍵盤導航支援，並在日曆元件上持續更新變更。