Testing form control labelling support in popular browsers and screen readers

Updated: 12/01/2012

Software used

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
browser does not expose information to accessibility testing tools = unkown

text exposed by browsers as the form control name to accessibility APIs
labeling method	Internet Explorer 9	Firefox 11	Chrome 17	Safari 5 (Mac)	Opera 11.6 (Mac)
1. legend and label(for/id)	label not legend (fieldset has no role mapping)	label (legend = accessible name for fieldset (MSAA role="grouping")	label (legend = accessible name for fieldset (IA2 role="section")	label and legend	unknown
2. label using for/id	label	label	label	label	unknown
3. label wrapped	label	label	label	label	unknown
4. label wrapped and for/id	label	label	label	label	unknown
5. label wrapped with text before and after input	label	label	label	label	unkown
6. label wrapped and for/id with text before and after input	label	label	label	label	unkown
7. label wrapped and aria-labelledby	label	label	label (label text also repeated as accessible description)	label	unkown
8. aria-labelledby	label	label	label (label text also repeated as accessible description)	label	unkown

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

text announced by screen readers as the form control name
labeling method	NVDA with IE 9	JAWS 13 with IE 9	NVDA with Firefox 11	JAWS 13 with Firefox 11	NVDA with Chrome 17	JAWS with Chrome 17	VoiceOver with Safari 5	VoiceOver with Opera 11.6
1. legend and label(for/id)	reads label and legend	reads label and legend	reads label and legend	reads label and legend	reads label not legend	reads label not legend	reads label and legend	reads label not legend, drops last letter off label.
2. label using for/id	reads label	reads label	reads label	reads label	reads label	reads label	reads label	reads label twice, drops last letter off label.
3. label wrapped	reads label	reads label	reads label	reads label	reads label	reads label	reads label	reads label
4. label wrapped and for/id	reads label	reads label	reads label	reads label	reads label	reads label	reads label	reads label
5. label wrapped with text before and after input	reads label	reads label	reads label	reads label	reads label	reads label	reads label	reads label
6. label wrapped and for/id with text before and after input	reads label	reads label	reads label	reads label	reads label	reads label	reads label	reads label, drops last letter off label.
7. label wrapped and aria-labelledby	reads label	reads label	reads label	reads label	reads label twice	reads label	reads label twice	reads label
8. aria-labelledby	reads label	reads label	reads label	reads label	reads label twice	reads label	reads label	reads label twice

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">