back to article

Testing form control labelling support in popular browsers and screen readers

Test cases

test 1

legend

test 1 code

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

test 2

test 2 code

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

test 3

test 3 code

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

test 4

test 4 code

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

test 5

test 5 code

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

test 6

test 6 code

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

test 7

test 7 code

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

test 8

test 8 code

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

Software used

Test Results

Legend

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

Legend

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