Below are testing results of aria-labelledby and aria-describedby

Findings

• aria-labelledby and aria-describedby are both well supported in all popular browsers and screen reader combinations
• VoiceOver and Safari, has particular behaviour. By default reads label, then waits 5 seconds, then give chatty pramble before speaking describedby.
• To fix VoiceOver delay and chattiness go to settings>accessibility>VoiceOver>VoiceOver Utility>Verbosity>Hints (uncheck "speak instructions ..." and drag slider "speak hints after delay")
• iphone better than Macbook by default. Not chattey and only waits 2 seconds.
• The tabindex="-1" is not required in IE for aria-describedby or labelledby for one OR two references.
• With two references NVDA requires a tabindex="-1" Jaws does not require it.
• Google Android Talkback doesn't read describedby or labelledby.

Date: Feb. 9, 2015

Example 1: Simple descescribedby

Example 3: two references in the aria- describedby

OK: Username: ✓test1 test2

 

Example 4: Two references with aria-labelledby

OK: Username: ✓test1 test2

Example 5: two references in the aria- describedby (add tabindex="-1" on span )

OK: Username: ✓test1 test2

Example 6: Two references with aria-labelledby (add add tabindex="-1" on span )

OK: Username: ✓test1 test2

Results

JAWS 15 or NVDA 2014.3 .

Example 1

	JAWS16	NVDA 2014.4	VoiceOver	Talkback
FireFox35	OK	OK	N/A	N/A
IE11.0.96	OK	OK	N/A	N/A
Chrome 40	OK	OK	OK, see note for Safari below	Doesn't read labelledby or describedby
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	N/A
Safari iOS (iphone)	N/A	N/A	OK, sort of. 2 second delay by default doesn't read checkmark	N/A

Example 2: add tabindex="-1" on span

Note: talkback on android doesn't read labelledby or describedby

	JAWS16	NVDA2014.4	VoiceOver
FireFox35	OK	OK	N/A
IE11.0.96	OK	OK	N/A
Chrome 40	OK	OK	OK, see note for Safari below
Safari MacOS	N/A	N/A	OK Sort of (see Ex. 1 above)
Safari iOS (iphone)	N/A	N/A	OK, sort of. 2 second delay

Example 3: two references in the aria- describedby

Note: talkback on android doesn't read labelledby or 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	OK, see note for Safari below
Safari MacOS	N/A	N/A	OK Sort of (see Ex. 1 above)
Safari iOS (iphone)	N/A	N/A	OK, sort of. 2 second delay

Example 4: Two references with aria-labelledby

Note: talkback on android doesn't read labelledby or describedby

	JAWS16	NVDA2014.4	VoiceOver
FireFox35	OK	OK	N/A
IE11.0.96	OK	Neither aria labelledby's read	N/A
Chrome 40	OK	OK	OK, see note for Safari below
Safari MacOS	N/A	N/A	OK Sort of (see Ex. 1 above)
Safari iOS (iphone)	N/A	N/A	OK, sort of. 2 second delay

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

	JAWS16	NVDA2014.4	VoiceOver
FireFox35	OK	OK	N/A
IE11.0.96	OK	OK	N/A
Chrome 40	OK	OK	OK, see note for Safari below
Safari MacOS	N/A	N/A	OK Sort of (see Ex. 1 above)
Safari iOS (iphone)	N/A	N/A	OK, sort of. 2 second delay

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

	JAWS16	NVDA2014.4	VoiceOver
FireFox35	OK	OK	N/A
IE11.0.96	OK	OK	N/A
Chrome 40	OK	OK	OK, see note for Safari below
Safari MacOS	N/A	N/A	OK Sort of (see Ex. 1 above)
Safari iOS (iphone	N/A	N/A	OK, sort of. 2 second delay

 

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>

Feel free to comment on Twitter @davidmacd

Author information:

David MacDonald is a veteran WCAG member, co-editor of Using WAI ARIA in HTML5 and HTML5 Accessibility Task Force Member. Opinions are my own.