Question

我通过在带有：before css规则的标签元素上添加伪元素来创建自定义广播/复选框图标。我已经在标签元素中添加了aria-hidden，但iOS上的VO仍在读取伪元素。

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

我还尝试在标签中添加子span或i元素，并在之前添加：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隐藏在跨度上，让屏幕阅读器正常处理标签和输入。

Answer 2

关于radio1，W3C说：

如果当前节点被隐藏且未被aria-labelledby或aria-describedby，引用，也未被本机主机语言文本替代元素或属性引用，则返回空字符串

因此，只要你引用一个元素，即使它具有aria-hidden属性，它也会被说出来。

如果您想为元素提供替代文字，则必须在元素上设置aria-label属性：

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

伪元素在浏览器上有不同的行为，正如您所看到的那样，即使相关元素标有:before属性，也会给出aria-hidden元素的替代文本。

语音转换读取伪元素，尽管<label>中包含aria-hidden属性

2 个答案: