Testing form control labelling support in popular browsers and screen readers

Test cases

legend label

<fieldset> <legend>legend</legend> <label for="tex">label</label> <input name="input" type="text" id="tex"> </fieldset>

label using for/id

<label for="textfield">label using for/id</label> <input type="text" name="textfield" id="textfield">

label wrapped

<label>label wrapped<input type="text"></label>

label wrapped and for/id

<label for="a1">label wrapped and for/id<input type="text" id="a1"></label>

label wrapped with text before and after input

<label>label wrapped<input type="text"> with text before and after input </label>

label wrapped and for/id with text before and after input

<label for="a2">label wrapped and for/id<input type="text" id="a2">with text before and after input </label>

label wrapped and aria-labelledby

<label id="a3">label wrapped and aria-labelledby<input type="text" aria-labelledby="a3"></label>

aria-labelledby

<label id="a4">aria-labelledby</label> <input type="text" aria-labelledby="a4">

Browser provides label (and legend text if presenet) as the accessible name to accessibility APIs = supported
Browser provides only label text if there is a legend present or repeats label text to accessibility APIs = partially supports
browser does not provide label text = does not support

text exposed by browsers as the form control name to accessibility APIs
labeling method	Internet Explorer 9 MSAA	Firefox 5	Chrome 14	Safari 5 (Mac)	Opera 11.5 (Mac)
1. legend and label(for/id)	label not legend	label not legend	no label or legend	label and legend	label not legend
2. label using for/id	label	label	no label	label	label
3. label wrapped	label	label	no label	no label	label
4. label wrapped and for/id	label	label text repeated	no label	no label	label
5. label wrapped with text before and after input	label	label	no label	no label	label
6. label wrapped and for/id with text before and after input	label	label text repeated	no label	no label	label
7. label wrapped and aria-labelledby	label	label	label	label	label
8. aria-labelledby	label	label	label	label	label

Screen reader announces label (and legend text if present) when an input recieves focus= supported
Screen reader announces only label text if there is a legend present or repeats label text when an input recieves focus = partially supports
Screen reader does not announce label text when an input recieves focus = does not support

Note: JAWS was tested in PC cursor mode to remove effect of labelling heuristics.

text announced by screen readers as the form control name
labeling method	NVDA with IE 9	JAWS 12 with IE 9	NVDA with Firefox 5	JAWS 12 with Firefox 5	NVDA with Chrome 14	JAWS with Chrome 14	VoiceOver with Safari 5	VoiceOver with Opera 11.5
1. legend and label(for/id)	reads label and legend	reads label and legend	reads label	reads label and legend	does not read label or legend	does not read label or legend	reads label and legend	reads label not legend
2. label using for/id	reads label	reads label	reads label	reads label	does not read label	does not read label	reads label	reads label
3. label wrapped	reads label twice	reads label	reads label twice	reads label	does not read label	does not read label	does not read label	reads label
4. label wrapped and for/id	reads label twice	reads label	reads label 3 times	reads label twice	does not read label	does not read label	does not read label	reads label
5. label wrapped with text before and after input	reads label twice	reads label	reads label twice	reads label	does not read label	does not read label	does not read label	reads label
6. label wrapped and for/id with text before and after input	reads label twice	reads label	reads label 3 times	reads label twice	does not read label	does not read label	does not read label	reads label
7. label wrapped and aria-labelledby	reads label twice	reads label	reads label twice	reads label	reads label	reads label	reads label	reads label
8. aria-labelledby	reads label	reads label	reads label	reads label	reads label	reads label	reads label	reads label