title: How to prevent JAWS screen reader from saying "read only" on div checkbox?
body: <p>We are using <a href="https://www.coveo.com/en/solutions/coveo-for-sitecore" rel="nofollow noreferrer">Coveo</a> for their elaborate search capabilities on top of <a href="https://www.sitecore.com/" rel="nofollow noreferrer">Sitecore</a> CMS.</p>
  
  <p>The filter facets to narrow down your search results generates a list of checkboxes with a <code>&lt;div&gt;</code> tag, and each of these along with text next to it is inside a <code>&lt;li&gt;</code>, which as a group are inside a <code>&lt;ul&gt;</code> (code sample below). Visually appears like so:</p>
  
  <p><a href="https://i.stack.imgur.com/UWIUD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UWIUD.png" alt="Two checkboxes with label next to each"></a></p>
  
  <p>Had to use jQuery to add my own attributes to make sure <code>div.coveo-facet-checkbox</code> was recognized/read as a checkbox by screen readers, which is working quite well with NVDA and ChromeVox.</p>
  
  <p>However, JAWS has a slight issue that once focus moves into the <code>&lt;ul&gt;</code> list, the first <code>div.coveo-facet-checkbox</code> it will land on, JAWS will first announce "readonly".</p>
  
  <p>Code <strong>sample</strong>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul&gt;
    &lt;li&gt;
      &lt;label&gt;
        &lt;div&gt;
          &lt;input type="checkbox" form="coveo-dummy-form" style="display:none;"&gt;
          &lt;div class="coveo-facet-checkbox" tabindex="0" title="Education and Events" role="checkbox" aria-checked="false"&gt;&lt;/div&gt;
          &lt;span class="coveo-facet-value-caption" title="Education and Events" data-original-value="Education and Events" aria-hidden="true"&gt;Education and Events&lt;/span&gt;
        &lt;/div&gt;
      &lt;/label&gt;
    &lt;/li&gt;
    &lt;li&gt;
        ...(structured same as above &lt;li&gt;)...
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I have tried to add the attributes <code>readonly="false"</code> and <code>aria-readonly="false"</code> on ALL tag levels of code sample shared, and still JAWS chooses to announce "readonly"</p>
  
  <p>Not sure what else to do/try. Tried to search online, but only found people complaining about similar sitiations, but with not fix/solution.</p>
  
  <p>Any tips/tricks for me to try out would be appreciated.</p>
  
  <p><em>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).</em></p>