平衡设计和可用性的辅助功能基础

网络可访问性 (a11y) 是一项质量标准，旨在改善每个人的体验，不仅针对特定残疾人，还针对键盘用户以及暂时受伤或单手操作的用户。

我们整理了组件设计的要点，以便任何人都可以直观地操作它。

模态对话框设计的三个基本要求

模态框是最常发生可访问性违规的部分。您必须确保满足以下三个要求。

1. 焦点陷阱：打开时，Tab 键移动仅限于模态，防止焦点泄漏到其后面的元素。
2. Escape键操作：按ESC键立即关闭，关闭后将焦点返回到“打开模态框的原始按钮”。
3. 适当的 WAI-ARIA 属性：
   • 授予role =“dialog”和aria-modal =“true”
   • 明确指向标题的“aria-labelledby”

经常被忽视的三大反模式

• 反模式 1：将点击事件附加到 <div> 或 <span>
  • 问题：无法使用键盘（Enter/Space）进行操作，并且不显示为屏幕阅读器的按钮。
  • 解决方案：使用原生 <button> 标签和 CSS 样式。
• 反模式 2：使用占位符作为标签
  • 问题：当您开始打字时它就会消失，从而损害可见性和认知负荷。
  • 已解决：准备一个始终显示的<label>，并使用htmlFor将其与输入的id关联起来。
• 反模式3：对比度不足
  • 问题：对比度小于4.5:1时难以阅读，例如浅灰色文本。
  • 已解决：修复了符合 WCAG 2.1 AA 标准的调色板。

使用 Headless UI 库减少工时

自己从头开始实现可访问性非常耗时。现代标准是使用“高度可访问的无样式 UI 原语”，例如 Radix UI 和 React Aria，并仅应用 Tailwind CSS 等样式。