屏幕阅读器无法读取“vue-search-select”的选项答案

【问题标题】：Screen readers unable to read options of `vue-search-select`屏幕阅读器无法读取“vue-search-select”的选项
【发布时间】：2023-04-03 09:31:02
【问题描述】：

我继承了一个 vuejs 项目。使用屏幕阅读器作为辅助设备的人抱怨他们的屏幕阅读器无法阅读由vue-search-select 制作的下拉菜单中的选项。以下是重现问题的方法：

这是一个 10 秒的剪辑，演示了第 3 步（共 7 步）。

如何修改vue-search-select，以便在第 7 步中，屏幕阅读器将读出所选项目的内容，而不是读出单词“Blank”？

现在，作为一个临时解决方案，我正在尝试编写一个setTimeout 函数，该函数将自动添加适当的元数据以强制屏幕阅读器读出内容。但我不确定这种方法会有多成功。我更喜欢vue-search-select 的惯用方法。

我尝试像这样添加 customAttr：

<model-select :custom-attr="ariaAttrs" />
function ariaAttrs() {
   return function() { return '" aria-label="hello" tabindex="0'; }
}

虽然属性确实出现在我的开发者控制台的检查器中，但我的屏幕阅读器仍然没有读出选项。

【问题讨论】：

Vue 期望将属性放在模板中的元素上
@DerekPollard - <model-select :custom-attr="ariaAttrs" />function ariaAttrs() {return function() { return '" aria-label="hello" tabindex="0'; }} 是否满足您对“模板中元素的属性”的定义？如果不是，你能澄清一下吗？谢谢！
从我在代码中可以看出，当您按下向上和向下箭头键时，浏览器实际上并不是.focus()。相反，vue-search-select 只是从相应的<div class=""> 项中添加或删除 css 类 selected。因为div.selected 实际上不在.focus() 中，所以屏幕阅读器自然会说出“空白”这个词来表示您实际上没有关注任何内容。

【解决方案1】：

custom-attr 似乎对你没有帮助，因为它不允许你添加任何你想要的 attr - 函数返回 is just placed 作为 data-vss-custom-attr 属性值的任何东西

任何具有类似功能的体面的 Vue 库都会提供 slot 来自定义菜单项的呈现，但这是 does not。另外，它似乎没有维护很长时间，所以也许是时候寻找替代方案了....

【讨论】：