Программа чтения с экрана читает дополнительный контент во время навигации

Я внедрял WCAG (Руководство по доступности веб-контента) на нашем веб-сайте. Я использую программу чтения с экрана JAWS для тестирования и навигации с помощью клавиши Tab.

Проблема в том, что программа чтения с экрана считывает дополнительный контент при переходе к видеоплееру. Он читает «посещенную ссылку» вместо перехода к следующему элементу, и при чтении того же ничего не фокусируется и не выделяется. Мы также не можем видеть какие-либо элементы при проверке через браузер.

<ul class="nav in" id="side-menu">
     <li><a href="/myaccount"><i class="fa fa-university" aria-hidden="true"></i> My Account</a></li>
     <li><a href="/register"><i class="fa fa-pencil" aria-hidden="true"></i> Register</a></li>
     <li><a href="/contact"><i class="fa fa-envelope" aria-hidden="true"></i>Contact Support</a></li>
</ul>
<div class="vzaar_media_player embed-responsive embed-responsive-4by3">
    <iframe id="iframe-example" src="https://www.youtube.com/embed/2MpUj-Aua48?ecver=1&amp;autohide=1&amp;showinfo=0&amp;feature=oembed" class="embed-responsive-item" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="">
    </iframe>
</div>

В приведенном выше примере средство чтения с экрана перемещается и читает правильно до «Обратиться в службу поддержки». Затем, если мы попытаемся продвинуться вперед с помощью клавиши Tab, вместо перехода к кнопке воспроизведения в проигрывателе будет написано «Связаться со службой поддержки по ссылке».


html jaws-screen-reader screen-readers keyboard-navigation
person Sayhan    schedule 05.06.2018    source источник
comment
Что если снова нажать Tab?   -  person unor    schedule 06.06.2018
comment
@unor перейдет к кнопке воспроизведения, если мы снова нажмем Tab   -  person Sayhan    schedule 06.06.2018
comment
Эй, нужно добавить индекс Tab в iframe, чтобы он сфокусировался и читал. для фокуса вам нужно написать css как набросок, тогда вы увидите линии фокуса во время табуляции.   -  person Mr_vasu    schedule 08.06.2018
comment
@Mr_vasu Спасибо за ваши комментарии, iframe находится в фокусе. Проблема в том, что он переходит к дополнительному содержимому, которого нет, вместо перехода к iframe, и после этого, если мы нажмем Tab, он сфокусирует проигрыватель.   -  person Sayhan    schedule 12.06.2018

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете проверить более надежный способ обработки навигации с помощью клавиатуры с помощью https://github.com/amanboss9/naviboard библиотека. Так как клавиша tab помогает вам перемещаться по шаблону и терять фокус после того, как вы закончите навигацию по странице. shift+tab помогает в обратной навигации, но при этом вы не можете контролировать навигацию в соответствии с наложением элемента на экран.

  • Включить библиотеку naviBoard
  • Используйте class для навигации по нужным элементам и поместите tabindex, чтобы поместить на них фокус.
  • установить навигацию методом naviBoard.setNavigation().

Вы все сделали!!

Вы можете просмотреть демонстрацию этого ниже jsfiddle: https://jsfiddle.net/amanboss9/unf94tjo/3/embedded/result/

person Aman sharma    schedule 09.07.2018