Как запретить программе чтения с экрана JAWS указывать флажок «только для чтения» на элементе div? - PullRequest
Новая
       183

Как запретить программе чтения с экрана JAWS указывать флажок «только для чтения» на элементе div?

0 голосов
/ 23 марта 2019

Мы используем Coveo для их сложных возможностей поиска поверх Sitecore CMS.

Фасеты фильтра для сужения результатов поиска генерируют список флажков с тегом <div>, и каждый из них вместе с текстом рядом с ним находится внутри <li>, которые как группа находятся внутри <ul> (пример кода ниже). Визуально выглядит так:

Two checkboxes with label next to each

Пришлось использовать 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 решает объявить «только для чтения»

Не уверен, что еще нужно сделать / попробовать. Пытался искать в Интернете, но нашел только людей, жалующихся на подобные ситуации, но не с исправлением / решением.

Буду признателен за любые советы и рекомендации, которые я могу попробовать.

ПРИМЕЧАНИЕ. Извините, если я не могу ответить сразу, поскольку у меня не будет большого шанса быть на компьютере до понедельника (отредактирую эту последнюю строку, когда вернусь).

1 Ответ

0 голосов
/ 08 апреля 2019

Считыватели экрана сами по себе не на 100% совершенны, и им удалось отнести это к тому факту, что флажок находится внутри <li>.

. Простое изменение атрибута роли <li> изменит способпрограмма чтения с экрана сообщит, когда фокус переключится на флажок.

Так что теперь просто решите, какую роль использовать.Я сталкивался с role="none", который поддерживает JAWS, а 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');

});
...