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

Question

我们将Coveo用于Sitecore 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仍然选择宣布“只读”

不确定要执行的其他操作/尝试。试图在线搜索，但只发现有人抱怨类似的情况，但没有解决/解决方案。

我会尝试的任何技巧/窍门。

注意：很抱歉，如果我不能立即回应，因为直到星期一我都没有多少机会上电脑（返回时将编辑最后一行）。

Answer 1

屏幕阅读器本身并不是100％完美，因此可以追溯到<li>内的复选框这一事实。

只需更改<li>的角色属性，即可更改屏幕阅读器在焦点移至复选框时宣布的方式。

因此，现在只需确定要使用哪个角色即可。我遇到了JAWS支持的role="none"，但NVDA不支持。但是，由于这是JAWS特有的问题，因此这似乎是一个不错的选择。

要在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');

});