认知无障碍

认知无障碍涵盖了针对认知和学习障碍人群的无障碍考量。本文介绍了认知无障碍以及如何改进网络对有认知和学习差异人群的无障碍性。

认知障碍指一系列广泛的残疾,从能力最受限的智力障碍者,到与年龄相关的思维和记忆问题。这范围包括患有精神疾病的人,如抑郁症和精神分裂症。它还包括患有学习障碍的人,如阅读障碍和注意力缺陷多动障碍 (ADHD)。

尽管认知障碍的临床定义具有多样性,但患有认知障碍的人会经历一系列常见的功能问题。这些问题包括理解内容困难、记住如何完成任务困难,以及由不一致或非传统的网页布局引起的困惑。在本文中,我们将重点关注开发人员应采取的措施,以提高其网站和应用程序的认知无障碍性。

概述

认知和智力障碍涵盖了广泛的范围,可能是暂时的、短暂的或永久性的状况。例如,痴呆症和阿尔茨海默病是永久性认知障碍,并且会逐渐恶化。其他永久性认知障碍包括失语症、言语和语言障碍、自闭症、ADD/ADHD、阅读障碍和计算障碍。

暂时性认知障碍的例子可能是受酒精或药物等物质影响的人。另一种形式是抑郁症,例如在哀悼失去亲人时,或者因为刚刚在网上看到的一条推文或视频而暂时感到悲伤。第三个例子可能是睡眠不足。

解决各种认知差异可能看起来是一个巨大的挑战,尤其是当针对两个不同人群的解决方案可能相互冲突时。处理这个问题的一种方法是关注认知技能。认知技能包括:

  • 注意力
  • 记忆力
  • 处理速度
  • 时间管理
  • 字母和语言
  • 数字符号和数学
  • 理解和做出选择

为认知障碍人士提供无障碍解决方案的可靠方法包括:

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

WCAG 指南

WCAG(Web 内容无障碍指南)包含多项指南以改善认知无障碍。这些指南由万维网联盟(W3C)的 Web 无障碍倡议(WAI)发布,W3C 是互联网主要的国际标准组织。该组织还负责 可访问富互联网应用程序(ARIA) 指南。

WCAG 遵循四项原则:网站必须是可感知的、可操作的、可理解的,以及稳健的。为此,它们定义了 17 项具体指南,其中有六项与认知无障碍特别相关。

以下所有指南不仅有助于认知障碍人士。例如,能够延长需要通过短信向移动设备发送认证代码的应用程序的过期时间,有助于以下场景:

  • 有注意力或焦虑障碍的人。
  • 短期记忆力差或同时处理多任务的人。
  • 技术素养较低的人。
  • 无线信号差的人。
  • 有运动控制问题的人。

适应性

指南 1.3 指出“内容应适应性强”。创建可以在不丢失信息或结构的情况下以不同方式呈现的内容。例如,提供响应式布局,采用单列移动设计。

所有信息,包括通过呈现方式传达的结构和关系,都应以所有用户都能感知到的形式提供,以实现这一目标。例如,信息可以通过叙述工具朗读出来。使您的内容能够被软件理解是确保其可以被替代呈现模式使用的好方法。

时间

允许用户有足够的时间完成任务非常重要。指南 2.2 指出“为用户提供足够的时间阅读和使用内容”。

时间限制是指在设定的时间后或定期发生的任何未经用户启动的进程,例如 30 分钟后自动退出登录或有 15 分钟时间完成购买。认知障碍人士可能需要更多时间来阅读内容,或执行填写表单等功能。解决方案包括为用户提供足够的额外时间来完成任务,或完全取消时间限制。

计时器

调整时间要求的选项包括:

  • 允许用户在遇到时间限制之前,将其关闭或调整至原始限制的至少 10 倍。
  • 提醒用户并提供至少 20 秒的缓冲时间,通过一个动作(例如按空格键)将超时持续时间延长 10 倍。

在内容上提供一个切换按钮,允许用户启用更长的会话时间限制,或者完全没有会话时间限制。定时内容的示例包括表单、定时阅读练习和培训材料。如果时间限制超过 20 小时,则无需提供特殊便利。

移动、闪烁、滚动

不要分散用户注意力,特别是认知障碍人士的注意力,这一点很重要。

如果移动、闪烁、滚动或自动更新的信息自动启动,持续时间超过五秒,并与其他内容并行显示,则用户必须能够暂停、停止、隐藏或控制它,除非它是基本功能。“基本”意味着移除移动、闪烁、滚动或自动更新的信息会从根本上改变内容和/或功能的含义,并且信息和功能无法以其他符合规定的方式实现。这包括动画 GIF,如果 GIF 动画超过 5 秒。

需要考虑的其他计时标准是:

  • 有认知或语言障碍的人可能需要更多时间来阅读和理解。为提高可用性,请取消任何时间限制。还应避免定时内容,非交互式同步媒体和实时事件除外。
  • 注意力缺陷障碍人士应该能够专注于内容而不会分心。用户应该能够推迟或抑制中断,除了涉及提醒某人紧急情况的情况。这通过使认知障碍人士能够专注于内容的主要目的来提供访问。通过提供一种请求内容更新而非自动更新的方式,使用户能够推迟内容更新。此外,提供一种使非必要警报可选的方式。
  • 确保用户在重新验证过期会话后能够继续活动而不会丢失数据,例如保存问卷的状态。确保以一种方式保存数据,以便用户重新验证后可以修改数据。在重新验证之前,将数据编码为隐藏或加密。
  • 提供有关可能导致数据丢失的不活动警告。当使用超时时,准确告知用户多少时间会导致会话超时并导致数据丢失。例外情况是,在不采取任何行动的情况下,将数据保留超过 20 小时。

指南 2.4 指出“提供帮助用户导航、查找内容并确定其所在位置的方法”,并提供了 10 项指南以确保网站可导航且内容可查找。

包含 <title>

务必为文档包含一个 <title>,因为标题可以快速轻松地提供屏幕主要内容的描述。认知障碍人士、短期记忆力有限的人以及阅读障碍人士都能通过这种方式识别内容目的而受益。

标题和标签

包含清晰且具有描述性的标题,以便用户可以轻松找到信息并理解不同内容部分之间的关系。描述性标签可帮助用户识别内容中的特定组件。阅读速度慢的人和短期记忆力有限的人会受益于能够通过章节标题预测每个章节包含的内容。

章节标题

标题有助于定义页面内容的整体组织。它们有助于促进在页面内容部分之间的导航,并提供一种机制来辅助理解。标题的示例包括内容的章节、节和小节等。

与其他用于识别页面内容部分的方法(边框、空白、水平线等)相比,标题是更明显的导航辅助工具。

多种查找内容的方式

不同的用户喜欢不同的信息查找方法,因此为用户提供多种方法来查找您网站上的内容非常重要。

提供多种导航网站的方式可以帮助人们更快地找到信息。一些用户可能更喜欢目录、网站地图或搜索功能,而不是阅读和浏览多个页面来寻找他们需要的内容。另一些用户可能更喜欢按顺序探索网站,一页一页地移动,以便更好地理解网站的布局、内容和概念。

跳过内容块的能力

提供一种机制,例如 跳过链接,以跳过多页重复出现的内容块。

焦点顺序合理

交互元素的焦点顺序应该合理。为此,DOM 顺序应与视觉顺序匹配,而视觉顺序又应与 Tab 键顺序匹配。如果 Tab 键顺序跳来跳去,特别是当使用键盘导航时与视觉顺序不匹配时,用户可能会感到迷失方向。

获得焦点的元素应具有可见的焦点

当用户使用键盘导航时,UI 应该清晰地显示当前哪个元素拥有焦点。不要修改或删除浏览器的默认 :focus 样式,除非您正在使焦点更加明显。

链接的文本应清晰简洁地传达用户如果选择激活它,下一步将导航到何处。措辞不当的链接文本可能会让用户对其目的或目的地感到困惑。

某些形式的辅助技术允许用户通过页面上所有链接的列表进行导航。链接将从其周围的非链接内容的上下文中移除,使得可理解的链接文本变得更加重要。一个糟糕的体验示例是,一个页面上充满了文本为“点击这里”的链接。如果不指示“这里”将带您去往何处,链接的目的就不明确。

对于屏幕阅读器而言,链接文本描述每个链接的目的至关重要。如果您已为屏幕阅读器添加了链接内容,并且该内容冗长且可能让有视力的读者感到困惑,请考虑剪辑添加的文本,以在视觉上将其隐藏起来,不让不使用辅助技术的人看到。

当前位置可用

用户应该能够在网站或应用程序中找到自己的方向。这对于注意力持续时间短的人尤其重要和有帮助,他们可能会在遵循一长串导航步骤时感到困惑。

所有用户都受益于了解自己在网站层级结构中的位置,特别是对于内容量大或子部分多的网站或应用程序。面包屑导航网站地图以及在导航中将当前页面标识为“当前”都是有助于传达当前位置的技术。

可读性

指南 3.1 指出“使文本内容可读和可理解”。对于某些用户来说,很难从上下文中推断出单词或短语的含义,特别是当单词或短语以不寻常的方式使用,或被赋予了专业含义时。

对于这些用户,阅读和理解的能力可能取决于特定定义或首字母缩略词或缩写的扩展形式的可用性。有些用户可能在识别书面文字方面遇到很大困难,但当文本被朗读,或当关键过程和思想以视觉方式呈现时,他们能够理解极其复杂和精密的文档。

声明页面语言和非主语言的任何内容

每个页面的语言必须通过在 <html> 元素上使用 lang 属性来声明。对于文档主要语言之外的文本,再次包含 lang 属性。

正确使用 lang 可以使一些屏幕阅读器在将其转换为合成语音时正确地播报文本。它还有助于使用文本转语音软件的人。

定义不寻常的词语和词语用法

有些残疾会使人难以理解非字面意义的词语用法,例如习语、俗语和专业术语。非母语使用者也可能难以理解这些术语。如果某个词语或短语在文档中具有独特的含义,请在文档中以内联或链接方式、在词汇表中或链接到在线词典的方式提供定义。如果一个词语或短语用于表示多个事物,请定义其每种用法。

定义缩写

缩写对于以下人群来说可能会造成困惑:

  • 解码词语有困难。
  • 记忆力有限。
  • 难以利用上下文辅助理解。
  • 依赖屏幕放大镜(这通常会减少上下文线索)。

首次使用时提供缩写的完整形式,后跟放置在 <abbr> 元素中的缩写。如果缩写没有完整形式,或者是一个不在文档主语言中的词的缩写(例如拉丁语),则解释其含义。此外,考虑为首字母缩略词(缩写词的发音)使用 ruby 文本

阅读水平

内容应该尽可能清晰地编写。一个好的原则是使内容足够简单,以便第一次就能理解。实现这一目标的方法包括:

  • 使用简短、简单的词语。
  • 写短句子。
  • 使用主动语态和现在时。
  • 使用正确的语法和拼写。

为认知障碍人士提供低阅读水平的文本摘要(有时称为 TL;DR,即“太长;没读”)很有帮助。您还可以使用另一种技术,即提供配套的视觉效果来帮助解释想法、事件和过程。

有些工具可以评估您内容的阅读水平。例如,这份文档的平均阅读水平约为 11 级。这意味着它应该能被 16 到 17 岁的英语母语人士轻松理解。有些工具甚至可以提供建议来帮助简化它。

发音

有多种技术可以帮助人们学习如何发音单词:

  • 在单词后面立即提供发音。
  • 链接到发音列表。
  • 提供带有发音的词汇表。
  • 使用 <ruby> 元素来演示单词如何发音。

提供单词发音指导有助于各种人群,包括喜欢朗读的人、非母语人士以及不熟悉上下文中术语含义的人。

另一种解决方案是使用字形或变音符号来演示发音。但是,如果使用此技术,则必须有一个机制来将其关闭。此外,链接到所用符号的指南会很有帮助,因为它们的含义可能不明显。

可预测性

WCAG 指南 3.2 指出“使网页以可预测的方式显示和操作”。这是良好用户体验设计的一项原则。一致性对于认知困难人士尤其重要。这包括页面布局的一致性和可预测的交互组件。

使用激活,而非焦点来改变上下文

创建上下文更改应该是故意的。因此,当 UI 功能获得 焦点 时,不应触发进一步的用户操作。相反,用户应该需要“激活”某个功能才能触发更改。

根据主动请求更改设置

表单控件操作和数据输入应产生可预测的行为。上下文的变化可能会使认知障碍用户感到困惑,因此只有当明确这种变化是响应用户行为而发生时,才应发生上下文变化。

更改状态需要有意的用户操作。例如,选中复选框、输入数据或更改选择选项。此外,请务必提供提交按钮以启动上下文更改,并在更改发生之前描述将发生什么。

保持整个网站导航的一致性

保持页面之间的导航顺序一致。例如,如果您在多个页面上都有导航栏,请确保整个网站的导航是统一的,具有相同的链接和相同的位置。这不仅适用于导航:每次出现时,所有重复组件都应以相同的相对顺序呈现。

提供一致的标签

相同的功能在每次使用时都应具有相似的标签。一致的按钮标签、图标的替代文本以及相似交互的图标等,即使在您网站的不同部分,也能帮助所有用户。

保持一致性和可预测性,并使用规范

虽然无标签图标并非传达信息最有效的方法,但保持图标使用(如果带标签,则其标签文本)的一致性有助于人们理解图标所代表的含义。同样,不要更改浏览器后退按钮等默认设置。如果您需要重定向用户,请事先告知用户。

输入辅助

指南 3.3 帮助确保准确的数据输入,指出“帮助用户避免和纠正错误”。虽然我们都会犯错,但有些人更容易犯错,更不容易注意到错误,或者一旦犯错就更难纠正。

输入辅助指南旨在降低用户(特别是残障用户)犯错的可能性,如果他们确实犯错,则增加他们看到并理解错误消息并成功修复任何错误的可能性。

传达自动错误检测

需要提醒用户错误并告知错误原因。如果存在客户端错误检测,请遵守以下准则,以确保错误在传达给用户时尽可能有效:

  • 错误必须以文本形式描述。
  • 确保错误消息尽可能具体。
  • 如果输入的值无效,提供文本以识别未完成的必填字段和文本描述。
  • 如果错误阻止了表单提交,请聚焦于该错误。如果存在多个错误,请提供摘要,每个错误链接到相关的输入。
  • 除了使用图标、图片、颜色等之外,还应包含文字。有些人难以理解图标和其他视觉线索的含义。
  • 其他人可能难以理解错误消息的文本版本。对于这些人,还应提供图标和颜色等。
  • 此外,在表单成功提交时提供反馈。

提供用户输入说明

在表单开头提供文本说明,指导如何操作。当用户需要输入信息时,使用 <label><fieldset><legend> 元素来包含标签或说明。

标签应具有描述性,并放置在与其相关的输入附近。当要求特定输入格式时,提供一个格式正确的示例。此外,考虑执行服务器端验证以帮助格式化输入数据,以帮助用户轻松输入。

如果表单控件是必需的,请通过视觉和代码两种方式指示。如果表单控件会改变上下文,请在用户触发上下文改变之前,以用户能够理解的方式描述将发生什么。

错误建议

如果自动检测到输入错误且已知纠正建议,则向用户提供建议输入(除非这样做会危及内容的安全性或目的)。

防止灾难

对于导致或可能导致法律、财务或其他重大后果的提交,请确保可以审查、确认和/或撤销提交。

用户输入的数据在提交前应进行错误检查,并应给予用户纠正错误的机会。用户在最终提交前应能够审查、确认和纠正信息。此外,除了提交按钮之外,务必包含一个确认复选框。

如果提交导致法律或金融交易发生,应提供一个明确的时间,在此时间内用户可以修改或取消请求。

提供帮助

应提供上下文相关的帮助。如果表单需要文本输入,请提供表单说明,描述目的和必要的输入。包括拼写检查和长篇文本输入的建议,以及帮助和支持材料的链接。如果预期输入需要特定数据格式,请提供示例。

注意

以上都是良好的设计实践。它们将使所有人受益。

  • 许多认知障碍人士也患有肢体残疾。网站必须符合 W3C 的Web 内容无障碍指南
  • W3C 的认知和学习障碍无障碍工作组为认知障碍人士制定了网页无障碍指南。
  • WebAIM 有一个认知页面,其中包含相关信息和资源。
  • 美国疾病控制与预防中心估计,截至 2018 年,每 4 名美国公民中就有 1 人患有残疾,其中认知障碍是年轻人中最常见的
  • 在美国,“智力障碍”过去被称为“精神发育迟滞”。在英国,“智力障碍”通常被称为“学习障碍”或“学习困难”。

另见