html - 为什么标签上的相对定位会使 VoiceOver 屏幕阅读器看不到标签内容？

当您在表单中的标签上明确设置 position:relative 时，VoiceOver 不会大声朗读标签文本。我只用 Chrome 和 VoiceOver 进行过测试，所以我不知道其他屏幕阅读器/浏览器组合是否会发生这种情况。可能只是一个奇怪的错误，因为屏幕阅读器为什么会关心定位样式并不明显。

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

最佳答案

这是画外音和 chrome 的错误。旁白用户绝大多数使用 Safari 作为他们的主要浏览器，因为它主要是针对此屏幕阅读器/浏览器组合进行开发和测试的。 Chrome 有许多屏幕阅读器的问题，这些问题不是主要为它编写的(例如画外音/Safari 和 NVDA/Firefox)。我自己测试了这个例子，标签是使用画外音和 safari 大声朗读的，但不是 Chrome - 因为这些问题。

为了了解使用最频繁的浏览器/屏幕阅读器组合，webaim 定期提供一些非常有用的调查结果来跟踪这些趋势:
http://webaim.org/projects/screenreadersurvey6/

关于html - 为什么标签上的相对定位会使 VoiceOver 屏幕阅读器看不到标签内容？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40846788/