Web 无障碍（a11y）面试题
模拟真实面试场景，训练对 WCAG、语义化、ARIA、键盘可访问性与测试的理解与表达。
一、基础题
1. 什么是 Web 无障碍（a11y）？为什么要关注它？基础
2. 解释 WCAG 的 POUR 四项原则。基础
3. 语义化 HTML 对无障碍有什么作用？基础
4. 图片的 alt 属性应该如何填写？基础
5. 为什么不应该只用颜色传达信息？基础
二、进阶题
6. 什么是 ARIA？应该在什么情况下使用？进阶
7. 如何设计一个可访问的模态对话框？进阶
8. 表单可访问性有哪些关键点？进阶
9. 如何进行可访问性测试？进阶
三、高级题
10. 设计一个可访问的自定义下拉选择组件。深入
参考答案要点：
- 语义：使用
role="combobox"、aria-expanded、aria-controls、aria-activedescendant。 - 键盘交互：
- Alt + ↓ / Enter：打开列表
- ↑ ↓：移动选项
- Enter：选中
- Esc：关闭
- 焦点管理：列表项使用
tabindex="-1"，通过 aria-activedescendant 管理高亮。 - 状态播报：使用
aria-live或正确 ARIA 属性让屏幕阅读器感知变化。 - 视觉：高亮项清晰可见，选中项有明确标识。
评分维度：
- ARIA 角色与属性（30%）
- 键盘交互（30%）
- 焦点管理（20%）
- 视觉与状态同步（20%）
11. 如何在大型团队中推动无障碍文化落地？深入
参考答案要点：
- 建立规范：制定无障碍开发规范和检查清单。
- 工具链集成：在 CI 中接入 axe/Pa11y，阻塞明显违规。
- 组件库默认可访问：组件库提供无障碍默认实现和文档。
- 培训与意识：定期分享无障碍知识和案例。
- 度量和问责：将可访问性指标纳入质量门禁和绩效。
- 真实用户反馈：建立无障碍反馈渠道。
评分维度：
- 规范与清单（25%）
- 工具链集成（25%）
- 组件库与培训（25%）
- 度量与反馈（25%）
12. 解释一下 aria-live 的使用场景和注意事项。深入
参考答案要点：
aria-live 用于告知屏幕阅读器某个区域的内容会动态更新，需要播报。
取值：
off：不自动播报（默认）。polite：当前任务完成后再播报。assertive：立即打断当前播报。
使用场景：
- 表单提交后的成功/错误提示。
- 实时通知、Toast 消息。
- 加载状态变化。
注意事项：
- 避免过度使用
assertive，会打断用户。 - 动态区域应在页面加载时就存在，而不是动态创建。
- 搭配
aria-atomic和aria-relevant控制播报范围。
评分维度：
- 解释 aria-live 取值（30%）
- 使用场景（30%）
- 注意事项（30%）
- 代码示例（10%）
13. 解释什么是焦点陷阱（Focus Trap）？在哪些场景下需要使用？实现时需要注意什么？深入
14. 什么是 Roving Tabindex 模式？适用于哪些组件？请举例说明。深入
15. 如何为单页应用（SPA）实现合理的焦点管理和页面标题更新？深入
16. 解释 WCAG 2.2 新增的 Focus Not Obscured（2.4.11）和 Target Size（2.5.8）标准。它们对前端开发有什么实际影响？深入
17. 如何设计一个可访问的拖拽排序组件（Drag and Drop）？深入
18. 对比手动可访问性测试和自动化可访问性测试的优劣势。应该如何制定团队的测试策略？深入
19. 解释 APCA（Accessible Perceptual Contrast Algorithm）与 WCAG 2.x 对比度算法的区别。为什么社区在推动 APCA？深入
20. 在 React 中设计可访问组件时，有哪些关键原则和常用库？深入