ARIA-Describedby and Labelledby Test Page

Random form field

This is some kind of extra text that provides information that pertains to the following fields way down below.

fieldset with labelledby Checkbox 1

Screen Readers Results

JAWS

Firefox: This is some kind of extra text.... Checkbox 1 not checked. To check press space bar.
Internet Explorer 11: Fieldset with labelledy Checkbox 1 checkbox not checked.
Opera 43: This is some kind of extra text.... Checkbox 1 not checked. To check press space bar.

NVDA

Firefox: This is some kind of extra text...grouping. Checkbox 1 checkbox not checked.
Internet Explorer 11: Checkbox 1 checkbox not checked.
Opera 43: This is some kind of extra text...grouping. Checkbox 1 checkbox not checked.

iOS Voice Over

Safari, Firefox, and Chrome: Only reads label.
Opera Mini: Abosultely nothing

OS X Voice Over

Firefox: Checkbox 1. Checkbox 1. This is some kind of extra text....Unchecked checkbox.
Chrome: Checkbox 1. This is some kind of extra text...Unchecked checkbox
Safari: Checkbox 1. Unchecked checkbox
Opera: Checkbox 1. This is some kind of extra text..... Unchecked checkbox.

fieldset with describedby Checkbox 2

Screen Readers Results

JAWS

Firefox: Fieldset with describedy by. This is some kind of extra text.... Checkbox 2 not checked. To check press space bar.
Internet Explorer 11: Fieldset with describedy by. Checkbox 2 not checked.
Opera 43: Fieldset with describedy by. Checkbox 2 not checked. To check press space bar.

NVDA

Firefox: Clickable Checkbox 2 checkbox not checked.
Internet Explorer 11: Checkbox 2 checkbox not checked.
Opera 43: Checkbox 2 checkbox not checked.

iOS Voice Over

Safari, Firefox, and Chrome: Only reads label.
Opera Mini: Abosultely nothing

OS X Voice Over

Firefox: Checkbox 2. Checkbox 2 fieldset with describedby fieldset with describedby checkbox. Unchecked checkbox.
Chrome: Checkbox 2 fieldset with describedby. Unchecked checkbox.
Safari: Checkbox 2. Unchecked checkbox
Opera: Checkbox 2 fieldset with describedby. Unchecked checkbox.

legend with labelledby Checkbox 3

Screen Readers Results

JAWS

Firefox: Legend with labelledby Checkbox 3 not checked. To check press space bar.
Internet Explorer 11: Legend with labelledby Checkbox 3 not checked.
Opera 43: This is some kind of extra text.... Checkbox 3 not checked. To check press space bar.

NVDA

Firefox: Clickable Checkbox 3 checkbox not checked.
Internet Explorer 11: Checkbox 3 checkbox not checked.
Opera 43: Checkbox 3 checkbox not checked.

iOS Voice Over

Safari, Firefox, and Chrome: Only reads label.
Opera Mini: Abosultely nothing

OS X Voice Over

Firefox: Checkbox 3. Checkbox 3. Legend with labelledby. This is some kind of extra text....Unchecked checkbox.
Chrome: Checkbox 3. This is some kind of extra text...Unchecked checkbox
Safari: Checkbox 3. Unchecked checkbox
Opera: Checkbox 3. This is some kind of extra text..... Unchecked checkbox.

legend with describedby Checkbox 4

Screen Readers Results

JAWS

Firefox: Legend with describedy by. Checkbox 4 checkbox not checked. To check press space bar.
Internet Explorer 11: Legend with describedy by. Checkbox 4 checkbox not checked.
Opera 43: Legend with describedy by. Checkbox 4 checkbox not checked. To check press space bar.

NVDA

Firefox: Clickable Checkbox 4 checkbox not checked.
Internet Explorer 11: Checkbox 4 checkbox not checked.
Opera 43: Checkbox 4 checkbox not checked.

iOS Voice Over

Safari, Firefox, and Chrome: Only reads label.
Opera Mini: Abosultely nothing

OS X Voice Over

Firefox: Checkbox 4. Checkbox 4. Legend with describedby legned with describedby. Unchecked checkbox.
Chrome: Checkbox 4. Legend with describedby. Unchecked checkbox
Safari: Checkbox 4. Unchecked checkbox
Opera: Checkbox 4. Legend with describedby. Unchecked checkbox.

Input with labelledby

Screen Readers Results

JAWS

Firefox: This is some kind of extra text... Edit. Type and text.
Internet Explorer 11: This is some kind of extra text... Edit. Type and text.
Opera 43: This is some kind of extra text... Edit. Type and text.

NVDA

Firefox: This is some kind of extra text... Edit auto-complete. Blank
Internet Explorer 11: This is some kind of extra text... Edit blank.
Opera 43: This is some kind of extra text... Edit blank.

iOS Voice Over

Safari, Firefox, and Chrome: Input with labelledby. Text field. Double-tap to edit.
Opera Mini: Abosultely nothing

OS X Voice Over

Firefox: This is some kind of extra text.... text.
Chrome: This is some kind of extra text.... Edit text.
Safari: This is some kind of extra text.... Edit text.
Opera: This is some kind of extra text.... Edit text.

Input with describedby

Screen Readers Results

JAWS

Firefox: Input with describedby edit. This is some kind of extra text... Type and text.
Internet Explorer 11: Input with describedby edit. This is some kind of extra text... Type and text.
Opera 43: Input with describedby edit. Type and text.

NVDA

Firefox: Input with describedby edit auto-complete. This is some kind of extra text... Blank.
Internet Explorer 11: Input with describedby edit. This is some kind of extra text... Blank.
Opera 43: Input with describedby edit. This is some kind of extra text... Blank.

iOS Voice Over

Safari, Firefox, and Chrome: Input with describedby. Text field. [2 second delay] This is some kind of extra text... Double-tap to Edit.
Opera Mini: Abosultely nothing

OS X Voice Over

Firefox: Input with describedby. Text [5 second delay] You are currently on a text field inside of a HTML docuent. To enter text in this field, type. The help tag is: This is some kind of extra text....
Chrome: Input with describedby. Edit text. [5 second delay] You are currently on a text field inside of a HTML docuent. To enter text in this field, type. The help tag is: This is some kind of extra text....
Safari: Input with describedby. Edit text. [5 second delay] You are currently on a text field inside of a HTML docuent. To enter text in this field, type. The help tag is: This is some kind of extra text....
Opera: Input with describedby. Edit text. [5 second delay] You are currently on a text field inside of a HTML docuent. To enter text in this field, type. The help tag is: This is some kind of extra text....

Label with labelledby

Screen Readers Results

JAWS

Firefox: Label with labelledby edit. Type and text.
Internet Explorer 11: Label with labelledby edit. Type and text.
Opera 43: This is some kind of extra text... Type and text.

NVDA

Firefox: Label with labelledby edit auto-complete. Blank.
Internet Explorer 11: Label with labelledby edit. Blank.
Opera 43: This is some kind of extra text... Edit blank.

iOS Voice Over

Safari, Firefox, and Chrome: Label with labelledy text field. Double-tap to edit.
Opera Mini: Abosultely nothing

OS X Voice Over

Firefox: This is some kind of extra text..... text
Chrome: This is some kind of extra text..... Edit text.
Safari: Label with labelledby. Edit text.
Opera: This is some kind of extra text..... Edit text.

Label with describedby

Screen Readers Results

JAWS

Firefox: Label with describedby edit. Type and text.
Internet Explorer 11: Label with describedby edit. Type and text.
Opera 43: Label with describedby edit. Type and text.

NVDA

Firefox: Label with describedby edit auto-complete. Blank.
Internet Explorer 11: Label with describedby edit. Blank.
Opera 43: Label with describedby edit. Blank.

iOS Voice Over

Safari, Firefox, and Chrome: Label with describedby text field. Double-tap to edit.
Opera Mini: Abosultely nothing

OS X Voice Over

Firefox: Label with describedby. text.
Chrome: Label with describedby. Edit text.
Safari: Label with describedby. Edit text.
Opera: Label with describedby. Edit text.

Summary

JAWS only reads the <label>, <legend>, and aria-describedby when <fieldset> has aria-describedby, but not aria-labelledby, and then only in Firefox.
JAWS never reads the aria-describedby bit when aria-describedby/aria-labelledby are applied to the <legend> except in Opera.
NVDA never reads the aria-describedby bit when aria-describedby/aria-labelledby are applied to the <legend> or <fieldset> Except in Firefox and Opera when aria-labelledby are applied to the <fieldset>.
Applying aria-labelledby to an <input> prevents its <label> from being read, except on iOS VoiceOver.
Applying aria-describedby to the <input> works on everything except Opera + JAWS and Opera Mini + iOS VoiceOver.
Applying aria-describedby or aria-labelledby to the <label> never works (ie: it never reads both).
If using iOS and VoiceOver, it makes almost no difference if you use Safari, Chrome, or Firefox.
If using VoiceOver on OS X, Firefox reads a lot of stuff twice, and Safari leaves a lot out.
Adding tabindex="-1" to the Extra Text makes no appreciable difference. (See tabindex-"-1" test results.)

Conclusion

Dos and don'ts:

Don't put aria-describedby or aria-labelledby in a <label>, <fieldset>, or <legend>.
Do use aria-describedby in <input>s to supplement the <label>.
Don't use Safari on OS X with VoiceOver. If using VoiceOver on OS X, Firefox gives a slight advantage, even if it reads stuff out twice sometimes.
Don't use Opera Mini on iOS if you go blind or require a screen reader.