ios - 尽管 <label/> 中存在 aria-hidden 属性，但旁白仍会读取伪元素

Question

我通过使用 :before css 规则在标签元素上添加伪元素来创建自定义单选/复选框图标。我已将 aria-hidden 添加到 label 元素，但 iOS 上的 VO 仍在读取伪元素。

我知道，如果元素提供附加上下文，某些屏幕阅读器将忽略 aria-hidden 属性(标签元素就是这种情况，因为它们提供有关连接的输入元素的附加信息)。为了解决这个问题，我添加了一个 aria-label 属性，但同样，iOS 上的 VO 会忽略它。这似乎解决了其他屏幕阅读器、浏览器和设备组合(例如“讲述人”和 IE/Edge)的相同问题。

我还尝试向标签添加子 span 或 i 元素，并添加 :before css 规则和 aria-hidden 属性，但 iOS 上的 VO 仍在读取伪元素。

有人对让屏幕阅读器阅读正确的内容有什么建议吗？

我的基本方法如下(注意:在 jsfiddle 中不起作用，因为我没有加载我的字体)。
您还可以在此处查看第一个示例: http://uatwww.surveygizmo.com/s3/4102902/Basic-Radio

<input type="radio" id="radio1" value="1" name="example" />
<label for="radio1" class="custom-icon" aria-hidden="true" aria-label="example 1">Example 1</label>

<input type="radio" id="radio2" value="2" name="example" />
<label for="radio2">
    <span class="custom-icon" aria-hidden="true" aria-label="example 2"></span>
    Example 2
</label>

<input type="radio" id="radio3" value="3" name="example" />
<label for="radio3">
    <i class="custom-icon" aria-hidden="true" aria-label="example 3"></i>
    Example 3
</label>

<style>
input[type=radio] {
    opacity: 0;
    position: absolute;
    border: 0;
    height: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
}
input[type=radio] + .custom-icon:before,
input[type=radio] + label .custom-icon:before {
    content: "\26aa";
}
input[type=radio]:checked + .custom-icon:before,
input[type=radio]:checked + label .custom-icon:before {
    content: "\26ab";
}
</style>

Answer 1

我认为问题在于您向浏览器和屏幕阅读器发出了令人困惑的指令。您有一个不可见的输入，其中附加了 CSS 内容，然后该输入与一个 aria-hidden 但也有 aria-label 的标签相关联。在不同的浏览器/屏幕阅读器组合中，您肯定会得到不一致的标记解释。

我用过Heydon Pickering’s custom control method成功地在一堆网站上运行，没有任何问题。这似乎是您目标的一个更简单的版本。它可以轻松地对除屏幕阅读器软件之外的所有人隐藏输入，将 CSS 内容放在跨度上而不是标签或输入上。他不使用任何 ARIA，但如果最新版本的 VoiceOver 公布了 CSS 内容，您可以将 aria-hidden 放在跨度上，让屏幕阅读器将标签和输入视为正常。