跳到主要内容

无障碍

无障碍的应用人人都能用，包括依赖屏幕阅读器、纯键盘操作等辅助技术的人。这些实践基于 Web 内容无障碍指南（WCAG）；遵循它们不保证完全无障碍，但覆盖了对应用用户影响最大的问题。

用 Lighthouse、Accessibility Insights for Web 或 WAVE 等工具测试你的应用。

支持键盘操作​

有视觉或运动障碍的用户往往完全用键盘操作：

  • 所有链接、按钮、菜单和表单控件都必须能用 Tab / Shift+Tab、Enter、Space 触达和操作。
  • 保持焦点指示器在活动元素上可见——不要删掉 outline 而不提供替代样式。
  • 不依赖悬停（hover）来展示功能。
  • 不强制跳转焦点：避免 autofocus 和 0、-1 以外的 tabindex 值；元素获得焦点时不要切换上下文。
  • 模态框和抽屉：打开时焦点移入对话框，键盘导航保持在框内，支持 Esc 关闭并把焦点还给触发元素。用 role="dialog" 标识。

用语义化结构组织页面​

屏幕阅读器按结构导航，HTML 要按语义使用：

  • 在 html 元素上设置 lang 属性，让内容以正确的语言朗读。
  • 标题标签（h1–h6）按逻辑顺序使用——每页一个 h1、不跳级、不为了样式用标题。
  • 导航用 a、页面内动作用 button；链接文字单独读也要有意义。
  • 表格数据用 table 配 th 和 scope 属性。
  • 不禁用缩放：viewport meta 标签里避免 maximum-scale 和 user-scalable=no。

给每个表单字段加标签​

  • 每个输入框都要有标签——可见的 <label for> 最好；放不下可见标签时用 aria-label。
  • 必填项加 required 属性；浏览器能代填的字段用 autocomplete。
  • 校验失败时，焦点移到错误信息上、清晰描述问题，并用 aria-describedby 把信息关联到字段。错误和成功提示用 aria-live 播报给屏幕阅读器。

保证颜色对比度​

不要只靠颜色传递信息，文本对比度保持在 WCAG 1.4.3 Contrast（Minimum，Level AA）规定的水平——普通文本 4.5:1。用对比度检测工具检查你的配色。

给图片和媒体加描述​

  • 每个 img 都要有 alt 属性：有意义的图片写描述文字，装饰性图片用空的 alt="" 让屏幕阅读器跳过。
  • 动画尊重用户的 prefers-reduced-motion 设置。
  • 自动播放的内容——轮播、视频——必须可暂停，自动播放的视频必须静音。

触控目标留足尺寸​

主要触控目标至少 44 × 44 像素——完整的移动端指引见移动端适配。