javascript - 如何通知用户建议列表已到达与在搜索框中输入的文本相对应

我有一个手动选择的自动完成列表意味着：

当显示建议框/列表时，它包含与文本框中键入的字符相对应的建议值。在我的实现中，列表框中的值的名称以文本框中键入的字符开头。

用户可以通过从建议列表中选择一个值来设置搜索框的值。

如果用户在将焦点移出搜索框之前未从建议列表中选择值，则用户键入的值（如果有）将成为搜索框的值。

所以我在这里的问题是如何向视障用户提供建议列表现在已经到达与他输入的文本相对应的信息。

标签： javascripthtmlaccessibility

正如评论中所指出的，HTML datalist 元素将是实现建议框的标准兼容方式。它将通过list属性与您的文本输入相关联。

<input list="ice-cream-flavors" … />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    …
</datalist>

从长远来看，坚持使用 HTML 通常可以确保对可访问性的最强大支持，您甚至不必担心如何宣布对这个列表的更改。

但是，截至目前，似乎最受欢迎的屏幕阅读器并未宣布对建议的更改，因此您可能需要另一种解决方案。

ARIA 创作实践提供了一些关于如何构建搜索建议的指南。该模式称为Combobox，相应的自动完成行为将是“使用手动选择列出自动完成”。

该文档中的以下行应回答您的问题：

当组合框弹出窗口不可见时，具有组合框角色的元素将 aria-expanded 设置为 false。当弹出元素可见时，aria-expanded 设置为 true。请注意，具有角色组合框的元素具有默认值为 aria-expanded 的 false。

屏幕阅读器通常会宣布对此属性的更改。

您可能会注意到，除了这个属性之外，还有很多其他属性和角色可供使用，以及键盘导航要实现，以真正使组件易于访问。