1. 面向开发者的 Web 技术
  2. 无障碍
  3. 指南
  4. 认知无障碍

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

认知无障碍

认知无障碍涵盖了针对认知和学习障碍人群的无障碍考虑。本文介绍了认知无障碍以及改善 Web 对认知和学习差异人群的无障碍性的方法。

认知障碍涵盖了一系列广泛的残疾，从智力残疾的人（可能具有最有限的能力），到具有与年龄相关的问题（思维和记忆）的人。这一范围包括患有抑郁症和精神分裂症等精神疾病的人，以及患有阅读障碍和注意力缺陷多动障碍（ADHD）等学习障碍的人。

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

概述

认知和智力残疾涵盖了一个广泛的范围，而且可能是短暂、暂时或永久的状况。例如，痴呆症和阿尔茨海默症是逐渐恶化的永久性认知障碍。其他永久性认知障碍包括失语症、言语和语言、自闭症、注意力缺陷/多动症、阅读障碍和计算障碍。

暂时性认知障碍的例子可能包括受到酒精或药物影响的人群。另一种形式是抑郁症，比如为了悼念所爱之人的离世，或者是因为刚在网上看到一条推文或视频而感到短暂的悲伤。第三个例子可能是睡眠剥夺。

解决认知差异的广泛挑战可能看起来是一项艰巨的任务，特别是当针对两个不同的人的解决方案可能是相互冲突的时候。处理这个问题的一种方法是专注于认知技能。认知技能包括：

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

为患有认知障碍的人提供无障碍解决方案的可靠方法包括：

  • 以多种方式呈现内容，例如通过文本转语音或视频；
  • 提供易于理解的内容，例如使用纯文本语言标准编写的文本；
  • 将注意力集中在重要内容上；
  • 最小化干扰，例如不必要的内容或广告；
  • 提供一致的网页布局和导航；
  • 结合熟悉的元素，例如未访问时为蓝色的下划线链接，访问后为紫色；
  • 将过程分解为逻辑的、必要的步骤，并提供进度指示器；
  • 使网站认证尽可能简单，而不会影响安全性；
  • 设计易于填写的表单，包括清晰的错误消息和简单的错误恢复机制。

WCAG 指南

WCAG，即 Web 内容无障碍指南，包括几项改善认知无障碍的指南。这些指南由万维网联盟（W3C，互联网主要的国际标准组织）的 Web 无障碍倡议（WAI）发布。该组织还负责无障碍富互联网应用（ARIA）指南。

WCAG 的指导原则有四条：网站必须是可感知、可操作、可理解，并具有健壮性。为此，他们定义了 17 条具体的准则，其中有六条特别与认知无障碍相关。

以下所有准则都不仅有助于认知障碍的人士。例如，能够延长应用程序对通过短信发送到移动设备的身份验证代码的过期时间，有助于以下情形：

  • 患有注意力或焦虑障碍的人。
  • 拥有较差的短期记忆或正在进行多任务处理的人。
  • 技术素养较低的人。
  • 网络信号较差的人。
  • 具有运动控制问题的人。

适应性

准则 1.3 表明“内容应该是可适应的”。创建可以以不同方式呈现而不丢失信息或结构的内容。例如，提供响应式布局，采用单列移动设计。

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

时间

为用户提供完成任务所需的时间非常重要。准则 2.2 表明“为用户提供足够的时间用以阅读和使用内容”。

时间限制是指在设定的时间后或定期发生的任何过程，例如在 30 分钟后注销或在 15 分钟内进行购买。认知障碍的人可能需要更多时间来阅读内容，或者执行诸如填写表单之类的功能。解决方案包括为用户提供足够的额外时间来完成任务，或完全消除时间限制。

计时器

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

  • 允许用户关闭或调整时间，至少调整为原始限制的 10 倍才遇到限制。
  • 提醒用户并提供至少 20 秒的缓冲时间，以通过简单操作（例如按下空格键）将超时持续时间延长 10 倍。

在内容上提供一个切换开关，允许用户启用更长的会话时间限制，或者根本没有会话时间限制。计时内容的示例包括表单、定时阅读练习和培训材料。如果时间限制超过 20 小时，则不需要提供特殊安排。

移动、闪烁、滚动

不要分散用户的注意力，特别是对于认知障碍的用户。

如果移动、闪烁、滚动或自动更新的信息自动启动，持续时间超过五秒，并且与其他内容同时呈现，则用户必须能够暂停、停止、隐藏或控制它，除非它是必要功能。“必要”意味着如果移除移动、闪烁、滚动或自动更新的信息将从根本上改变内容和功能的含义，且信息和功能无法以符合规范的另一种方式实现。如果 gif 动画超过 5 秒，那么也包括这种 gif 图。

考虑的其他时间标准包括：

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

导航

准则 2.4 表明“提供帮助用户导航、查找内容并确定其位置的方法”，并提供了 10 条指南来确保网站可导航且内容易于查找：

包含 <title>

确保为文档包含 <title>，因为标题提供了屏幕主要内容的快速和易于参考的描述。具有认知障碍、有限的短期记忆和阅读障碍的人都能通过这种方式来确定内容的目的。

标题和标签

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

章节标题

标题有助于定义页面内容的整体组织。它们有助于通过页面内容部分进行导航，并提供了一种帮助理解的机制。标题的示例包括内容的章节、部分和子部分等。

与其他方法（如边框、空白、水平线等）来识别页面内容部分相比，标题是更明显的导航辅助工具。

多种查找内容的方式

不同的用户喜欢使用不同的方法查找信息，因此提供多种方式让用户在你的网站上找到内容非常重要。

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

能够跳过内容块

提供一种机制，比如跳转链接，以跳过在多个网页上重复出现的内容块。

焦点顺序合理

交互元素的焦点顺序应该有条理。为了实现这一点，DOM 的顺序应该与视觉顺序相匹配，而视觉顺序又应该与使用键盘导航时的 tab 顺序相匹配。如果 tab 键的顺序跳来跳去，特别是以一种与使用键盘导航时的视觉顺序不匹配的方式，用户可能会感到迷失方向。

焦点元素应当明显可见

当用户使用键盘导航时，界面应当清楚地显示当前具有焦点的元素。除非你希望更加明显地显示焦点，否则不要修改或移除浏览器的默认 :focus 样式。

链接文本传达含义

链接的文本应该清晰而简洁地传达用户如果选择激活它们将导航到的位置。糟糕的链接文本可能会让用户对其目的或目的地感到困惑。

某些辅助技术允许用户通过页面上存在的所有链接列表进行导航。链接将会从其周围的非链接内容的上下文中移除，这使得易于理解的链接文本变得更加重要。一个糟糕的体验示例是一个充满链接的页面，其文本读作“点击这里”。如果没有指明“这里”将带你去哪里，那么链接的目的就不明确。

对于屏幕阅读器来说，关键的是链接文本描述了每个链接的目的。如果你已为屏幕阅读器添加了链接内容，并且该内容对于有视觉障碍的读者来说过于冗长且可能令人困惑，请考虑将添加的文本裁剪以从视觉上隐藏它。

当前位置可用

用户应该能够在站点或应用程序中确定自己的位置。对于那些可能在遵循一系列长导航步骤时变得困惑的注意力短暂的人来说，这一点尤为重要和有帮助。

所有用户都受益于关于自己在站点的层次结构中的位置的信息，特别是对于内容或子部分众多的站点或应用程序而言。面包屑导航、站点地图以及将当前页面在导航中标识为“当前”都是有助于传达当前位置的技术。

可读性

准则 3.1 表明“使文本内容可读，可理解”。对于一些用户来说，从上下文推断单词或短语的含义可能有困难，特别是当单词或短语以不寻常的方式使用，或者赋予了专门的含义时。

对于这些用户，阅读和理解的能力可能取决于特定定义的可用性，或者首字母缩写词或缩写词的扩展形式。一些用户可能很难识别书面文本，但当文本被朗读出来时，或者关键流程和思想以视觉形式呈现时，他们就能够理解极其复杂和精细的文档。

声明页面的语言以及不属于主要语言的任何内容

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

适当使用 lang 允许一些屏幕阅读器在将其转换为合成语音时正确地宣读文本。它还有助于使用文本转语音软件的人们。

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

一些残疾使得理解非字面的词语用法，如习语、口语和专业术语变得困难。非母语人士可能也会在这些术语上遇到困难。如果一个单词或短语具有独特的含义，在文档中内联提供定义或链接，或者在术语表中提供。如果一个单词或短语被用来表示多种意思，请定义每个用法。

定义缩写词

缩写词对于以下人群可能会造成困惑：

  • 难以解码单词的人。
  • 记忆受限的人。
  • 难以利用上下文来帮助理解的人。
  • 依赖屏幕放大器（通常会减少上下文线索）的人。

在首次使用缩写词时提供其扩展形式，然后将缩写词放置在 <abbr> 元素内。如果缩写词没有扩展形式，或者是一个不属于文档主要语言（比如拉丁语）的单词的缩写形式，请解释其含义。此外，考虑使用 ruby 文本来表示首字母缩写词（首字母缩写词的发音）。

阅读水平

内容应尽可能清晰明了地书写。一个很好的准则是让内容足够简单，以至于第一次阅读就能理解。实现这一目标的方法包括：

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

为了帮助认知障碍的用户，可以提供一个阅读水平较低的文本摘要（有时称为 TL;DR，即“太长；不读”）。另一种方法是提供附带的视觉辅助，以帮助解释观念、事件和过程。

有一些工具可以评估你内容的水平。例如，本文的平均等级约为 11 级。这意味着它应该很容易被一个 16 到 17 岁的以英语为母语的人理解。一些工具甚至可以提供简化建议。

发音

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

  • 在单词之后立即提供发音。
  • 链接到发音列表。
  • 提供带有发音的词汇表。
  • 使用 <ruby> 元素来说明一个词的发音。

提供关于如何发音单词的指导有助于许多不同类型的人，包括那些喜欢大声阅读的人、非母语人士以及可能不熟悉一个术语在上下文中的含义的人。

另一个解决方案是使用字形或发音符号来说明发音。但是，如果使用这种技术，必须有一种机制来关闭它。此外，最好提供链接到正在使用的标记指南，因为它们的含义可能不明显。

可预测性

WCAG 准则 3.2 表明“让网页以可预见的方式呈现和操作”。这是良好用户体验设计的原则。对于认知困难的人来说，一致性尤其重要。这包括页面布局的一致性以及可预测的交互组件。

使用激活而不是焦点来改变上下文

改变上下文应该是有意的。因此，当一个 UI 特性获得焦点时，它不应该触发更多面向用户的操作。相反，用户应该需要“激活”一个特性来触发变化。

根据主动请求改变设置

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

更改状态应该需要有意的用户操作。例如，选中复选框、输入数据或更改选择选项。还要确保提供一个提交按钮来启动上下文的更改，并在更改之前描述将发生什么。

保持网站中的导航一致性

保持页面之间的导航顺序一致。例如，如果你在多个页面上都有一个导航栏，请确保导航在整个网站中是一致的，具有相同的链接并处于相同的位置。这不仅适用于导航：每次出现时，将所有重复的组件按相同的相对顺序呈现。

提供一致的标签

每次使用相同功能时，它们的标签应该相似。一致的按钮标签、图标的替代文本以及相似交互的图标，即使在你网站的不同部分，也能帮助到你的所有用户。

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

虽然未标记的图标并不是传达信息的最有效方法，但保持图标的使用（以及如果有标签的话，它们的标签文本）一致有助于人们理解图标代表的内容。同样，不要更改默认设置，如浏览器的返回按钮。如果你需要重定向用户，请在此之前让用户知道。

输入辅助

准则 3.3 有助于确保准确的数据输入，表明“帮助用户避免和纠正错误”。虽然我们都会犯错误，但有些人更容易犯错，更不容易注意到错误，或者在犯错后更难纠正错误。

输入辅助准则旨在降低用户（尤其是那些有残疾的用户）犯错的可能性，以及如果他们犯错，提升他们看到和理解错误消息，并成功纠正任何错误的可能性。

传达自动错误检测

用户需要被告知错误的信息以及出了什么问题。如果有客户端错误检测，请遵循以下指南，使错误信息尽可能有效地传达给用户：

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

提供用户输入说明

在开始表单时，使用文本说明如何操作表单。在用户需要输入信息时，使用 <label>、<fieldset> 和 <legend> 元素来包含标签或说明。

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

如果表单控件是必填的，请通过视觉和代码指示它。如果表单控件更改了上下文，请描述将会发生的情况，以便用户在引起上下文更改之前能够理解。

错误建议

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

错误预防

对于可能导致法律、金融或其他重大后果的提交，请确保提交可以被审查、确认和/或是可逆转的。

在提交之前，应检查用户输入的数据是否存在错误，并为用户提供纠正错误的机会。用户应能够在最终提交之前审核、确认和更正信息。此外，确保在提交按钮之外还包含确认复选框。

如果提交导致法律或金融交易发生，请为用户提供一个规定的时间，用户可以在此期限内修改或取消请求。

提供帮助

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

备注

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

参见

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content