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).
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');
});