如何让屏幕阅读器识别禁用的<option>选项（含非常规方法）

我明白你的需求——这些禁用选项是用来提示异常的，正常情况下不该禁用，所以得让屏幕阅读器能识别到它们对吧？下面给你几个经过验证的方案，适配JAWS和NVDA：

方案1：用aria-disabled替代原生disabled（推荐） #

原生的disabled属性会让选项无法被聚焦，很多屏幕阅读器会直接跳过这类选项。换成aria-disabled="true"标记状态，同时用JavaScript阻止选中，既能让屏幕阅读器读取到选项和禁用状态，又能保证用户无法选择它。

代码示例：

<select id="sel" size="3">
  <option value="a">A</option>
  <option value="b" aria-disabled="true">B</option>
  <option value="c">C</option>
</select>

<script>
const selectEl = document.getElementById('sel');
selectEl.addEventListener('change', function(e) {
  const selectedOpt = e.target.selectedOptions[0];
  if (selectedOpt?.getAttribute('aria-disabled') === 'true') {
    // 取消选中操作
    e.target.selectedIndex = -1;
    // 可选：给屏幕阅读器额外提示
    const utterance = new SpeechSynthesisUtterance('该选项因异常不可用');
    window.speechSynthesis.speak(utterance);
  }
});

// 可选：阻止键盘选中禁用选项
selectEl.addEventListener('keydown', function(e) {
  const currentIndex = selectEl.selectedIndex;
  const nextIndex = e.key === 'ArrowDown' ? currentIndex + 1 : currentIndex - 1;
  const targetOpt = selectEl.options[nextIndex];
  if (targetOpt?.getAttribute('aria-disabled') === 'true') {
    e.preventDefault();
  }
});
</script>

方案2：给原生禁用选项补充无障碍标签 #

如果必须保留原生disabled属性，可以通过aria-label或aria-describedby给选项添加额外的状态说明，让屏幕阅读器读取到禁用原因：

<select id="sel" size="3">
  <option value="a">A</option>
  <!-- 直接在aria-label里说明状态 -->
  <option value="b" disabled aria-label="B - 当前异常，暂不可用">B</option>
  <option value="c">C</option>
</select>

或者用外部描述元素：

<div>
  <p id="status-note">禁用选项表示当前存在系统异常，正常场景下不会出现</p>
  <select id="sel" size="3" aria-describedby="status-note">
    <option value="a">A</option>
    <option value="b" disabled>B</option>
    <option value="c">C</option>
  </select>
</div>

方案3：在选项文本中明确标注状态 #

最简单的方式是直接在禁用选项的文本里加入状态说明，比如B [禁用：异常状态]，这样不管屏幕阅读器是否识别disabled属性，用户（包括技术人员）都能直观看到，同时屏幕阅读器也会读取完整文本：

<select id="sel" size="3">
  <option value="a">A</option>
  <option value="b" disabled>B [禁用：当前系统异常]</option>
  <option value="c">C</option>
</select>

小提示 #

记得用JAWS和NVDA实际测试你的实现，不同版本的阅读器对无障碍属性的支持可能略有差异，优先选择方案1，它的用户体验和兼容性最好。

内容的提问来源于stack exchange，提问作者pushkin