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

Question

We are using Coveo for their elaborate search capabilities on top of Sitecore CMS.

The filter facets to narrow down your search results generates a list of checkboxes with a <div> tag, and each of these along with text next to it is inside a <li>, which as a group are inside a <ul> (code sample below). Visually appears like so:

Had to use jQuery to add my own attributes to make sure div.coveo-facet-checkbox was recognized/read as a checkbox by screen readers, which is working quite well with NVDA and ChromeVox.

However, JAWS has a slight issue that once focus moves into the <ul> list, the first div.coveo-facet-checkbox it will land on, JAWS will first announce "readonly".

Code sample:

<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>

I have tried to add the attributes readonly="false" and aria-readonly="false" on ALL tag levels of code sample shared, and still JAWS chooses to announce "readonly"

Not sure what else to do/try. Tried to search online, but only found people complaining about similar sitiations, but with not fix/solution.

Any tips/tricks for me to try out would be appreciated.

NOTE: Sorry if I cannot respond right away as I won't get much chance to be on computer until Monday (will edit this last line out when back).

Answer 1

Screen readers themselves are not 100% perfect and was able to trace this to the fact that the checkbox is inside the <li>.

Just by changing the role attribute of the <li> would change how the screen reader would announce when focus went to the checkbox.

So now to just decide which role to use. I came across role="none" which JAWS does support, but NVDA does not. However, since this is a JAWS specific issue, this seems like a good choice.

To apply changes like this after results are rendered by Coveo, the deferredQuerySuccess was used to improve the checkbox 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');

});