求助：Vue Multiselect禁用预填后无法被屏幕阅读器正常访问

云上老周

2026-6-25

解决Vue Multiselect禁用状态下屏幕阅读器无法访问值的问题

方法1：通过ARIA属性修正可访问性误导

给禁用的multiselect保留tabindex="0"以支持Tab聚焦，同时添加ARIA属性明确告知屏幕阅读器控件状态：

<multiselect 
  tabindex="0"
  v-model="value" 
  :options="options"
  track-by="country"
  :disabled="true"
  aria-disabled="true"
  aria-readonly="true">
</multiselect>

aria-disabled="true"：直接告诉屏幕阅读器控件处于禁用状态，抵消tabindex带来的可交互暗示
aria-readonly="true"：强化只读属性，让NVDA读出值时不会附加“可点击”错误提示

方法2：分离数据绑定与可访问展示

将原禁用multiselect隐藏（保留DOM维持v-model绑定），同时添加一个独立的可访问容器展示值：

<div id="app">
  <!-- 隐藏的禁用控件，仅用于数据绑定 -->
  <multiselect 
    v-model="value" 
    :options="options"
    track-by="country"
    :disabled="true"
    style="visibility: hidden; position: absolute; width: 0; height: 0;">
  </multiselect>
  <!-- 屏幕阅读器可访问的只读展示区 -->
  <div 
    tabindex="0"
    role="region"
    aria-label="已选择国家：{{ value?.country }}">
    {{ value?.country }}
  </div>
</div>

隐藏的控件不影响页面布局和数据逻辑
展示区通过tabindex="0"支持Tab聚焦，aria-label让NVDA精准读出预填内容，且不会提示可交互

方法3：利用插槽自定义禁用状态模板

如果使用官方vue-multiselect包，可通过插槽自定义选中值的展示模板，直接控制可访问性：

<multiselect 
  v-model="value" 
  :options="options"
  track-by="country"
  :disabled="true">
  <template #singleLabel="{ option }">
    <span tabindex="0" aria-disabled="true">{{ option.country }}</span>
  </template>
</multiselect>