Как изменить стандартные значения JAWS для ролей меню и пунктов меню на индивидуальные? - PullRequest
Новая
       31

Как изменить стандартные значения JAWS для ролей меню и пунктов меню на индивидуальные?

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

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

<div class="ul" role="menu">
  <div tabindex="0" class="li" role="menuitem"><a href="#home">Home</a></div>
  <div tabindex="-1" class="li" role="menuitem"><a href="#news">News</a></div>
  <div tabindex="-1" class="li" role="menuitem"><a href="#contact">Contact</a></div>
  <div tabindex="-1" class="li" role="menuitem"><a href="#about">About</a></div>
</div>

как этот код, который я создаю. Я делаю это как горизонтальную навигацию и привязываю события для этого (стрелки влево и вправо) 

const btns = document.querySelectorAll(".li")
console.log(btns)
btns.forEach(btn => {
   btn.addEventListener('keydown', event => {
      if (event.keyCode == 39)
      document.activeElement.nextElementSibling.focus() 
      else if (event.keyCode == 37) document.activeElement.previousElementSibling.focus()
   });

});

но при чтении челюстями, например, , используйте кнопки со стрелками вверх и для навигации . как я могу это изменить? в моем случае это должно выглядеть так: используйте кнопки со стрелками влево и вправо для навигации.

ниже - плункер https://plnkr.co/edit/rVOGMFHoWFt7F3Aicipz?p=preview

1 Ответ

1 голос
/ 15 марта 2019

Короткий ответ: ты не можешь.Когда вы указываете role, это подсказывает программе чтения с экрана (SR), что объект будет вести себя определенным образом.Когда SR увидит menu, он объявит, что вы можете использовать клавиши со стрелками вверх / вниз для навигации, подобно тому, как он скажет «нажмите пробел, чтобы активировать», когда он увидит role="button".

Однако обычный пользователь СР поймет, что когда он слышит «меню», он знает, что будет использовать вверх / вниз или влево / вправо для навигации по меню и, в общем, будет игнорироватькак SR сказал им взаимодействовать.Фактически, опытные пользователи SR, вероятно, изменят свое многословие на «низкий», чтобы фраза взаимодействия («использовать стрелки вверх / вниз» или «нажимать пробел») вообще не была объявлена.

ПокаВы следуете шаблону « взаимодействие с клавиатурой » для меню, все должно быть в порядке.

Теперь, сказав, что вы могли бы иметь возможность использовать (в некоторой степени) новый атрибут aria-roledescription, но я не уверен, насколько хорошо он поддерживается во всех комбинациях браузеров и программ чтения с экрана.Установка его значения может просто повлиять на объявление о «меню», а не изменить сообщение «использовать клавиши со стрелками».Вам придется провести некоторое тестирование.

Обратите внимание, что ваш оригинальный пример немного странный.У вас есть две вкладки для каждого пункта меню.Один для

(потому что он имеет tabindex = "0") и один для ссылки.В действительности нет необходимости во внутренних
элементах.Просто есть что-то вроде: 
<div class="ul" role="menu">
  <a role="menuitem" href="#home">Home</a>
  <a role="menuitem" href="#news">News</a>
  <a role="menuitem" href="#contact">Contact</a>
  <a role="menuitem" href="#about">About</a>
</div>
...