ARIA:aria-autocomplete 属性

aria-autocomplete 属性用于指示用户在输入文本时,是否会触发一个或多个对用户意图值的预测性显示,这些预测性显示会针对 comboboxsearchboxtextbox 组件,并说明如果进行了预测,将如何呈现这些预测。

描述

自动完成(Autocompletion)是一种用户界面特性,用户在输入框中输入时,会动态地显示建议。用于完成字段值的建议文本会在输入光标之后动态地显示在输入框中,如果用户执行了导致焦点离开输入框的操作(例如按下 Tab 键),建议值就会成为该字段的值。

aria-autocomplete 属性描述了文本框、搜索框或组合框在动态帮助用户完成文本输入时将使用的自动完成交互模型的类型。它区分两种模型:内联模型(aria-autocomplete="inline"),它呈现一个单一的预测值;以及列表模型(aria-autocomplete="list"),它在弹出到文本输入旁边或下方的独立元素中呈现一系列可能的值,类似于 <datalist>。第三个值 aria-autocomplete="both" 用于界面同时呈现列表并包含预测值的情况。默认值为 none,表示文本框、搜索框或组合框不会提供自动完成值。

aria-autocomplete 属性仅为辅助技术描述输入元素的预测行为类型,它本身不提供功能。实际的自动完成功能应使用 HTML 属性或 JavaScript 来实现。

如果建议的自动完成值提供的建议值与用户提供的输入无关,请考虑为所有人省略自动完成。例如,一个显示未过滤的近期搜索词的搜索框输入可能对电子商务网站的营销团队有用,但对屏幕阅读器用户来说可能不太有用。在最佳情况下,不指定 aria-autocomplete 的值或将其设置为默认的 none,通常您的非辅助技术用户也不需要这种体验。

在实现自动完成功能时,请确保建议值的部分以选中文本的形式呈现,以便区分用户输入和建议。请确保当建议值不是期望的值时,用户可以轻松删除该建议或通过继续输入来替换它。

在实现值列表时,DOM 焦点应保持在文本输入框上,同时显示建议列表。

  • 包含 aria-controls 属性,其值为建议值列表所在元素的 ID。
  • 包含 aria-haspopup 属性,其值应与包含建议值集合的元素的角色相匹配。
  • 管理焦点(如果需要),包括使用 aria-activedescendant(如果集合容器支持)。
  • 在具有 combobox 角色的元素上使用 aria-expanded 状态,以传达列表是否显示。

如果自动完成列表值在字段失去焦点时被自动接受,则该列表必须包含在一个支持 aria-activedescendant 的角色中,并且输入字段上的 aria-activedescendant 值应动态调整,以引用包含所选建议的元素。

none(默认)

当用户输入时,不显示任何自动建议。

inline

aria-autocomplete="inline" 可能会动态地在输入光标后插入文本,以建议一种完成用户输入的方式。

list

aria-autocomplete="list" 当用户输入时,可能会显示一个包含可能完成用户输入的值集合的元素。

both

aria-autocomplete="both" 同时提供这两种模型。当用户输入时,可能会显示一个包含可能完成用户输入的值集合的元素。如果显示,集合中的一个值会被自动选中,并且完成该自动选中值所需的文本会出现在输入框的光标之后。

相关角色

用于角色

规范

规范
无障碍富互联网应用程序 (WAI-ARIA)
# aria-autocomplete
未知规范

另见