Vue Multiselect 禁用时屏幕阅读器无法访问

Question

我正在使用 Vue 和多选来获得国家/地区下拉菜单。当下拉列表预先填充了某些值并被禁用时，就会出现问题。我有一个要求，屏幕阅读器仍然可以访问该值 - 我正在使用 NVDA 来测试这一点。

禁用下拉菜单后，您无法在其上使用“Tab”键，并且 NVDA 不会读取该值。 无法发布真实代码，但任何多选示例都应该可以用于问题目的。

<div id="app">
  <multiselect 
    v-model="value" 
    :options="options"
    track-by="country"
    :disabled="true">
  </multiselect>
</div>

我尝试将 tabindex=0 添加到多选中，这允许屏幕阅读器看到此禁用的下拉列表，但读取的文本具有国家/地区名称，并且末尾有 clickable。这是不行的，因为该字段不可点击。

<div id="app">
  <multiselect 
    tabindex="0"
    v-model="value" 
    :options="options"
    track-by="country"
    :disabled="true">
  </multiselect>
</div>

Answer 1

这是正常行为。

disabled

表单控件已从 Tab 键顺序中删除。

布尔值禁用属性（当存在时）使元素不可变、不可聚焦，甚至不与表单一起提交。

您应该能够在读取模式下读取值，而不是表单模式（选项卡导航）。

有了 NVDA，那就是

NVDA + 向下箭头

如果在填写表单时值的存在很重要，HTML

readonly

属性将满足您的需求。

PrimeVue 的多选组件似乎不支持该属性。