如何根据搜索框中输入的文本通知用户建议列表已到达

Question

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

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

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

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

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

Answer 1

正如评论中指出的那样，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。

从咏叹调角色和状态

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

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