` 元素并将其样式设置为表格外观。

正确：

<table>
  <caption>2024年10月日历</caption>
  <thead>
    <tr>
      <th scope="col">日</th>
      <th scope="col">一</th>
      <th scope="col">二</th>
      <th scope="col">三</th>
      <th scope="col">四</th>
      <th scope="col">五</th>
      <th scope="col">六</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>29</td>
      <td>30</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
    <!-- 更多行 -->
  </tbody>
</table>

2. ARIA 属性

ARIA (无障碍丰富互联网应用) 属性为辅助技术提供额外的语义信息，增强其对交互元素的理解。使用 ARIA 属性可以：

• 定义角色：指明元素的用途，例如日历网格使用 `role="grid"`，每个日期单元格使用 `role="gridcell"`。
• 提供标签：使用 `aria-label` 或 `aria-labelledby` 为元素提供描述性标签，尤其是在视觉标签不足的情况下。
• 指示状态：使用 `aria-selected` 等属性来指示所选日期，使用 `aria-disabled` 来指示禁用的日期。
• 提供描述：使用 `aria-describedby` 将附加信息与元素关联，例如日期格式的描述。

示例：

<table role="grid" aria-labelledby="date-picker-label">
  <caption id="date-picker-label">选择一个日期</caption>
  <thead>
    <tr>
      <th scope="col">日</th>
      <th scope="col">一</th>
      <th scope="col">二</th>
      <th scope="col">三</th>
      <th scope="col">四</th>
      <th scope="col">五</th>
      <th scope="col">六</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td role="gridcell" aria-disabled="true">29</td>
      <td role="gridcell" aria-disabled="true">30</td>
      <td role="gridcell"><button aria-label="2024年10月1日">1</button></td>
      <td role="gridcell"><button aria-label="2024年10月2日">2</button></td>
      <td role="gridcell"><button aria-label="2024年10月3日">3</button></td>
      <td role="gridcell"><button aria-label="2024年10月4日">4</button></td>
      <td role="gridcell"><button aria-label="2024年10月5日">5</button></td>
    </tr>
    <tr>
      <td role="gridcell"><button aria-label="2024年10月6日">6</button></td>
      <td role="gridcell"><button aria-label="2024年10月7日">7</button></td>
      <td role="gridcell"><button aria-label="2024年10月8日">8</button></td>
      <td role="gridcell"><button aria-label="2024年10月9日">9</button></td>
      <td role="gridcell"><button aria-label="2024年10月10日">10</button></td>
      <td role="gridcell"><button aria-label="2024年10月11日">11</button></td>
      <td role="gridcell"><button aria-label="2024年10月12日">12</button></td>
    </tr>
    <!-- 更多行 -->
  </tbody>
</table>

注意：请务必使用真实的屏幕阅读器进行测试，以确保 ARIA 属性被正确解析。

3. 键盘导航

对于无法使用鼠标或其他指针设备的用户来说，键盘导航至关重要。确保日期选择器中的所有交互元素都可以通过键盘访问。

• 焦点管理：使用 `tabindex` 属性控制焦点顺序。确保焦点在日期选择器中逻辑地移动。当用户与小组件交互时，使用 JavaScript 管理焦点。
• 方向键：实现使用方向键在日期之间移动的键盘导航。左右方向键应分别移动到前一天和后一天。上下方向键应分别移动到上一周和下一周的同一天。
• Home 和 End 键：Home 键应移动到当前周的第一天，End 键应移动到当前周的最后一天。
• Page Up 和 Page Down 键：Page Up 键应移动到上一个月，Page Down 键应移动到下一个月。
• Enter 键：Enter 键应选择当前聚焦的日期。
• Escape 键：Escape 键应关闭日期选择器，并将焦点返回到触发它的输入字段或按钮。

示例 (JavaScript)：

// 处理键盘导航的示例
const datePicker = document.getElementById('date-picker');

datePicker.addEventListener('keydown', function(event) {
  switch (event.key) {
    case 'ArrowLeft':
      // 将焦点移动到前一天
      break;
    case 'ArrowRight':
      // 将焦点移动到后一天
      break;
    case 'ArrowUp':
      // 将焦点移动到上一周的同一天
      break;
    case 'ArrowDown':
      // 将焦点移动到下一周的同一天
      break;
    case 'Enter':
      // 选择当前聚焦的日期
      break;
    case 'Escape':
      // 关闭日期选择器
      break;
  }
});

4. 屏幕阅读器兼容性

屏幕阅读器依赖于语义化 HTML 和 ARIA 属性向用户提供信息。确保您的日期选择器与 NVDA、JAWS 和 VoiceOver 等主流屏幕阅读器兼容。

• 描述性标签：为所有交互元素提供清晰简洁的标签。使用 `aria-label` 或 `aria-labelledby` 提供额外的上下文。
• 状态播报：使用 ARIA 属性指示元素的状态，例如使用 `aria-selected` 表示所选日期，`aria-disabled` 表示禁用日期。屏幕阅读器会向用户播报这些状态。
• 实时区域：使用 ARIA 实时区域（例如 `aria-live="polite"`）来播报日期选择器的动态变化，例如当用户导航到不同月份时。这使得屏幕阅读器能够通知用户变化，而不会中断他们的工作流程。
• 错误处理：如果存在任何错误或验证问题，请提供清晰且信息丰富的错误消息，并确保屏幕阅读器可以访问。使用 `aria-describedby` 将错误消息与相关的输入字段关联起来。

示例：

<div aria-live="polite">
  <!-- 动态内容，例如月份导航 -->
</div>

5. 视觉设计

日期选择器的视觉设计也应该是无障碍的。请考虑以下几点：

• 颜色对比度：确保文本和背景颜色之间有足够的颜色对比度，以满足 WCAG (网页内容无障碍指南) 2.1 AA 级标准。使用颜色对比度检查工具来验证对比度。
• 焦点指示器：为所有交互元素提供清晰可见的焦点指示器。焦点指示器应与周围元素明显区分，且不应被其他元素遮挡。
• 字体大小和间距：使用易于阅读的字体大小和足够的元素间距，以提高可读性和可用性。
• 避免仅依赖颜色：不要仅靠颜色来传达信息。使用其他视觉提示，如图标或文本，来补充颜色编码。

6. 本地化与国际化

日期格式、日历系统和语言习惯在不同文化和地区之间存在差异。确保您的日期选择器已正确本地化和国际化，以支持全球用户。

• 日期格式：使用支持不同日期格式的灵活日期格式化库，例如 DD/MM/YYYY（在欧洲和亚洲部分地区常用）和 MM/DD/YYYY（在北美常用）。允许用户根据自己的偏好自定义日期格式。
• 日历系统：支持不同的日历系统，例如公历（使用最广泛的日历）和回历（在许多伊斯兰国家使用）。
• 语言支持：为日期选择器中的所有文本元素提供翻译，包括月份名称、星期名称和标签。
• 从右到左 (RTL) 支持：确保日期选择器在 RTL 语言（如阿拉伯语和希伯来语）中正确显示。这可能需要调整小组件的布局和样式。
• 时区：在处理日期时，请考虑时区的影响。将日期存储在一致的时区（例如 UTC），并在显示时将其转换为用户的本地时区。

示例：使用像 `moment.js` 或 `date-fns` 这样的 JavaScript 库来处理日期格式化和本地化。

7. 移动端无障碍性

随着移动设备的日益普及，确保您的日期选择器在移动平台上也无障碍至关重要。请考虑以下几点：

• 触摸目标：确保所有交互元素都有足够大的触摸目标，以便在移动设备上轻松点击。苹果公司建议最小触摸目标尺寸为 44x44 像素。
• 响应式设计：使用响应式设计技术，确保日期选择器能适应不同的屏幕尺寸和方向。
• 键盘输入：如果日期选择器需要键盘输入，请提供一个针对日期输入优化的移动友好键盘。
• 手势：避免仅依赖可能对有运动障碍的用户来说难以操作的手势。提供替代的输入方法，例如键盘导航或语音控制。

测试与验证

彻底的测试对于确保日期选择器的无障碍性至关重要。结合使用自动化和手动测试方法：

• 自动化测试：使用 Axe 或 WAVE 等无障碍性测试工具来识别常见的无障碍性问题。
• 手动测试：使用屏幕阅读器和键盘导航手动测试日期选择器，以验证残障人士是否可以使用它。
• 用户测试：与残障人士进行用户测试，以收集反馈并确定需要改进的地方。
• WCAG 合规性：确保您的日期选择器符合 WCAG 2.1 AA 级的要求。

无障碍日期选择器示例

一些开源和商业的日期选择器库提供了良好的无障碍性支持。一些示例包括：

• React Datepicker：一个流行的 React 组件，支持 ARIA 和键盘导航。
• Air Datepicker：一个轻量级、可定制的日期选择器，具有良好的无障碍性功能。
• FullCalendar：一个功能齐全的日历组件，具有全面的无障碍性支持。

在选择日期选择器库时，请仔细评估其无障碍性功能，并确保它满足您的特定要求。

构建无障碍日期选择器的最佳实践

以下是构建无障碍日期选择器的最佳实践摘要：

• 使用语义化 HTML 构建日期选择器。
• 使用 ARIA 属性提供额外的语义信息。
• 确保键盘导航完全实现。
• 使用屏幕阅读器进行测试以验证兼容性。
• 提供足够的颜色对比度和清晰的焦点指示器。
• 为全球用户对日期选择器进行本地化和国际化。
• 为移动设备优化日期选择器。
• 进行彻底的测试和验证。

结论

构建无障碍的日期选择器是一项复杂但至关重要的任务。通过遵循本指南中概述的指导方针和最佳实践，您可以创建能够满足不同能力、跨越不同文化和技术背景的用户的包容性日历小组件。请记住，无障碍性是一个持续的过程，持续的测试和改进对于确保您的日期选择器始终保持无障碍至关重要。通过优先考虑无障碍性，您可以为每个人创造一个更具包容性和用户友好性的网络体验。

更多资源

• WAI-ARIA 创作实践指南 (APG) - 日历
• 网页内容无障碍指南 (WCAG) 2.1
• Deque 大学