可理解

本文提供了实用的建议,说明如何编写您的网页内容,使其符合《Web 内容可访问性指南 (WCAG) 2.0 和 2.1》中**可理解性**原则所概述的成功标准。可理解性原则指出,信息和用户界面的操作必须是可理解的。

注意:要阅读 W3C 对可理解性及其指南和成功标准的定义,请参阅原则 3:可理解性 — 信息和用户界面的操作必须是可理解的

指南 3.1 — 可读性:使文本内容可读和可理解

本指南着重于使文本内容尽可能易于理解。

成功标准 如何符合标准 实用资源
3.1.1 页面语言 (A) 每个网页的默认人类语言应该可以通过代码检测。这对于确保读者到达适合他们语言的页面等目的至关重要。最简单的方法是在页面的 <html> 元素上设置 lang 属性,并赋予其一个最能代表页面所用语言的语言代码值。 请参阅设置文档的主语言
3.1.2 部分语言 (AA)

如果页面内容包含与主语言不同的单词或短语,请在相关术语的包装元素上(例如,如果没有语义元素可用,则使用 <span>)使用 lang 属性来设置适当的语言。

您无需为不分语言相同的词语或短语(例如专有名词、不属于特定语言的技术术语)设置不同的语言。

3.1.3 不寻常的词语 (AAA) 如果使用了技术术语、行话或习语/俚语,应为这些短语/词语提供定义。您的网站应提供一个词汇表,其中包含这些词语/术语的定义,您可以在它们出现时链接到这些定义,或者至少在周围文本中或页面底部的描述列表中提供定义。
3.1.4 缩写 (AAA)

如果使用缩写,您应该根据需要提供其完整形式或定义。

人们通常认为 <abbr> 元素是提供缩写完整形式的首选方式 — 它接受一个包含完整形式的 title 属性,当鼠标悬停在缩写词上时,该完整形式会显示出来。然而,title 属性的内容无法通过键盘访问,屏幕阅读器也无法可靠地读出。更好的处理方式是再次提供指向包含缩写完整形式和解释的词汇表页面的链接,或者至少在周围文本中提供它们。

请参阅缩写
3.1.5 阅读水平 (AAA)

如果提供的文本需要高于初中教育水平(通常是 11-14 岁左右的儿童)的阅读水平,请提供补充解释材料以帮助无法阅读的人,或提供一个以初中水平编写的替代版本。

这并不意味着所有主题内容都应该被所有人理解,而是写作风格应该对所有人开放。最好将所有内容都以初中水平编写,即使是编程教程等技术文档,除非有充分的理由不这样做(例如,为了诗意效果的替代风格),或者它们必须以严格的风格编写(例如,W3C 规范)。

3.1.6 发音 (AAA)

应提供一种机制,允许用户在需要充分理解内容时访问单词的发音。

HTML <audio> 元素可用于创建一个控件,允许读者播放包含正确发音的音频文件,并且在难词之后包含文本发音指南也很有意义,就像您在字典条目中看到的那样。

请参阅视频和音频内容,以及英语词典发音指南

注意:另请参阅 WCAG 对指南 3.1 可读性:使文本内容可读和可理解的描述。

指南 3.2 — 可预测性:使网页以可预测的方式出现和操作

本指南着重于使用户界面直观且易于理解。

成功标准 如何符合标准 实用资源
3.2.1 获得焦点时 (A)

当控件或其他页面功能获得焦点时,它不应以可能混淆或使用户迷失方向的方式改变上下文。

这是一个明智的设计问题——人们不希望界面给他们带来惊喜;他们希望事情是直观的,并按预期行事。例如,聚焦导航菜单选项不应改变显示的页面——它应该在显示改变之前被激活。

Elementfocus 事件包含一些有用的信息。另请参阅重新构建键盘可访问性以获取一些有用的实现思路。
3.2.2 输入时 (A)

当数据输入到控件中,或设置更改时,上下文不应意外改变。用户应在更改发生之前被警告/告知即将发生的更改。

同样,应实施明智的设计。例如,如果按下按钮导致应用程序退出当前视图,应要求用户确认此操作,如果合适,保存他们的工作等。

input 事件在此处很有用。
3.2.3 导航一致性 (AA)

导航菜单/控件的样式和定位应在网页的不同页面或视图之间保持一致,并且现有项目应按相同的顺序出现,即使例如添加了新项目。如果用户启动了更改,例如,为导航选择了不同的配色方案或位置,则其选择应在所有页面上得到尊重。

同样,明智的设计——使所有页面或视图中的导航控件保持一致。

有关布局的现代标记信息,请参阅逻辑地组织页面部分。另请参阅将链接样式化为按钮,以获取一个有用的可访问导航菜单示例。
3.2.4 识别一致性 (AA)

具有相同功能的控件或组件应在不同页面或视图中以相同的方式标识。例如,出现在世界旅行网站每个页面上的货币转换器,在语义和标签方面都应该完全相同。

同样,明智的设计!

“标签”可以指文本内容中的描述性信息,或 HTML 表单标签。有关更多信息,请参阅使用有意义的文本标签
3.2.5 按请求更改 (AAA)

可能使人困惑或迷失方向的上下文更改,只应在用户请求时发生,或者用户应该能够关闭它们。

如果您需要对当前视图进行重大更改(例如,内容或控件),请让用户控制何时发生该更改(例如,显示哪个页面,何时在画廊中前进到下一张照片……)。

如果您需要在页面上使用轮播图,请提供一个选项来停止其自动前进。如果可能,最好避免此类功能。

3.2.6 一致的帮助 (A)

包含帮助机制(包括自助选项和人工联系方式)并在多个网页上重复出现的网页,需要将这些机制以相同的顺序放置在所有页面上,除非由用户发起更改。

查阅此标准的一致帮助文档以了解更多信息。

指南 3.3 — 输入帮助:帮助用户避免和纠正错误

本指南主要围绕帮助用户在需要时以最少的错误输入正确信息。

成功标准 如何符合标准 实用资源
3.3.1 错误识别 (A)

当用户填写表单或在选项之间选择时,任何检测到的错误都应清晰地报告给用户,并说明错误所关联的表单控件。

建议通过 HTML 表单验证功能和/或 JavaScript 实现客户端错误检测和处理,具体取决于您的具体情况。当检测到错误时,应在错误的表单输入旁边显示直观的错误消息,以帮助用户更正其输入。对于屏幕阅读器用户,您可以使用 aria live regions 来提醒用户页面上的更改。

注意:服务器端验证应始终与客户端验证一起使用。客户端验证太容易关闭或绕过,因此不能单独依赖它。

有关全面的验证信息,请参阅表单数据验证,有关实时区域的信息,请参阅WAI-ARIA:动态内容更新
3.3.2 标签或说明 (A)

当需要数据输入时,应提供清晰的说明。当需要简短的说明或提示时,您可以对单个输入(如姓名或年龄)使用 <label> 元素,对多个相关输入(如出生日期或邮政地址的元素)使用 <label><fieldset>/<legend> 的组合。

当需要更复杂的解释时,您也可以随时包含解释段落,或者您可能需要尝试使您的表单更直观。

3.3.3 错误建议 (AA)

当检测到错误并已知纠正建议时,将其提供给用户(例如,当用户选择用户名并选择了已被占用的用户名时,建议替代方案),除非这样做会导致安全问题(例如,输入密码时)或上下文问题(例如,他们正在尝试回答测验应用程序中的问题)。

在这种情况下,如果合适,您可能会结合使用 JavaScript 和服务器端功能来检查输入是否正确,如果不对,可以向用户提供哪些可行的建议。这些建议应像错误消息一样在上下文中有效地显示(参见 3.3.1)。

暂无教程建议。
3.3.4 错误预防(法律、财务、数据) (AA)

对于涉及敏感数据(如法律协议、电子商务交易或个人数据)输入的表单,以下至少一项应为真:

  • 提交可撤销。
  • 数据经过错误检查,并向用户提供纠正错误的机会。
  • 在最终提交之前,有可用于确认和更正信息的机制。

可撤销 — 对于任何可以输入数据的视图,提供一个等效视图,允许您根据需要编辑甚至删除条目(例如,请参阅Django Web 框架)。

检查数据 — 如 3.3.1 所述,应结合客户端和服务器端验证来检测错误并向用户显示有用的消息,以允许他们纠正其输入。

确认和纠正 — 在适当的情况下,在填写一系列表单字段以执行任务(例如购买产品)后,应向用户显示确认屏幕,他们可以在其中查看其输入并纠正任何看起来不正确的内容。这种模式通常用于亚马逊等电子商务网站。

3.3.5 提供上下文相关帮助 (AAA) 在上下文中提供说明和其他适当的提示,以帮助完成和提交表单。 这实际上只是在 3.3.1 和其他类似标准的基础上进行扩展,但需要更全面的上下文帮助信息和服务,例如,在每个页面上提供指向帮助页面或服务的专用链接,提供示例以说明成功完成后的外观。
3.3.6 错误预防(所有) (AAA) 本原则建立在 3.3.4 的基础上,将其要求扩展到所有用户输入情况,而不仅仅是涉及敏感数据的情况。 再次参见 3.3.4。
3.3.7 冗余输入 (A) 在相同过程或用户流程中,用户之前输入或提供的信息要么自动填充,要么可供用户从选项列表中选择,除非重新输入信息对于安全原因至关重要或必需,或者信息不再有效。 查阅了解冗余输入以了解更多信息。
3.3.8 可访问的身份验证(最低限度) (AA) 身份验证过程中的任何步骤都不需要认知功能测试(如记住密码),除非提供了替代方案,例如对象或个人内容(例如图像、视频和音频)识别,或辅助机制(例如复制粘贴和自动保存密码)。 查阅此标准的可访问身份验证文档以了解更多信息。
3.3.9 可访问的身份验证(增强) (AAA) 在身份验证过程中的任何步骤中,都不得要求进行认知功能测试(例如记住密码),除非提供不依赖认知功能测试的替代方案,或提供协助用户完成认知功能测试的机制。允许要求用户识别对象或识别用户提供给网站的非文本内容的身份验证测试。 查阅增强型可访问身份验证文档 (AAA) 以了解更多信息。

注意:另请参阅 WCAG 对指南 3.3 输入帮助:帮助用户避免和纠正错误的描述。

另见