无障碍设计

POUR 是理解 WCAG 标准的四支柱。可感知：信息与界面组件必须能被用户以某种感官通道接收，文字替代给图片、字幕给视频、不只是颜色传达信息，确保视觉障碍者能感知内容。可操作：所有功能都能通过多种方式操作，键盘可达是核心，不用鼠标也能完成全部任务；给用户足够时间或可延长；避免闪烁引发癫痫；提供跳转与焦点管理。可理解：内容与操作方式可读可预测，界面语言直白、术语有解释、导航一致、错误提示说明原因与解法，输入容错。健壮性：内容与足够广泛的用户代理兼容，语义化标记让辅助技术如屏幕阅读器能正确解析，遵循标准是技术底线。四原则下分十七条指南与可测试的成功标准，标准又分 A、AA、AAA 三级，行业普遍以 AA 为达标线。回答时每个原则配一个反例更生动，例如只能鼠标拖动的滑块违反可操作。

WCAG 用对比度比值衡量前景与背景的亮度差，范围一比一到二十一比一。要求分级：正文文字至少 4.5 比 1；大号文字（大于等于十八点常规或十四点加粗）放宽到 3 比 1，因为大字本身更易辨认；界面组件与图形对象，如图标、输入框边框、焦点指示，至少 3 比 1，确保可交互元素能被看见。等级归属上正文 4.5 属 AA，7 比 1 才是 AAA，多数产品承诺 AA。设计落地要点：一是把达标色对固化进设计系统 Token，例如文字主要色配背景一级的组合预先验证，禁止随手取色；二是警惕弱对比的流行做法，浅灰文字配白底、白字压浅色照片经常不达标，照片上文字要加深色遮罩；三是非文字信息（图表线条、状态描边）也要过 3 比 1；四是深色模式单独验证一套组合。自查用 WebAIM 对比度检查器输入色值即可。这是无障碍面试的第一题，数字必须记准。

键盘是辅助技术操作的基础，要点有八条。一是全量可达，所有交互功能不依赖鼠标，包括下拉、弹层、拖拽都要有键盘等价操作，拖拽至少提供按钮替代。二是 Tab 顺序符合逻辑，焦点沿着视觉与语义顺序移动，禁止乱跳，自定义组件要修正焦点序。三是焦点必须可见，浏览器默认焦点环不能随手去掉，自定义焦点态对比度至少 3 比 1，用焦点样式而不是悬停样式区分。四是焦点管理，打开弹窗时焦点移入弹窗、关闭时还给触发元素，否则键盘用户会迷失在背景页；路由切换后焦点移到新内容顶部。五是键盘快捷键，复杂操作提供快捷键并可在说明中找到，但不能覆盖浏览器与屏幕阅读器保留键。六是跳过重复导航，提供跳到主内容链接。七是 ESC 与回车的语义正确，ESC 关闭弹层、回车提交。八是陷阱防范，焦点不允许困死在某个组件里。验收方式是拔掉鼠标完整走一遍核心任务。

替代文本的作用是把图像信息翻译给读屏用户，写法按图片类型分四种。信息型图片（图表、示意图、有含义的照片）要传达图像的目的与关键信息，例如展示增长的折线图写第三季度销售额环比增长百分之二十，而不是一张图。装饰型图片（分隔线、氛围配图）应设空替代文本，让读屏直接跳过，写上装饰两个字反而是噪音。功能型图片（图标按钮、链接图）描述动作而非外观，放大镜图标写搜索而不是放大镜。复杂图像（数据图表）简短替代文本加长描述，正文或附录给出完整数据说明。写作原则：简洁准确，一般一百二十五字符内；不要以图片开头，读屏已自动播报图形类型；避免冗余，与正文重复的信息不再写；不用文件名或尺寸占位。验证方法是关闭图片或用读屏听一遍页面，能否获得同等信息。常见的 alt 等于图片两字这种占位是质量红线。

移动端无障碍覆盖视觉、操作与系统特性三方面。视觉上：动态字体支持，布局随系统字号缩放而不破版，文字用相对单位；对比度标准与 Web 一致；颜色之外用图标加文字传达状态，例如错误同时有红色与图标和文案，照顾色盲用户；深色模式保证对比度不劣化。操作上：触摸目标至少四十四乘四十四点，间距防误触；手势提供按钮等价，如滑动删除配编辑模式；屏幕旋转与单手可达性考虑。系统辅助特性适配上：为读屏提供正确的标签与顺序，图片图标设替代文本或标记装饰；表单控件与标签正确关联，让 VoiceOver 能读出字段名；焦点顺序与视觉顺序一致；避免自动播放音视频与频繁闪烁；实时区域让动态内容（新消息、报错）能被读屏播报。iOS 与安卓各有官方无障碍指南与内置检测工具。验收必须用真机开 VoiceOver 或 TalkBack 完整跑一遍核心流程，模拟器不可靠。