# 无障碍

> 让每个人都能用你的 Shoplazza 应用：键盘导航、语义化结构、表单标签、颜色对比度、媒体替代文本与触控目标尺寸。

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

用 [Lighthouse](https://developers.google.com/web/tools/lighthouse)、[Accessibility Insights for Web](https://accessibilityinsights.io/en/) 或 [WAVE](https://wave.webaim.org/) 等工具测试你的应用。

## 支持键盘操作

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

- 所有链接、按钮、菜单和表单控件都必须能用 `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）](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html)规定的水平——普通文本 4.5:1。用[对比度检测工具](https://contrast-ratio.com/)检查你的配色。

## 给图片和媒体加描述

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

## 触控目标留足尺寸

主要触控目标至少 44 × 44 像素——完整的移动端指引见[移动端适配](/docs/app/best-practices/mobile-support)。