当前位置：首页>热门 > >正文

前端无障碍开发指南

2023-05-16 10:42:37来源：Thoughtworks洞见

作者|孙郁俨

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect," saidTim Berners-Lee, W3C Director and inventor of the World Wide Web.

30年前，Tim Berners-Lee 在欧洲核子研究中心创建了第一个 Web 网页，宣告了万维网的诞生。自此，万维网就承载着开放平等的愿景。

Accessibility——无障碍设计&信息无障碍（也简称为 A11y），虽然常常会被解释为”为残障人士服务“，但其无障碍设计的核心在于为所有人提供同等的体验。我们每个人都有可能在某些时刻成为失能者，这称为场景性残疾（situational disability & temporary disability），比如受伤骨折后，暂时失去了部分活动能力。又比如被强光照射时，看不清楚事物，在嘈杂地铁中的听力产生障碍等等。

根据 W3C 组织的定义，Web accessibility 意味着每个人都可以感知、理解并与 Web 交互，甚至为 Web 做出贡献。中国工信部也指出，信息无障碍是指通过信息化手段弥补身体机能、所处环境等存在的差异，使任何人（无论是健全人还是残疾人，无论是年轻人还是老年人）都能平等、方便、安全地获取、交互、使用信息。

但在万物互联的当下，尽管我们的衣食住行早已与网络世界息息相关，互联网并未成一个平等的，人人都可以访问的世界。根据2022 年 The WebAIM Million 统计报告，在对100万个网站首页进行无障碍分析后，得到的结果却差强人意：

在 100 万个首页中，一共检测到50,829,406项非重复的无障碍错误，平均每个首页有50.8个错误。96.8%的首页检测到了WCAG 2错误，未能达到 WCAG 2的标准，尽管现在最新的标准是WCAG 2.1在残障用户的页面访问流程中，每交互19个首页元素，就可能遇到一个无障碍错误

图源：2022 年 The WebAIM Million 报告

在这些页面无障碍错误中，96.5%的错误归属于以下五类：

页面颜色对比度不达标，影响视力障碍用户的访问体验。未定义标签的alt属性，影响辅助技术（Assistive technologies, ATs) 如屏幕阅读器等设备获取图片信息。空链接和空按钮，指不包含不包含实际的文本的标签或标签，读屏软件将读出 “Button, foo"，告知用户当前元素是按钮，包含文字 foo。但对于

FOO

标签，读屏软件只能读出 “foo”，并不能提示当前元素是一个可交互的按钮。虽然我们也可以通过设置 WAI-ARIA 属性为 HTML 标签增添无障碍语意，比如

FOO

，但这样会平添许多额外的工作，也增加了出错的机率：根据 The WebAIM Million 统计报告，包含 ARIA 的页面比不使用 ARIA 的页面，检测出无障碍性错误的可能高 70%。

通过 HTML 提升页面可访问性规则 1：结构和样式分离

在社区中一直都有人在提倡 CSS裸奔日（CSS Naked Day），编写 HTML 时不要基于 UI 视觉效果（CSS 样式），而是基于 UI 的页面结构，可以确保 HTML 的语义完善，增强页面可访问性。

相关浏览器插件：HeadingsMap - Chrome Web Store

规则 2：只在必要时使用 ARIA

WAI-ARIA 的全称是 Accessible Rich Internet Applications，简称 ARIA，是 W3C规范之一。ARIA 允许 Web 开发者创建只有 ATs 技术（比如屏幕阅读器）可以看到的内容（属性），用以实现 HTML 无法达成的无障碍功能，比如：

增强交互式控件的可访问性，比如下拉菜单、弹窗，滑块等为页面结构定义有用的地标定义动态更新的“活动区域”改善键盘可访问性和交互性

ARIA 表现为 HTML 的属性，确定了元素的 ARIA 角色、状态和属性。这些信息帮助 ATs 技术更好地理解 Web 页面，确保用户与页面元素的交互。一般情况下，ARIA 不会影响 Web 页面的渲染，也不会影响鼠标或键盘用户的行为，只有使用辅助技术的用户才能感知到 ARIA。开发人员随意使用 ARIA 所导致的问题，对于页面无障碍功能往往是致命的，而且难以察觉。

但 ARIA 永远无法替代语义化 HTML 标签，NO ARIA is better than bad ARIA。请优先考虑语义最贴近的 HTML 标签，只在必要时使用 ARIA。