0

I was implementing WCAG (Web Content Accessibility Guidelines) on our website. I am using JAWS screen reader for testing and navigating using Tab key.

The issue is, the screen reader reads an extra content while navigating to the video player. It reads "visited link" instead of going to next element and nothing being focused or highlighted while reading the same. We cannot see any elements when inspecting through the browser also. 

<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>

In the above example, the screen reader navigates and reads correctly till "Contact Support". Then if we try to move forward using Tab key, it reads "Contact support visited link" instead of going to the play button in the player.

unor
  • 92,415
  • 26
  • 211
  • 360
Sayhan
  • 165
  • 20
  • What if you press Tab again? – unor Jun 06 '18 at 11:48
  • 1
    @unor it will navigate to play button if we press Tab again – Sayhan Jun 06 '18 at 11:52
  • Hey, need add Tab index to iframe, so it will focus and it will read. for focus you have to wite css like outline , than you will see focus lines while tabbing. – Mr_vasu Jun 08 '18 at 09:14
  • @Mr_vasu Thanks for your comments, the iframe is being focused. The issue is, it navigates to an extra content which is not present instead of navigating to the iframe, and after that, if we hit Tab, it will focus the player. – Sayhan Jun 12 '18 at 05:58

1 Answers1

0

You can check a more robust way of keyboard navigation handling with https://github.com/amanboss9/naviboard library. As tab key helps you to navigate through a pattern and lose focus once you are done with the page navigation.shift+tab helps in reverse navigation but still you have no control over the navigation according to the element overlaying on the screen.

  • Include the library naviBoard
  • Use class navigable on the desired items and put tabindex to put the focus on them.
  • set navigation with naviBoard.setNavigation() method.

You are all done!!

You can go through the demo of this by below jsfiddle: https://jsfiddle.net/amanboss9/unf94tjo/3/embedded/result/

Aman sharma
  • 214
  • 2
  • 9