ios - 对于 iOS、Safari、VoiceOver，如何让 VoiceOver 读取自定义单选按钮？

Question

我有一个自定义单选按钮，按钮有一个彩色的更大的圆圈。它是使用 CSS 实现的，如 http://webdesign.tutsplus.com/articles/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign-8953 中所示。

但是，当您在单选按钮的 CSS 中使用 display:none 时，它​​会使 VoiceOver 感到困惑并且该元素不再被视为单选按钮，即使 <input> 也是如此。类型是“ radio ”。

<input type="radio" value="1" id="rad1" name="station"><label for="rad1"><span></span>Helium</label>
<input type="radio" value="2" id="rad2" name="station"><label for="rad2"><span></span>Hydrogen</label>

---

input[type="radio"] 
   {
   display:none;
   }

我尝试将 role='radio' 添加到 <input>标记，但这没有帮助。当 VoiceOver 认为它不是单选按钮时，您就会丢失有值(value)的交互信息。 VO 不再说“单选按钮”或“1 of 4”或“选中”。

我能想到的就是不使用显示，而是使用位置和左侧来强制原来的单选按钮圆圈不显示。

input[type="radio"]
   {
   position: absolute;
   left: -1em;
   }

这似乎有效，但似乎不“正确”。有没有更优雅的东西？通常，使用屏幕阅读器时，您不想将元​​素移出可见显示，因为使用屏幕阅读器时，您仍然可以通过各种导航技术将注意力放在项目上。

此外，当圆圈本身刚从显示屏上移开时，VoiceOver 仍会知道它并绘制其焦点矩形以包括不在显示屏上的项目。这会导致矩形一直延伸到左边缘。

编辑:使用left:-1em也不起作用，因为当您在打开 VoiceOver 的情况下滑动时，它会导致显示屏滚动到屏幕外的项目。我的下一次尝试是不隐藏单选按钮(即，不使用 display:none )，但将按钮留在那里，但用用于按钮的背景图像覆盖它们(如webdesign 网址)。这似乎有效。我有

left:-20px;
position: relative;

我的<span>标记(这是显示图像的位置)并导致图像显示在单选按钮圆圈的顶部。

所以最终的结果是，在视觉上，你看不到原生的单选按钮圈，而是看到我的图像圈，VoiceOver 仍然认为一切都是单选，并宣布“1 of 4”和“选中”。

我没有将此标记为我对自己问题的回答，因为它仍然感觉像是一个 hack。这听起来像是 VoiceOver 的一个错误，它没有将元素宣布为单选按钮。

Answer 1

display:none 和 visibility:hidden 将对屏幕阅读器隐藏内容。使用屏幕外的绝对位置称为“屏幕阅读器文本”，这将在视觉上隐藏内容，但仍可让屏幕阅读器阅读。这适用于所有桌面和移动屏幕阅读器。

因此，如果您使用 display:none，您的单选按钮将被忽略，这是正确的行为。通常的解决方案是将单选按钮放置在屏幕之外，但你是对的，VoiceOver 然后将焦点放在屏幕的左边缘。其他(桌面)屏幕阅读器不会这样做，这只是 VoiceOver 的一种奇怪行为(恕我直言，这是 VoiceOver 中的一个错误)。我不会太担心这一点，因为这就是 VoiceOver 的工作方式，但显然你自己建议的解决方案(将单选按钮放在图像后面)在这种情况下是可能的，并且更好，因为视觉 VoiceOver 焦点然后在正确的地方。我不会将其称为“hack”——至少不再是“屏幕阅读器文本”这一非常普遍的做法本质上只是一种 hack。

请注意，在很多情况下，您需要为屏幕阅读器添加一些额外信息，例如 VoiceOver，您没有图像来隐藏文本，然后将文本放在屏幕外可能是唯一的选择，并且可见屏幕边缘的 VoiceOver 焦点是您需要接受的权衡。

关于如何隐藏内容的不同技术的一个很好的总结可以在这里找到:http://webaim.org/techniques/css/invisiblecontent/