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

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

0 голосов
/ 05 июня 2018

Я внедрял 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 , вместо перехода к кнопке воспроизведения в проигрывателе будет отображаться сообщение «Обратиться в службу поддержки».

1 Ответ

0 голосов
/ 09 июля 2018

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

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

Все готово !!

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

...