如何让屏幕阅读器选择禁用选项(通过欺骗或其他方式)?

时间:2018-03-22 21:23:45

标签: html html5 wai-aria jaws-screen-reader nvda

我有<select>个元素,其中有几个option,其中一些被禁用。

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

已禁用的option向最终用户(有时是技术人员进行故障排除)发出错误信号。通常不应禁用它。

为了使JAWS和NVDA可以访问,我们将disabled替换为aria-disabled,因为已禁用options aren't可关注,因此屏幕阅读器永远不会选择它们起来。

除了启用这些option之外,我们还应用了一些样式来将它们变灰并使它们看起来禁用。这使得屏幕阅读器的行为恰当,但现在,用户可以选择应禁用的option,这会引入UX问题​​。

.unavailable {
   color: grey;
}
<select id="sel" size="3">
   <option value="a">A</option>
   <option class="unavailable" value="b" aria-disabled="true">B</option>
   <option value="c">C</option>
</select>

似乎在保持当前行为的同时解决这个问题的唯一方法是实现我们自己的自定义选择控件,该控件允许禁用的选项可以聚焦(或者沿着这些线)。

除非这样做,处理这个的规范方法是什么?屏幕阅读器似乎永远不会选择禁用的选项,因此具有禁用选项的软件永远无法完全访问(就屏幕阅读器而言)?

有没有办法让两全其美?一个不可选择的,灰色的option可以被屏幕阅读器接收。

0 个答案:

没有答案