Web 可访问性 (A11y)：开发人员实用指南

可访问性 (A11y) 确保有视觉、听觉、运动或认知障碍的人可以与用户一样有效地使用网络，而不受任何限制。 2025年，WCAG2.2指南为参考标准，搜索引擎优先考虑可访问的网站。

为什么投资 A11y？

• 包容性，将您的产品的覆盖范围扩大到数百万用户。
• SEO、语义属性和替代文本改进了索引。
• 法律，许多司法管辖区要求合规（例如[LGPD22、ADA）。
• 可用性，良好的做法有益于每个人，而不仅仅是残疾人。

WCAG2.2 的主要支柱

支柱	描述	快速示例
值得注意	信息必须易于呈现，以便每个人都能理解。	图像中的0，视频中的字幕。
可操作	界面必须可通过键盘和向导进行导航。	1 自定义元素。
可以理解	内容和用户界面必须清晰且可预测。	详细的错误消息。
稳健	与当前和未来的辅助技术兼容。	正确使用语义 HTML5 元素。

快速实施清单

• 替代文本，所有2图像都有3描述。
• 角色和 ARIA，必要时使用 4 和 5 属性。
• 对比度，最小比例为 4.5:1（文本）和 3:1（图形）。
• 字体大小，允许调整大小高达 200%，而不会丢失内容。
• 键盘导航，所有控件均可聚焦 (6)。
• 可见焦点，对焦时清晰高亮（7 或 8）。
• 字幕，视频嵌入了9或10。
• 无障碍表格，11与12相关。
• 错误消息，通过 13 公布。
• 使用工具测试，斧头，灯塔，WAVE。

自定义按钮和屏幕阅读器

[辅助功能23]的一个敏感点是定制按钮，这些按钮构建在图标上，没有可见的文本。仅由“X”表示的“关闭”按钮不会对使用屏幕阅读器的任何人说出任何信息。解决方案是为控件提供可访问的标签（例如，通过14），用文字描述操作，并将装饰图标标记为辅助技术不可见。一般原则：每个交互式控件都需要通过文本传达其功能，即使该文本没有出现在屏幕上。

测试可访问性

1. Lighthouse，打开开发工具 → 审核 → 辅助功能。
2. axe-core，实时突出显示违规行为的 Chrome 扩展。
3. NVDA / VoiceOver，使用屏幕阅读器浏览网站。
4. 仅键盘，禁用鼠标并使用15161717。

高级最佳实践

• 跳过链接，顶部的隐形链接跳转到主要内容。
• 地标、18、19、2021 有助于结构。
• ARIA-Live Regions，自动宣布动态更新（例如 toast）。
• 焦点管理，打开模态时，将焦点移动到第一个内部元素，关闭时返回到触发器。
• 颜色测试，使用色盲模拟器来验证对比度。

有用的工具

工具	用途
axe 开发工具	实时检测 WCAG 违规行为。
灯塔	绩效审核、SEO 和 A11y。
波浪	[辅助功能24问题的可视化报告。
色彩对比分析仪	检查对比度。
屏幕阅读器	NVDA (Windows)、VoiceOver (macOS)、TalkBack (Android)。

结论

实施**[辅助功能25**不是可选的；它对于创造包容性数字体验、改进搜索引擎优化和遵守法律要求至关重要。通过遵循上面的清单，采用良好的语义标记实践并使用自动和手动工具进行测试，您的网站将准备好为所有用户提供服务。

---

您是否已实施任何 A11y 解决方案？在评论中分享您的经验！

另请阅读

• [数字辅助用户体验 - 扩展完整指南26
• [数字无障碍用户体验 - 初创公司完整指南27
• [数字辅助用户体验 - 小团队完整指南28
• [渐进式 Web 应用程序：原生 Web 体验完整指南29
• [移动应用程序的辅助功能 - 带示例的完整指南30
• [包容性设计31