什么是可访问性?

本文以深入了解什么是无障碍性为开端,本概述涵盖了我们需要考虑哪些群体以及原因、不同人群使用哪些工具与网络交互,以及如何将无障碍性纳入我们的 Web 开发工作流程。

先决条件 对 HTML 和 CSS 的基本了解。
目标 熟悉无障碍性,包括什么是无障碍性以及它如何影响您作为 Web 开发人员的工作。

什么是可访问性?

无障碍性是指使您的网站尽可能多的人都能使用。我们传统上认为这是关于残疾人的,但使网站无障碍的做法也惠及其他群体,例如使用移动设备的人或网络连接速度慢的人。

您也可以将无障碍性视为平等对待所有人,并给予他们平等的机会,无论他们的能力或环境如何。正如将轮椅使用者排除在实体建筑之外是错误的(现代公共建筑通常设有轮椅坡道或电梯)一样,将残疾人排除在网站之外也是错误的。我们都有所不同,但我们都是人,因此拥有相同的人权。

无障碍性是应该做的事情。在某些国家,提供无障碍网站是法律义务,这可以打开一些原本无法使用您的服务或购买您的产品的巨大市场。

构建无障碍网站对每个人都有利

  • 语义化 HTML 既改善了无障碍性,也改善了 SEO,使您的网站更容易被发现。
  • 关注无障碍性体现了良好的道德和道德,这将改善您的公众形象。
  • 其他改善无障碍性的良好做法也使您的网站更适合其他群体使用,例如手机用户或网络速度慢的用户。实际上,每个人都可以从许多这样的改进中受益。
  • 我们还提到它在某些地方是法律规定吗?

我们关注哪些类型的残疾?

残疾人与非残疾人一样多样化,他们的残疾也是如此。这里的主要教训是,要跳出自己的电脑以及您如何使用网络的思维定势,开始了解其他人如何使用网络 - *您不是您的用户*。以下是主要类型的残疾以及他们使用的一些特殊工具访问 Web 内容(称为**辅助技术**或**AT**)。

**注意:**世界卫生组织的 残疾与健康 事实说明指出,“超过 10 亿人,约占世界人口的 15%,存在某种形式的残疾”,并且“1.1 亿至 1.9 亿成年人存在严重的功能障碍”。

视障人士

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

熟悉屏幕阅读器是一个好主意;您还应该设置一个屏幕阅读器并进行试验,以了解它的工作原理。有关使用它们的更多详细信息,请参阅我们的 跨浏览器测试屏幕阅读器指南。以下视频还提供了一个简要示例,说明了这种体验。

在统计方面,世界卫生组织估计,“全球估计有 2.85 亿人视力受损:3900 万人失明,2.46 亿人视力低下”。(见 视力障碍和失明)。这是一个庞大且重要的用户群体,仅仅因为您的网站代码不正确而错过他们——几乎与美利坚合众国的人口规模相同。

听障人士

聋哑人和听力障碍者 (DHH) 的听力损失程度各不相同,从轻微到严重。尽管有些人确实使用 AT(见 听力、语音、言语或语言障碍者的辅助设备),但它们并不普遍。

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

聋哑人和听力障碍者也代表着重要的用户群——“全球有 4.66 亿人存在致残性听力损失”,世界卫生组织的 聋哑和听力损失 事实说明如是说。

有行动障碍的人

这些人存在运动方面的残疾,这可能涉及纯粹的物理问题(例如肢体丧失或瘫痪),也可能涉及导致肢体无力或失去控制的神经/遗传疾病。有些人可能难以做出使用鼠标所需的精确手部动作,而另一些人可能受到更严重的影响,也许是严重瘫痪,以至于需要使用 头部指针 与电脑交互。

这种残疾也可能是衰老而不是任何特定的创伤或疾病的结果,也可能是硬件限制造成的——一些用户可能没有鼠标。

这通常影响 Web 开发工作的方式是要求通过键盘访问控件——我们将在本模块的后续文章中讨论键盘无障碍性,但最好尝试使用键盘访问一些网站,看看结果如何。例如,您可以使用 Tab 键在 Web 表单的不同控件之间移动吗?您可以在我们的 跨浏览器测试使用原生键盘无障碍性 部分找到有关键盘控件的更多详细信息。

在统计方面,有行动障碍的人数不少。美国疾病控制与预防中心 残疾和功能(18 岁及以上非机构化成年人) 报告美国“任何身体功能障碍的成年人百分比:16.1%”。

有认知障碍的人

认知障碍是指范围广泛的残疾,从智力障碍者(他们拥有最有限的能力)到我们所有人随着年龄的增长而遇到的思维和记忆困难。范围包括患有精神疾病的人,例如 抑郁症精神分裂症。它还包括有学习障碍的人,例如 阅读障碍注意力缺陷多动障碍。重要的是,尽管认知障碍的临床定义存在很大差异,但患有认知障碍的人会遇到一系列共同的功能问题。这些问题包括理解内容困难、记住如何完成任务以及网页布局不一致造成的困惑。

为有认知障碍的人建立一个良好的无障碍基础包括

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

注释

  • 使用 认知无障碍性 进行设计将带来良好的设计实践。它们将使每个人受益。
  • 许多有认知障碍的人也患有身体残疾。网站必须符合 W3C 的 Web 内容无障碍指南,包括 认知无障碍指南
  • W3C 的 认知和学习障碍无障碍工作组 为有认知障碍的人制定 Web 无障碍指南。
  • WebAIM 有一页关于相关信息和资源的 认知 页面。
  • 美国疾病控制与预防中心估计,截至 2018 年,四分之一的美国公民存在残疾,而 认知障碍是年轻人中最常见的残疾
  • 在美国,一些智力残疾在历史上被称为“智力迟钝”。现在许多人认为这个词带有贬义,因此应避免使用它。
  • 在英国,一些智力残疾被称为“学习障碍”或“学习困难”。

在项目中实施可访问性

一个常见的无障碍神话是,无障碍性是项目中要实施的昂贵的“额外附加”。这个神话实际上 *可以* 是真的,如果

  • 您试图将无障碍性“追溯地”应用到现有的存在重大无障碍问题网站上。
  • 您只在项目后期才开始考虑无障碍性,并发现了相关问题。

但是,如果您从项目的开始就考虑无障碍性,那么使大多数内容无障碍的成本应该相当低。

在规划项目时,将无障碍测试纳入您的测试流程,就像测试任何其他重要的目标受众群体(例如,目标桌面或移动浏览器)一样。尽早且频繁地进行测试,理想情况下运行自动化测试来发现可通过编程检测到的缺失功能(例如缺失的图像替代文本或不良链接文本 - 请参见元素关系和上下文)并与残疾人用户群体进行一些测试,以了解更复杂的网站功能对他们的适用性。例如

  • 我的日期选择器小部件能否被使用屏幕阅读器的人使用?
  • 如果内容动态更新,视障人士是否知道?
  • 我的 UI 按钮能否被键盘和触控界面用户访问?

您可以并且应该记录内容中需要进行工作以使其无障碍的潜在问题区域,确保对其进行彻底测试,并考虑解决方案/替代方案。文本内容(正如您将在下一篇文章中看到的那样)很简单,但是您的多媒体内容和炫酷的 3D 图形呢?您应该查看您的项目预算,并考虑哪些解决方案可以使此类内容无障碍。将所有多媒体内容转录是一个选项,尽管价格昂贵,但却是可行的。

此外,要现实一点。“100% 无障碍”是一个无法实现的理想目标 - 您总能遇到某种边缘情况,导致某些用户发现某些内容难以使用 - 但您应该尽力而为。如果您计划使用 WebGL 创建炫酷的 3D 饼图图形,您可能需要包含一个数据表作为数据的无障碍替代表示。或者,您可能只想包含表格并删除 3D 饼图 - 表格对每个人都可访问,编码更快,CPU 占用率更低,并且更容易维护。

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

为了表明您关心并已考虑了无障碍性,请在您的网站上发布一份无障碍声明,详细说明您对无障碍性的政策以及您为使网站无障碍所采取的措施。如果有人通知您您的网站存在无障碍性问题,请与他们开始对话,要有同理心,并采取合理的措施来尝试解决问题。

注意:我们的处理常见无障碍性问题文章涵盖了应更详细测试的无障碍性细节。

总结

  • 从项目的开始就考虑无障碍性,并尽早且频繁地进行测试。就像任何其他错误一样,越晚发现无障碍性问题,修复成本就越高。
  • 请记住,许多无障碍最佳实践不仅对残疾人用户有利,对所有用户都有利。例如,简洁的语义化标记不仅对屏幕阅读器有利,而且加载速度快,性能好。这对所有人都有利,尤其是那些使用移动设备和/或网络连接速度慢的人。
  • 在您的网站上发布一份无障碍声明,并与遇到问题的人员互动。

可访问性指南和法律

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

因此,虽然 WCAG 是一套指南,但您的国家/地区可能制定了有关网络无障碍性的法律,或者至少制定了有关向公众提供服务的无障碍性的法律(可能包括网站、电视、物理空间等)。了解您的法律是件好事。如果您没有努力检查您的内容是否无障碍,如果有人投诉,您可能要承担法律责任。

这听起来很严重,但实际上您只需要将无障碍性视为网络开发实践的主要优先事项,如上所述。如有疑问,请咨询合格的律师。我们不会提供比这更多的建议,因为我们不是律师。

可访问性 API

网络浏览器使用特殊的无障碍 API(由底层操作系统提供),这些 API 公开对辅助技术(AT)有用的信息 - AT 通常利用语义信息,因此此信息不包括样式信息或 JavaScript。此信息在称为无障碍树的信息树中进行组织。

不同的操作系统提供了不同的无障碍 API

  • Windows:MSAA/IAccessible、UIAExpress、IAccessible2
  • macOS:NSAccessibility
  • Linux:AT-SPI
  • Android:无障碍框架
  • iOS:UIAccessibility

在您的网络应用程序中 HTML 元素提供的原生语义信息不足的情况下,您可以使用来自WAI-ARIA 规范的功能对其进行补充,这些功能向无障碍树添加语义信息以改进无障碍性。您可以在我们的WAI-ARIA 基础知识文章中了解更多有关 WAI-ARIA 的信息。

总结

本文应为您提供有关无障碍性的有用高级概述,向您展示其重要性,并介绍如何将其融入您的工作流程。现在您也应该渴望了解可以使网站无障碍的实施细节,我们将在下一节开始介绍这些细节,重点介绍为什么 HTML 是无障碍性的良好基础。

另请参阅