CSS 决定视觉呈现，也可能影响可访问性。

核心概念

• 确保文本与背景色满足对比度要求。
• 避免依赖颜色传达信息，提供额外提示。
• 聚焦样式需明显，帮助键盘用户。

实战步骤

• 使用 :focus-visible 提供自适应焦点样式。
• 引用系统字体提升可读性与性能。
• 对隐藏内容使用 visually-hidden 保持语义。

进阶建议

合理利用原生元素和 ARIA，可以显著提升可访问性。

核心概念

• 优先使用原生交互元素，如 <button>、<a>。
• ARIA 只在必要时使用，避免与原生语义冲突。
• 焦点管理与键盘交互是核心指标。

实战步骤

• 在模态对话框中使用 role=dialog 与 aria-modal。
• 表单元素配对 <label> 与 id。
• 为复杂网格提供 aria-colcount、aria-rowcount。

无障碍支持是专业应用的基本能力，React 需要在语义与交互上达标。

核心概念

• 确保语义化标签，例如按钮、标题、导航。
• 使用 aria-* 属性补充辅助信息。
• 管理焦点顺序与键盘操作，提升可用性。

实战步骤

• 构建 useFocusTrap Hook 管理模态对话框焦点。
• 利用 react-aria 提供的可访问组件基元。
• 对复杂组件编写 Axe 自动化测试。