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

前端无障碍开发指南

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

作者|孙郁俨

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。

相关浏览器插件：

Visual ARIA - Chrome Web StoreLandmark Navigation via Keyboard or Pop-up - Chrome Web Store规则 3：提升表单结构的包容性

(1) 采用

为表单项分类

当表单分为不同板块时，我们可能会使用

元素实现表单项的样式板块划分，但这样的划分并不利于无障碍设备获得表单项信息，可以使用进行替换。

(2) 正确使用label，为标签设置对应的label

在实现表单时，我们往往会通过placeholder来提示当前表单项的填写内容。这样的设计会导致当input得到焦点时，placeholder自动消失，造成用户无法感知当前表单项的内容。我们可以使用label充当placeholder，这样的交互方式也称为Float Label Pattern

(3) 尽可能使用原生的表单元素

在制作表单组件时，我们往往会出于实现 UI 样式的要求，采用

替代原生的表单元素。尽管这些表单组件在视觉和功能上满足了 UI 要求，但它们并未实现原生表单元素的无障碍功能。

(4) 为表单元素设置原生的校验属性

required、minlength、pattern等表单的原生校验属性，不但可以满足正常的表单校验需求，也具有更好的无障碍支持

规则 4：注意页面的焦点管理，允许用户仅通过键盘完成交互

很多行动不便的用户依赖键盘操作，靠 Tab 键和方向键等浏览网。因此我们在构建 Web 应用的时候要注意：

确保页面所有内容都可以通过键盘访问尽可能地提供键盘快捷键交互避免设计只在鼠标 hover 时才会被激活的元素

一些 HTML 的原生标签具备可聚焦属性，也被称为可聚焦元素。这些原生 HTML 元素，天然存在于页面 Tab 键顺序内，内置了键盘事件处理，可以通过 Tab 键聚焦，并且获得焦点时有可见的焦点指示器（往往是显眼的蓝色框框）。但对于无法聚焦的元素，我们可以设置元素的tabindexlace属性，使元素可聚焦。

如果想给当前元素生成快捷键的话，可以给元素设置accesskey属性。但使用accesskey也需注意以下问题：

accesskey值可能与系统或浏览器快捷键或辅助技术功能相冲突当考虑页面国际化时，某些accesskey值可能不会出现在一些键盘上依赖于数值的accesskey可能会让具有认知障碍的用户感到困惑，因为数值和触发的功能并没有逻辑联系如果没有告知用户快捷键的存在，那么可以会造成用户误触

相关浏览器插件：

taba11y - Chrome Web StoreNerdeFocus - Chrome Web Store规则 5：定义文档的语言类型

在标签元素上设置正确的lang属性。如果你的页面没有显式设置当前页面所使用的语言，那么读屏软件将无法选择匹配的语音配置文件和字符集，读屏软件读出的页面内容是乱码。所以，为了确保页面的内容正确，请务必为元素指定有效的BCP 47语言。

规则 6：为添加alt属性，明确链接和按钮的信息

往往一张表情包图片就可以抵千言万语，但对于读屏软件来说，读取标签的有效信息，只能靠alt属性。所以不要忘记为标签添加描述性的alt属性。如果图片只是为了装饰效果，那么可以考虑将标签 替换为 CSS 背景图。

与标签类似，读屏软件对于和

X 关闭

推荐内容

最近更新

Copyright ©  2015-2022 热讯服装网版权所有  备案号：豫ICP备20005723号-6   联系邮箱：29 59 11 57 8@qq.com