Web 开发 === 可访问性

可访问性是网络的核心哲学。

我在这个领域待的时间还不长，却已经看到许多无障碍专家因为高喊“无障碍是一种权利，而不是特权”而精疲力竭。我不知道该如何解释你应该关心他人，所以让我这样说吧：

从技术到理念，网络都基于这样一个理念：任何人、任何地点都应该能够访问你的内容。如果你是一名网络开发者，却没有考虑你的页面或应用构建方式会将哪些人排除在外，那么你就不是在为网络开发。

1. 万维网
2. 我们使用的工具
3. 如果你没有进行 Web 开发
4. 学习资源和工具
5. 结论

万维网

最近，我偶然发现了 Mia 为 Mozilla 制作的视频《CSS 为什么这么奇怪？》。我喜欢这个视频的原因之一是，它让我回想起自己还是个初出茅庐的开发者时，独自一人阅读 Mozilla 开发者网络的《Web 入门》。更普遍的原因是，它为我们作为 Web 开发者所尝试做的事情提供了背景：

让尽可能多的人访问内容。

W3C，即万维网联盟，是互联网领域的主要国际标准组织。他们制定了WCAG，并有几份使命宣言，其中第一份是“人人共享的互联网”。

Web 的社会价值在于它促进了人类的沟通、商业往来和知识共享。W3C 的主要目标之一是让所有人都能享受这些优势，无论其硬件、软件、网络基础设施、母语、文化、地理位置，以及身心状况如何。

对于 W3C 来说，这不仅意味着开发辅助技术，还意味着国际化、性能和减少认知负荷。

回想互联网的“美好旧时光”，我们最喜欢回忆的莫过于任何人都可以托管一些内容，然后我们都能去欣赏它那令人毛骨悚然的辉煌。我们最抱怨的，是内容的障碍，比如网速导致图片每次只能加载几个像素。

我们使用的工具

我从不同角度一遍又一遍地听到过这句话。

• JavaScript 具有很强的宽容度，因此它更有可能在页面上显示您需要的内容。
• CSS 会默默地失败，并且通常会保持内容显示。
• 编写不佳的 HTML 仍会显示，因此您应该通过验证器运行您的代码。
• 语义 HTML 内置了信息，以便更多人可以访问其内容。

编写糟糕代码的自由以及我们作为 Web 开发者所抱怨的许多不一致之处，都是特性，而不是 bug。此外，我们的工作是构建 Web 应用程序，让尽可能多的人能够访问我们的内容。正如您编写错误处理、响应式设计和渐进式增强一样，作为 Web 开发者，您的工作是确保无障碍树准确地反映您的内容。就像您在添加额外的 JavaScript 时会考虑从性能角度来看是否合理一样，您在编写事件处理程序时也需要考虑，您会阻止哪些辅助技术获取其所需的状态。

如果你没有进行 Web 开发

• 您已禁用默认辅助功能，但尚未构建替代功能。
• 您的网站生成的可访问性树对于辅助技术没有用。
• 可访问性测试不是发布过程的一部分。

它内置是有原因的。浏览器无法兼容 HTML5 规范或图像类型，但你认为焦点轮廓神奇地出现在所有浏览器中是不必要的吗？

就像使用 Prettier 或 ESLint 一样，您可以使用可访问性检查器。您的工作是将工具添加到工具链中，以支持您编写可访问性强的 Web 代码。您不会问是否应该编写错误处理，因此您无需问是否应该确保所有图片都带有替代文本。

说到这里，很多这类功能可以减少你的工作量，让你能够编写更简洁的代码，并且/或者在出现问题时提供优雅的回退机制。Alt 文本不仅适用于屏幕阅读器，它还可以在你的图片链接断开时显示。

在美国，如果你的雇主真的坚决反对在开发过程中考虑无障碍设施，你随时可以参考《美国残疾人法案》。没错，即使只是一个内部网，你的员工也可以因为无法访问而起诉你。

文档和通俗语言

无障碍性并不会随着代码投入生产而结束。你无法将人为因素从技术中剔除。编写文档，并且尽可能使用通俗易懂的语言，不仅有助于新员工入职，还能让你的开发生命周期更加无障碍。你无法预知新入职的开发人员拥有什么样的背景，公司中哪些部门可能需要参考你的流程，或者你的同事可能存在哪些认知障碍。因此，以八年级阅读水平编写文档是沟通的标准，这是有原因的。

不相信？那就看看茱莉亚·塞德曼的演讲《公平文档》。听听那些对网站绕过信息存档机制感到愤怒的人怎么说。信息应该让需要的人都能获取——这才是网络的真正力量。

学习资源和工具

准备好了解更多了吗？以下是我在过去两年里发现的一些有用的免费资源。如果我漏掉了你喜欢的工具或资源，欢迎留言！

学习网页可访问性

• Mozilla 开发者网络的 Web 入门指南
• 包容性设计原则
• 考虑网络可访问性（WebAIM）
• 如何设置屏幕阅读器
• 手部震颤和巨型按钮问题
• W3C 无障碍基础
• W3C 的 Web 无障碍入门课程
• W3C 的 WCAG 标准指南
• 测试可访问性研讨会资源（作者：Marcy Sutton）
• 哈佛大学的数字无障碍资源
• 无障碍迷宫
• 魔法：焦点
• 明尼苏达大学杜鲁斯分校 Webdev 简讯
• a11yproject 资源列表

用通俗易懂的语言写作

• 通过更简单的写作来改变你的内部沟通
• 简而言之——创建易于理解的材料的指南

工具

• WebAIM 对比度检查器
• 可访问的颜色生成器
• 合理的颜色
• a11ysupport - caniuse 但为了可访问性

测试

• 手动可访问性测试：原因和方法
• 手动可访问性测试的重要性
• Chrome 和 Firefox 的 DevTools 中都有辅助功能工具
• 网络可访问性评估工具（WAVE）
• axe DevTools 扩展
• 适用于 Chrome 开发工具的 ARC 开发工具包
• IBM 平等访问可访问性检查器
• Microsoft 辅助功能洞察
• axe 辅助功能 Linter

结论

我想明确一点：你应该关心那些被你的应用排除在外的用户。大多数网站无法访问意味着超过十亿人的独立性和选择受到限制。然而，我还是看到有人参加无障碍会议，问为什么还需要无障碍专家……

Web 可访问性是一个庞大的话题，其中存在许多灰色地带。需求会根据浏览器和用户的不同而变化。只要你努力学习更多相关知识，倾听那些受到伤害或被排斥的人的声音，并运用你所了解的知识，你就是在为 Web 进行开发。