✨ 无障碍：温和的介绍 ✨

定义

我曾多次尝试寻找一份全面但又不至于过于详细的团队无障碍技术入门指南。因此，我决定整理这份指南。它献给所有想要摆脱日常编码工作、呼吸新鲜空气的人。
本文或许能解答一些抛开编码的常见问题，例如：

• 谁负责无障碍设施？
• 谁定义网络可访问性？
• 共同原则
• 立法
• 第一步

定义

从最基本的层面上讲，可访问性确保每个人，无论是否有能力或残疾，都可以访问您的网站或应用程序。

然而，定义比这更微妙。网络从根本上来说，是经过设计的to work for all people。然而，设计不良、难以访问的应用程序会导致大规模的排斥。

谁定义网络可访问性？

👉 万维网联盟 (W3C) - Web 内容可访问性指南 (WCAG)

💡 需要注意的是，WCAG 标准本身只是指南，而非法律。W3C 本身会根据这些标准对组织进行评估，但无权强制执行。

《Web 内容无障碍指南》（WCAG）2.1 是一套全面的 Web 无障碍标准。目前，它也是全球许多地区 Web 无障碍立法的基础。在欧洲，该指南被引用于 EN 301 549 标准《信息通信技术产品和服务的无障碍要求》，该标准是欧盟 Web 无障碍立法的基础。

谁负责团队内的无障碍设施？

为了保持承诺的有效性，更重要的是，将其转化为行动，所有团队成员都需要了解自己在各自岗位上应该如何做出贡献。这不仅限于直接参与 Web 制作的人员，例如设计、开发、创作、工程和测试人员。

虽说无障碍设计是团队的职责，但它应该从一开始就融入到设计流程和产品定义中。开发人员必须竭尽全力去推广无障碍设计，并熟悉相关的工具，但幸运的是，他们并非孤军奋战。

👉 角色的无障碍责任：
无障碍责任细分

可访问性原则

👩🏻‍🚀 网络内容可访问性的行业标准指南围绕四项原则组织：Perceivable、、和Operable。UnderstandableRobust

P
信息和用户界面组件必须以用户可感知的方式呈现给他们。💡
您的网站是否适合视力障碍人士使用？或者采用灰度模式？

O
用户界面组件和导航必须可操作。💡
功能可以通过键盘使用吗？用户可以使用键盘以外的其他输入方式吗？

U
信息和用户界面的操作必须易于理解。💡
文本是否可读易懂？是否能够帮助用户避免和纠正错误？

R
内容必须足够强大，以便能够被各种用户代理（包括辅助技术）解释。💡内容与不同的浏览器和 辅助技术Robust兼容。

该指南包含测试时需满足的三个级别的成功标准。这些级别分别用 A、AA 和 AAA 表示，其中 AAA 表示最高合规级别，A 表示最低合规级别，但仍符合要求。

🧑‍⚖️ 立法（欧洲）

在欧盟内部，《网络无障碍指令》的实施是目前推动公共部门对网络无障碍知识和服务需求的首要因素。随着即将出台的《欧洲无障碍法案》，未来几年私营部门也将面临新的法律约束。

《网页无障碍指令》的执行基于监测、自我声明以及终端用户投诉机制。如果指令涵盖的机构未能履行其义务，则可能被处以罚款。

欧洲无障碍法案

《欧洲无障碍法》（指令 (EU) 2019/882）是一项将于 2022 年在成员国生效的指令。该法案涵盖私营部门，并重点关注某些被认为对残疾人最重要的无障碍产品和服务。

欧盟（2019）。《欧洲无障碍法》。欧洲议会和理事会于2019年4月17日颁布的关于产品和服务无障碍要求的指令（EU）2019/882。

EUR-Lex - 32019L0882 - EN - EUR-Lex

欧洲ICT无障碍标准：EN301549

欧洲标准“EN301549 v.2.1.2 ICT 产品和服务的可访问性要求”被视为符合 Web 可访问性指令的最低要求。

附件 B 涵盖了功能性能说明与技术要求之间的关系，可用于帮助读者理解
不合规对不同用户组意味着什么。

当谈到网络可访问性的技术要求时，EN301549
指的是国际标准WCAG 2.1 AA。

残障人士种类繁多，但无障碍设计旨在确保人们无论能力如何都能使用网络。重要的是要考虑并设计不同类型的用例，如 EN301549 中所列。

• 无视觉使用
• 视力受限时使用
• 无颜色感知的使用
• 未听取意见的使用
• 听力有限时使用
• 不使用语音功能
• 无需操作或力量即可使用
• 使用范围有限
• 尽量减少光敏性癫痫诱因
• 认知能力有限的情况下使用

作为开发人员的第一步

项目状态🥽
您可以调查并尝试的第一个建议是集成一个简单的审核工具，例如用于 DOM 的axe，以查找潜在的可访问性问题，只需查看您的进度和感受即可。手动测试一开始可能会很困难，因为您不知道自己在测试什么。它是开发环境中的一个集成，应该非常简单，它会在开发功能时在控制台中提供有用的提示。

如果你正在设置自动化测试（你可能应该这样做），你甚至可以将 ax 与 Cypress 集成

👩🏻‍🚀 能自动化的就这么多。审核 HTML 和 CSS 中潜在的缺陷是一个不错的开始，但最终它无法取代一些谨慎的手动测试。

拿一些清单✅

WCAG 2.1 快速参考清单👉 http://www.w3.org/WAI/WCAG21/quickref/

Deque Web 开发人员可访问性检查表👉 https://dequeuniversity.com/checklists/web

面向开发人员的 Deque Web 可访问性检查表 PDF 👉 https://media.dequeuniversity.com/public/en/docs/deque_web_accessibility_checklist.pdf

Deque 设计师基本 Web 可访问性检查表 👉 https://dequeuniversity.com/assets/pdf/module-design/dq-designers-checklist.pdf

总结

请记住，此介绍是可访问设计和网络的起点，而不是终点。

了解这些工具并能够清楚地解释我们所做工作的重要性，这会产生很大的不同，如果你刚刚加入 a11y 社区，我希望你留下来🙃

如果您喜欢这篇文章以及我整理的信息，请与您的同事分享，并通过 Twitter 与我联系，无论您喜欢它还是有建议💚

在 Twitter 上关注我👇