The link in the <p class="vjs-no-js"> paragraph is not hidden from screen readers by IE9-11

[OwenEdwards]

Description

The documentation recommends adding the line <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> inside the video tag - this CSS was added in 227700a, with the following instructions:

/*  In IE8 w/ no JavaScript (no HTML5 shim), the video tag doesn't register.
    The .video-js classname on the video tag also isn't considered.
    This optional paragraph inside the video tag can provide a message to users
    about what's required to play video. */

Once video.js runs, that text is no longer visible, but the link is still in the keyboard focus (Tab) order for screen reader users. The text of the link seems to not be recognized correctly, so the link is announced as the previous focused element.

Steps to reproduce

Using JAWS (16) on IE9, but also on IE11. On the http://www.videojs.com page, tab through the page to the big play button. Notice that there's a focus element before the BPB, and if you Shift-Tab back to it, it is announced as the BPB.

This link should be removed from the Tab order once video.js loads. (Note that aria-hidden does not remove content from the focus order - see https://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/ for preferred ways to hide this content from all users).

Additional Information

Please include any additional information necessary here. Including the following:

versions

videojs

v5.8.0

browsers

IE9, IE11 (Not tested on others)

OSes

Windows 7

plugins

None

[OwenEdwards]

This is looking like it's an IE issue, rather than a video.js issue. It seems like fallback text within the <video> element is hidden, but links are still in the focus (Tab) order, even for a simple video example which does not use video.js. (It's a little like the behavior of aria-hidden, in that respect). I'm doing further investigation, but this seems to be unique to IE, including IE11.

It would be possible to work around this bug with JavaScript in video.js, by hiding or removing vjs-no-js content (or, indeed, any unused content in the video element) once vjs has taken over that video; but that's more of an IE shim than a video.js feature. What do you think @gkatsev, @mmcc @heff?

[gkatsev]

Sounds fine by me.

[heff]

Sounds good!

[gkatsev]

Fixed by #3194.