如何防止JAWS屏幕阅读器在div复选框上说“只读”？

Question

我们正在使用科韦奥作为他们在塞托雷 CMS之上的详细搜索功能。

缩小搜索结果范围的过滤器方面会生成一个带有<div>标记的复选框列表，每个复选框及其旁边的文本都在<li>中，它作为一个组存在于<ul>中(下面的代码示例)。在视觉上如下所示：

​

​

必须使用jQuery来添加我自己的属性，以确保屏幕阅读器将div.coveo-facet-checkbox识别/读取为复选框，这与NVDA和ChromeVox的工作非常好。

然而，JAWS有一个小问题，一旦焦点移到<ul>列表中，它将在第一个div.coveo-facet-checkbox上登陆，JAWS将首先宣布“只读”。

代码示例

<ul>
  <li>
    <label>
      <div>
        <input type="checkbox" form="coveo-dummy-form" style="display:none;">
        <div class="coveo-facet-checkbox" tabindex="0" title="Education and Events" role="checkbox" aria-checked="false"></div>
        <span class="coveo-facet-value-caption" title="Education and Events" data-original-value="Education and Events" aria-hidden="true">Education and Events</span>
      </div>
    </label>
  </li>
  <li>
      ...(structured same as above <li>)...
  </li>
</ul>

我尝试在代码示例共享的所有标记级别上添加属性readonly="false"和aria-readonly="false"，但JAWS仍然选择宣布“只读”。

不知道还能做什么/尝试什么。试图在网上搜索，但只发现人们抱怨类似的sitiations，但没有修复/解决方案。

如有任何小窍门可供我试用将不胜感激。

注意:很抱歉，如果我不能立即回复，因为我将没有多少机会在电脑上，直到星期一(将编辑这最后一行，当回来)。

Answer 1

屏幕阅读器本身并不是100%完美的，并且能够跟踪这一点，因为复选框在<li>中。

只需更改<li>的角色属性，屏幕阅读器就可以在焦点转到复选框时宣布。

所以现在决定使用哪个角色。我偶然发现了role="none"，它支持JAWS，但NVDA不支持。然而，由于这是一个特定的问题，这似乎是一个不错的选择。

为了在Coveo呈现结果之后应用这样的更改，deferredQuerySuccess被用于改进复选框div：

// When Filter Facets are rendered.
Coveo.$$(document.body).on('deferredQuerySuccess', function (e, args) {

    // Set role for each li parent of Coveo's <div> checkboxes
    // to prevent JAWS screen reader from saying 'readonly'
    $('.coveo-facet-value.coveo-facet-selectable').attr('role', 'none');

});