Search code examples
htmlcssvoiceover

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>


Solution

  • 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/