Web Accessibility Training
Toronto, Montreal, Ottawa and worldwide via Webex More

Testing aria-describedby and aria-labelledby
with one AND two label references in popular browser and screen reader combinations.

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

✓test


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

✓test


Example 3: two references in the aria- describedby

✓test1 test2

 

Example 4: Two references with aria-labelledby

✓test1 test2


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

✓test1 test2

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

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

 



CONTACT US

For a quote or just to chat about your organization's needs


EMAIL

help -at- can-adapt.com
(replace -at- with you know what)

PHONE

613-806-9005

SOCIAL MEDIA