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=""
• 为视频提供字幕
• 为音频内容提供文字记录
• 使用描述性链接文本（避免“点击这里”）

文本和排版

• 对排版使用相对单位（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 命名方法）
• 使用媒体查询实现响应式设计
• 确保悬停状态也有焦点等效状态