为什么标签上的相对定位会使标签内容对 VoiceOver 屏幕阅读器不可见？

Question

当您在表单的标签上明确设置 position:relative 时，VoiceOver 不会朗读标签文本。我只测试了 Chrome 和 VoiceOver，所以我不知道其他 screenreader/browser 组合是否会出现这种情况。可能只是一个奇怪的错误，因为不清楚为什么屏幕阅读器会关心定位样式。

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

这是画外音和 chrome 的错误。 Voiceover 用户绝大多数使用 Safari 作为他们的主要浏览器，因为它主要是为这个屏幕 reader/browser 组合开发和测试的。 Chrome 与屏幕 reader 有许多问题，这些问题主要不是为它编写的（例如 voiceover/safari 和 NVDA/Firefox）。我自己测试了这个例子，标签是使用画外音和 safari 大声朗读的，但不是 Chrome - 因为这些问题。

为了了解哪些 browser/screen reader 组合使用最频繁，webaim 定期提供一些非常有用的调查结果来跟踪这些趋势： http://webaim.org/projects/screenreadersurvey6/

为什么标签上的相对定位会使标签内容对 VoiceOver 屏幕阅读器不可见？

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

html

css

voiceover