1. 学习
  2. 核心学习模块
  3. 无障碍
  4. 什么是可访问性？

什么是可访问性？

本文将以深入探讨可访问性作为模块的开篇——概述了我们需要考虑的人群及其原因，不同人群用于与 Web 交互的工具，以及我们如何将可访问性融入 Web 开发工作流程。

预备知识 熟悉 HTML、CSS。
学习成果
  • 可访问性的意义在于：为有额外需求的人群增加数字服务的使用机会，提升所有人的可用性，改善 SEO，并扩大目标受众。
  • 了解可访问性的法律要求。
  • 可访问性应从项目一开始就考虑，而不是在项目结束时才匆忙添加。
  • 熟悉 Web 内容可访问性指南 (WCAG) 的一致性标准。
  • 了解可访问性 API 及其用途。

那么，什么是可访问性？

可访问性是指让你的网站尽可能多的人都能使用。我们通常认为这与残障人士有关，但构建无障碍网站的做法也惠及其他群体，例如使用移动设备的人群，或网络连接速度较慢的人群。

你也可以把可访问性理解为一视同仁，无论他们的能力或环境如何，都给予他们平等的机会。正如仅仅因为某人坐轮椅就将其排除在实体建筑之外是错误的（现代公共建筑通常设有轮椅坡道或电梯），仅仅因为某人有视觉障碍就将其排除在网站之外也是不正确的。我们都不同，但我们都是人类，因此拥有相同的人权。

可访问性是正确的事情。在某些国家，提供无障碍网站是法律的一部分，这可以开辟一些重要的市场，否则这些市场将无法使用你的服务或购买你的产品。

构建无障碍网站惠及所有人

  • 语义化 HTML 不仅能改善可访问性，还能改善 SEO，让你的网站更容易被发现。
  • 关注可访问性表明了良好的职业道德和道德观念，这能提升你的公众形象。
  • 其他能改善可访问性的良好实践也能让你的网站被其他群体更好地使用，例如手机用户或网络速度较慢的用户。事实上，每个人都能从许多此类改进中受益。
  • 我们提到过在某些地方这也是法律规定吗？

我们正在关注哪些类型的残疾？

残障人士与非残障人士一样，他们的残疾也多种多样。这里最重要的教训是，要超越你自己的电脑和你使用网络的方式，开始了解其他人如何使用网络——你不是你的用户。下面解释了需要考虑的主要残疾类型，以及他们用于访问网络内容的特殊工具（称为辅助技术或AT）。

注意：世界卫生组织残疾与健康情况说明书指出，“全球有超过十亿人，约占世界人口的 15%，患有某种形式的残疾”，并且“介于 1.1 亿至 1.9 亿成年人有严重的功能障碍。”

视力障碍人士

视力障碍人士包括盲人、低视力者和色盲者。许多视力障碍人士使用屏幕放大器，这些放大器既可以是物理放大器，也可以是软件缩放功能。如今，大多数浏览器和操作系统都具有缩放功能。一些用户会依赖屏幕阅读器，这是一种将数字文本大声朗读出来的软件。一些屏幕阅读器示例包括

熟悉屏幕阅读器是一个好主意；你还应该设置一个屏幕阅读器并试用它，以便了解其工作原理。有关使用屏幕阅读器的更多详细信息，请参阅我们的屏幕阅读器教程。下面的视频也提供了一个简短的体验示例。

在统计数据方面，世界卫生组织估计“全球约有 2.85 亿人视力受损：3900 万人失明，2.46 亿人有低视力。”（参见视力障碍和失明）。由于你的网站没有正确编码而错失如此庞大而重要的用户群体——几乎与美利坚合众国的人口规模相当。

听力障碍人士

聋人和听力障碍 (DHH) 人士有不同程度的听力损失，从轻度到重度不等。尽管有些人确实使用辅助技术（参见用于听力、发声、言语或语言障碍人士的辅助设备），但它们并不普及。

为了提供访问权限，必须提供文本替代方案。视频应手动添加字幕，音频内容应提供文字转录。此外，由于 DHH 人群中存在高水平的语言剥夺，应考虑文本简化。

聋哑和听障人士也代表着一个重要的用户群体——世界卫生组织耳聋和听力损失情况说明书称，“全球有 4.66 亿人患有致残性听力损失”。

行动不便人士

这些人存在与运动相关的残疾，可能涉及纯粹的身体问题（例如肢体丧失或瘫痪），或导致肢体无力或失控的神经/遗传疾病。有些人可能难以进行使用鼠标所需的精确手部动作，而另一些人可能受影响更严重，甚至严重瘫痪到需要使用头部指示器来与计算机交互。

这种残疾也可能是由年老而非任何特定创伤或疾病引起的，也可能是由硬件限制造成的——有些用户可能没有鼠标。

这种残疾通常对网页开发工作产生的影响是要求控件能够通过键盘访问——我们将在本模块的后续文章中讨论键盘可访问性，但尝试仅使用键盘浏览一些网站以了解其运行情况是一个好主意。例如，你能使用 Tab 键在网页表单的不同控件之间移动吗？你可以在我们的尽可能使用语义化 UI 控件部分找到有关键盘控件的更多详细信息。

从统计数据来看，有大量人存在行动不便。美国疾病控制与预防中心残疾和功能（18岁及以上非机构化成年人）报告称，美国“有任何身体功能障碍的成年人百分比为：16.1%”。

认知障碍人士

认知障碍泛指各种残疾，从能力最受限的智力障碍人士，到我们所有人随着年龄增长而出现的思维和记忆困难。范围包括患有精神疾病的人，例如抑郁症和精神分裂症。它还包括患有学习障碍的人，例如阅读障碍和注意缺陷多动障碍。然而，尽管认知障碍的临床定义存在很大差异，但患有认知障碍的人会经历一系列常见的功能问题。这些问题包括理解内容困难、记住如何完成任务以及因不一致的网页布局而引起的困惑。

为认知障碍人士提供良好可访问性的基础包括

  • 通过多种方式提供内容，例如通过文本转语音或视频。
  • 易于理解的内容，例如使用纯语言标准编写的文本。
  • 将注意力集中在重要内容上。
  • 尽量减少干扰，例如不必要的内容或广告。
  • 一致的网页布局和导航。
  • 熟悉的元素，例如未访问时为蓝色，已访问时为紫色的带下划线链接。
  • 将流程划分为逻辑的、必要的步骤，并带有进度指示器。
  • 网站认证应尽可能简单，同时不损害安全性。
  • 使表单易于完成，例如带有清晰的错误消息和简单的错误恢复。

注意

在你的项目中实现可访问性

一个常见的无障碍神话是，无障碍是一个昂贵的“额外”项目。这个神话确实可能成立，如果出现以下情况：

  • 你试图对一个已经存在严重无障碍问题的网站进行“改造”。
  • 你只在项目的后期才开始考虑无障碍问题，并发现了相关问题。

然而，如果你从项目一开始就考虑可访问性，那么使大多数内容可访问的成本应该相当低。

在规划项目时，将可访问性测试纳入你的测试体系，就像测试任何其他重要的目标受众群体（例如，目标桌面或移动浏览器）一样。尽早并经常进行测试，理想情况下运行自动化测试以发现程序上可检测到的缺失功能（例如缺失的图像替代文本或错误的链接文本——请参阅使用有意义的文本标签），并与残疾用户群体进行一些测试，以了解更复杂的网站功能对他们来说效果如何。例如

  • 我的日期选择器小部件能被使用屏幕阅读器的人使用吗？
  • 如果内容动态更新，视力障碍人士会知道吗？
  • 我的 UI 按钮是否对键盘和触摸界面用户都可访问？

你可以而且应该记录内容中需要改进以实现可访问性的潜在问题区域，确保对其进行彻底测试，并考虑解决方案/替代方案。文本内容（如你将在下一篇文章中看到）很容易，但你的多媒体内容和炫酷的 3D 图形呢？你应该查看你的项目预算并考虑你有哪些可用的解决方案来使这些内容可访问。将所有多媒体内容转录是其中一个选项，虽然昂贵，但可行。

此外，要现实一点。“100% 可访问性”是一个无法实现的目标——你总是会遇到某种边缘情况，导致某个特定用户发现某些内容难以使用——但你应该尽力而为。如果你计划使用 WebGL 制作一个炫酷的 3D 饼图图形，你可能希望包含一个数据表作为数据的可访问替代表示。或者，你可能只想包含表格并摆脱 3D 饼图——表格对每个人都可访问，编码更快，CPU 密集度更低，也更容易维护。

另一方面，如果你正在制作一个展示有趣的 3D 艺术的画廊网站，那么指望每一件艺术品都能对视障人士完美无障碍是不合理的，因为这是一种完全视觉的媒介。

为了表明你关心并考虑了可访问性，请在你的网站上发布一份可访问性声明，详细说明你对可访问性的政策，以及你为使网站可访问所采取的措施。如果有人通知你你的网站存在可访问性问题，请与他们进行对话，保持同理心，并采取合理措施尝试解决问题。

总结

  • 从项目一开始就考虑可访问性，并尽早并经常进行测试。就像任何其他 bug 一样，可访问性问题发现得越晚，修复成本就越高。
  • 请记住，许多可访问性最佳实践惠及所有人，而不仅仅是残障用户。例如，精简的语义标记不仅对屏幕阅读器有益，而且加载速度快，性能高。这惠及所有人，尤其是使用移动设备和/或慢速连接的用户。
  • 在你的网站上发布可访问性声明，并与遇到问题的人互动。

可访问性指南与法律

有许多清单和指南可用于进行可访问性测试，乍一看可能令人不知所措。我们的建议是熟悉你需要注意的基本领域，并了解与你最相关的指南的高级结构。

因此，虽然 WCAG 是一套指南，但你的国家可能会有关于网页可访问性的法律，或者至少是关于向公众提供的服务（可能包括网站、电视、实体空间等）的可访问性的法律。了解你所在国家的法律是一个好主意。如果你不努力检查你的内容是否可访问，那么如果有人投诉，你可能会承担法律责任。

这听起来很严重，但实际上你只需要将可访问性视为你的 Web 开发实践的首要任务，如上所述。如有疑问，请咨询合格律师。我们不会提供更多建议，因为我们不是律师。

可访问性 API

Web 浏览器利用特殊的可访问性 API（由底层操作系统提供），这些 API 暴露了对辅助技术（AT）有用的信息——AT 主要倾向于利用语义信息，因此这些信息不包括样式信息或 JavaScript 等。这些信息以一种称为可访问性树的信息树的形式进行结构化。

不同的操作系统提供不同的可访问性 API

  • Windows：MSAA/IAccessible, UIAExpress, IAccessible2
  • macOS：NSAccessibility
  • Linux：AT-SPI
  • Android：可访问性框架
  • iOS：UIAccessibility

当你的 Web 应用中 HTML 元素提供的原生语义信息不足时，你可以通过WAI-ARIA 规范中的特性来补充，这些特性会向可访问性树添加语义信息以提高可访问性。你可以在我们的WAI-ARIA 基础文章中了解更多关于 WAI-ARIA 的信息。

总结

本文应该为你提供了可访问性的有用高层概述，展示了它的重要性，并探讨了如何将其融入你的工作流程。现在，你应该也渴望了解可以使网站可访问的实现细节以及哪些工具可以提供帮助。我们将在下一篇文章中探讨可访问性工具。

另见

帮助改进 MDN

了解如何贡献

此页面由 MDN 贡献者 于 最后修改。

在 GitHub 上查看此页面 • 报告此内容存在的问题