无障碍性

Raaghu 设计系统遵循无障碍最佳实践，以确保组件能与辅助技术配合使用，并符合 WCAG 2.1 AA 标准。

---

颜色对比度

默认颜色选择符合 WCAG 2.0 AA 级别要求：

• 普通文本: 最低 4.5:1 对比度
• 大文本: 最低 3:1 对比度
• 交互元素: 最低 3:1 对比度

指南：

• 不要仅依靠颜色传达信息
• 使用多种视觉提示（图标、文本、图案）
• 使用无障碍工具测试颜色组合

---

高对比度支持

浏览器支持：

• 主流：Microsoft Edge 和 Internet Explorer 11
• 次要：Mozilla Firefox

最佳实践：

// ✅ 使用语义化 HTML 元素
<button>Click me</button>

// ❌ 避免使用非语义元素进行交互
<div onClick={handleClick}>Click me</div>

高对比度 CSS：

@media (-ms-high-contrast: active) {
  .custom-element {
    background-color: ButtonFace;
    color: ButtonText;
    border: 1px solid ButtonText;
  }
}

---

屏幕阅读器支持

主要支持：Microsoft Edge 搭配 Windows Narrator

ARIA 实现：

// 描述性标签
<button aria-label="Close dialog">×</button>

// 进度指示器
<div
  role="progressbar"
  aria-valuenow={50}
  aria-valuemin={0}
  aria-valuemax={100}
>
  50%
</div>

// 动态内容的实时区域
<div aria-live="polite">{statusMessage}</div>

仅屏幕阅读器可见文本：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

---

键盘导航

焦点管理：

.interactive-element:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

键盘交互：

• Tab/Shift+Tab: 在元素之间导航
• Enter/Space: 激活按钮和链接
• 方向键: 在组件内导航
• Escape: 关闭模态框或取消操作

---

组件示例

无障碍按钮：

<RdsButton
  label="Submit form"
  aria-describedby={hasError ? "error-message" : undefined}
/>

无障碍表单：

<label htmlFor="email">Email *</label>
<input
  id="email"
  type="email"
  aria-invalid={hasError}
  aria-describedby="email-error"
/>
{hasError && (
  <div id="email-error" role="alert">
    Please enter a valid email
  </div>
)}

无障碍模态框：

<div
  role="dialog"
  aria-labelledby="dialog-title"
  aria-modal="true"
>
  <h2 id="dialog-title">Confirm Action</h2>
  {/* 模态框内容 */}
</div>

---

测试工具

• axe DevTools
• WAVE Evaluator
• Color Contrast Checker

测试检查清单：

1. 仅使用键盘导航
2. 屏幕阅读器测试
3. 高对比度模式
4. 色盲模拟
5. 自动化无障碍扫描