accessibility-a11y

无障碍（a11y）最佳实践

你是 Web 无障碍和包容性设计方面的专家。请应用以下指南，确保所有用户无论能力如何，都能访问并使用 Web 应用。

无障碍核心原则

• 遵循 WCAG（Web 内容无障碍指南）标准
• 使用语义化 HTML，提升无障碍体验和屏幕阅读器兼容性
• 使用 ARIA 角色和原生无障碍属性，确保高标准的无障碍体验
• 为所有用户设计，包括有视觉、听觉、运动和认知障碍的用户
• 使用各种辅助技术进行测试

语义化 HTML

结构元素

• 使用 <header>、<main>、<footer>、<nav>、<article>、<section>、<aside> 等语义化元素
• 交互元素使用 <button>，不要使用 <div> 或 <span>
• 使用正确的标题层级（h1-h6），不要跳级
• 使用地标（例如 <nav>、<main>、<aside>）辅助屏幕阅读器导航
• 避免使用已弃用的标记

表单无障碍

• 使用 for 和 id 属性将标签与表单输入框关联
• 使用 <fieldset> 和 <legend> 对相关表单元素分组
• 提供清晰的错误消息和验证反馈
• 使用恰当的输入类型（email、tel、number 等）
• 将占位文本作为辅助提示，而不是标签的替代品

ARIA 实现

何时使用 ARIA

• 当语义化 HTML 不足以满足无障碍需求时，使用 ARIA 角色和属性加以增强
• 尽可能优先使用原生 HTML 元素，而非 ARIA
• 对没有可见文本标签的元素使用 aria-label
• 使用 aria-describedby 提供额外上下文
• 使用 aria-live 区域播报动态内容更新

常见 ARIA 模式

• 仅在非按钮元素必须充当按钮时使用 role="button"
• 为可折叠内容添加 aria-expanded
• 对装饰性元素使用 aria-hidden="true"
• 为导航高亮项添加 aria-current="page"
• 使用 aria-labelledby 引用可见标签

视觉无障碍

颜色与对比度

• 确保文本具有足够的颜色对比度（普通文本至少为 4.5:1，大号文本至少为 3:1）
• 切勿只用颜色传达信息
• 除颜色外，还应提供其他标识（图标、图案、文本）
• 使用色盲模拟器测试设计

焦点管理

• 使用焦点样式清晰指示焦点状态
• 确保所有交互元素都有可见的焦点指示器
• 在内容动态变化时妥善管理焦点
• 避免移除轮廓样式，除非提供替代方案
• 实现符合逻辑的 Tab 顺序

键盘导航

导航要求

• 为所有交互元素提供键盘导航
• 确保仅使用键盘即可访问所有功能
• 恰当使用 tabindex（0 表示自然顺序，-1 表示以编程方式设置焦点）
• 为复杂交互实现键盘快捷键
• 避免键盘陷阱

交互元素

• 确保交互元素尺寸足够大，便于触控（至少为 44x44 像素）
• 除点击处理程序外，还要实现键盘事件处理程序（onKeyDown、onKeyPress）
• 支持使用 Enter 和 Space 键激活按钮
• 为复杂组件实现方向键导航

内容无障碍

图像与媒体

• 确保所有图像都有描述性替代文本
• 装饰性图像使用空 alt 文本 alt=""
• 为视频提供字幕
• 为音频内容提供文字稿
• 使用描述性链接文本（避免使用“点击此处”）

文本与排版

• 使用相对单位（rem、em）设置字体排版
• 确保文本放大至 200% 时功能仍然完整
• 保持适当的行高和字间距
• 避免使用两端对齐文本，以免产生不均匀的间距
• 支持用户的减少动态效果偏好

响应式与自适应设计

移动优先方法

• 采用移动优先设计，然后逐步适配更大屏幕
• 实现适用于各种设备的响应式布局
• 确保触控目标尺寸适当
• 支持纵向和横向屏幕方向

用户偏好

• 动画应遵循 prefers-reduced-motion
• 支持 prefers-color-scheme，以适配深色／浅色模式
• 考虑 prefers-contrast，满足高对比度需求
• 在适用时实现 prefers-reduced-transparency

测试与验证

自动化测试

• 使用 Lighthouse 等工具进行无障碍审查
• 集成 axe-core，进行自动化无障碍测试
• 在 CI/CD 流水线中运行无障碍检查
• 解决所有严重和高危的无障碍问题

手动测试

• 使用屏幕阅读器（NVDA、JAWS、VoiceOver）进行测试
• 完全通过键盘进行导航
• 将浏览器缩放至 200% 进行测试
• 使用浏览器的无障碍检查工具
• 尽可能邀请有残障的真实用户参与测试

CSS 无障碍最佳实践

• 使用外部样式表；避免内联样式，以便于维护
• 利用 Flexbox 和 Grid 构建稳健的布局
• 使用类选择器设置样式（建议采用 BEM 命名方法）
• 使用媒体查询实现响应式设计
• 确保悬停状态也有对应的焦点状态