Does Aria-Describedby need tabindex=-1 on span tags in IE11?

Example 1

Example 3: two references in the aria- describedby

Example 4: Two references with aria-labelledby

Example 5: two references in the aria- describedby tabindex=-1 on span

Example 6: Two references with aria-labelledby tabindex=-1 on span

Results

JAWS 15 or NVDA 2014.3 .

Example 1

	JAWS16	NVDA2014.4	VoiceOver
FireFox35	OK	OK	N/A
IE11.0.96	OK	OK	N/A
Chrome 40	OK	OK	N/A
Safari MacOS	N/A	N/A	OK, sort of. By default waits about 5 seconds, then reads "You are currently in an edit fields inside of an HTML element. the help text is ✓test1 test2

Example 2: tabindex=-1 on span

	JAWS16	NVDA2014.4	VoiceOver
FireFox35	OK	OK	N/A
IE11.0.96	OK	OK	N/A
Chrome 40	OK	OK	N/A
Safari MacOS	N/A	N/A	OK Sort of (see Ex. 1 above)

Example 3: two references in the aria- describedby

	JAWS16	NVDA2014.4	VoiceOver
FireFox35	OK	OK	N/A
IE11.0.96	OK	Neither aria describedby's read	N/A
Chrome 40	OK	OK	N/A
Safari MacOS	N/A	N/A	OK Sort of (see Ex. 1 above)

Example 4: Two references with aria-labelledby

	JAWS16	NVDA2014.4	VoiceOver
FireFox35	OK	OK	N/A
IE11.0.96	OK	Neither aria labelledby's read	N/A
Chrome 40	OK	OK	N/A
Safari MacOS	N/A	N/A	OK Sort of (see Ex. 1 above)

Example 5: two references in the aria- describedby tabindex=-1 on span

	JAWS16	NVDA2014.4	VoiceOver
FireFox35	OK	OK	N/A
IE11.0.96	OK	OK	N/A
Chrome 40	OK	OK	N/A
Safari MacOS	N/A	N/A	OK Sort of (see Ex. 1 above)

Example 6: Two references with aria-labelledby tabindex=-1 on span

	JAWS16	NVDA2014.4	VoiceOver
FireFox35	OK	OK	N/A
IE11.0.96	OK	OK	N/A
Chrome 40	OK	OK	N/A
Safari MacOS	N/A	N/A	OK Sort of (see Ex. 1 above)

Comments

The tabindex="-1" is not required in IE for aria-describedby or labelledby IF there is one reference.
With two references NVDA requires a tabindex="-1" Jaws does not require it.

Appendix 1: Code

Example 1

<div class="success"> <label for="username"> <strong>OK:</strong> Username: </label> <input type="text" name="username" id="username" value="spaceteddy13" aria-describedby="userDesc"> <span id="userDesc">✓test</span> </div>

Example 2

Same as above with tabindex="-1" on span

Example 3

<form action="" method="get">

  <label for="username3">

  <strong>OK:</strong> Username:

  </label>

  <input type="text" name="username"

    id="username3" value="spaceteddy13"

    aria-describedby="userDesc3 userDesc4">

  <span id="userDesc3">✓test1</span>

  <span id="userDesc4">test2</span>

  </form>

Example 4

<form action="" method="get">

<label for="username5">

<strong>OK:</strong> Username:

</label>

<input type="text" name="username"

id="username5" value="spaceteddy13"

aria-describedby="userDesc5 userDesc6">

<span id="userDesc5">✓test1</span>

<span id="userDesc6">test2</span>

</form>

Example 5

<form action="" method="get">

<label for="username34">

<strong>OK:</strong> Username:

</label>

<input type="text" name="username"

id="username34" value="spaceteddy13"

aria-describedby="userDesc34 userDesc44">

<span id="userDesc34" tabindex="-1">✓test1</span>

<span id="userDesc44" tabindex="-1">test2</span>

</form>

Example 6

<form action="" method="get"> <label for="username8"> <strong>OK:</strong> Username: </label> <input type="text" name="username" id="username8" value="spaceteddy13" aria-describedby="userDesc9 userDesc10"> <span id="userDesc9" tabindex="-1">✓test1</span> <span id="userDesc10" tabindex="-1">test2</span> </form>