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 hyphen adapt dot com, (spoken phonetically to trick spam bots)

PHONE

six one three, eight zero six, nine zero zero five

SOCIAL MEDIA