Katharine Osborne Katharine Osborne - 9 days ago 7
CSS Question

Why does relative positioning on a label make the label content invisible to the VoiceOver screenreader?

When you've explicitly set position:relative on a label in a form the label text is not read out loud by VoiceOver. I've only tested with Chrome and VoiceOver so I don't know if this occurs with other screenreader/browser combos. Could be just a weird bug, as it's not apparent why a screenreader would care about a positioning style.



<form>
<fieldset>
<legend>Label Position Quirk</legend>
<input id="thing1" type="checkbox">
<label for="thing1" style="position:relative">This won't be read</label>
<input id="thing2" type="checkbox">
<label for="thing2">This will be read</label>
</fieldset>
</form>




Answer

This is a bug with voiceover and chrome. Voiceover users overwhelmingly use Safari as their primary browser as it's largely developed and tested for this screen reader/browser combination. Chrome has many issues with screen readers that were not primarily written for it (such as voiceover/safari and NVDA/Firefox). I tested this example myself and the labels were read aloud using voiceover and safari, but not with Chrome - because of these issues.

To get an idea of what browser/screen reader combinations are the most heavily used, webaim regularly provides some very helpful survey results to track these trends: http://webaim.org/projects/screenreadersurvey6/