如何防止 JAWS 屏幕 reader 在 div 复选框上说 "read only"？

Question

我们正在使用 Coveo for their elaborate search capabilities on top of Sitecore CMS。

用于缩小搜索结果范围的筛选器方面会生成一个带有 <div> 标记的复选框列表，每个复选框及其旁边的文本都位于 <li> 中，作为组在 <ul> 内（下面的代码示例）。视觉上看起来像这样：

必须使用 jQuery 添加我自己的属性以确保 div.coveo-facet-checkbox 被屏幕阅读器 recognized/read 作为复选框，这在 NVDA 和 ChromeVox 上运行良好。

但是，JAWS 有一个小问题，即一旦焦点移动到 <ul> 列表中，第一个 div.coveo-facet-checkbox 将着陆，JAWS 将首先宣布 "readonly"。

代码样本:

<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 仍然选择宣布 "readonly"

不确定 do/try 还有什么。试图在网上搜索，但只发现有人抱怨类似的情况，但没有 fix/solution。

任何tips/tricks让我尝试一下，我们将不胜感激。

注意：抱歉，如果我不能立即回复，因为我要到星期一才能有太多机会使用计算机（回来后会编辑最后一行）。

Answer 1

屏幕 reader 本身并非 100% 完美，并且能够追溯到复选框位于 <li>.

内这一事实

只需更改 <li> 的角色属性，就会更改 reader 屏幕在焦点转到复选框时的通知方式。

所以现在只需决定使用哪个角色。我遇到了 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');

});

如何防止 JAWS 屏幕 reader 在 div 复选框上说 "read only"？

How to prevent JAWS screen reader from saying "read only" on div checkbox?

accessibility

readonly

wai-aria

jaws-screen-reader

coveo