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

Question

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

中的CSS实现的

但是，当您在单选按钮的CSS中显示：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;
   }

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

我所能想到的不是使用显示器，而是使用位置和左侧强制原始单选按钮圆圈不在显示屏上。

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

这似乎有效，但似乎并不“正确”。有更优雅的东西吗？通常，对于屏幕阅读器，您不希望将元素从可见显示中移出，因为使用屏幕阅读器，您仍然可以通过各种导航技术将焦点放在项目上。

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

修改：使用left:-1em不起作用，因为当您使用VoiceOver进行滑动时，它会导致显示滚动到屏幕外的项目。我的下一次尝试是不隐藏单选按钮（即，不要使用display:none），而是将按钮留在那里，但用用于按钮的背景图像覆盖它们（如所解释的）在webdesign网址中。这似乎有效。我有

left:-20px;
position: relative;

用于我的<span>标记（显示图像的位置），这会导致图像显示在单选按钮圈的顶部。

所以最终结果是，在视觉上，你没有看到原生的单选按钮圈，而是看到我的图像圈，而VoiceOver仍然认为一切都是收音机并宣布“1/4”和“已检查”。 / p>

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

Answer 1

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

因此，如果使用display:none，您的单选按钮将被忽略，这是正确的行为。通常的解决方案是将单选按钮放在屏幕上，但你是对的，然后VoiceOver将焦点放在屏幕的左边缘。其他（桌面）屏幕阅读器不会这样做，这只是VoiceOver的奇怪行为（imho是VoiceOver中的一个错误）。我不会太担心这一点，因为这就是VoiceOver的工作原理，但显然你可以在这种情况下使用你自己建议的解决方案（将单选按钮放在图像后面），因为视觉VoiceOver的重点在于正确的地方。我不会称之为“黑客” - 至少不再是“屏幕阅读器文本”的常见做法本质上只是一种黑客行为。

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

可以在此处找到有关如何隐藏内容的不同技术的完整摘要：http://webaim.org/techniques/css/invisiblecontent/

Answer 2

另一种选择是在您希望屏幕阅读器聚焦的元素上使用role =“ radio”作为单选按钮。您需要确保根据需要添加aria选中，禁用aria的功能。最后，您可以在真实的单选按钮上使用aria-hidden隐藏，以使屏幕阅读器将其忽略。

更多信息。关于role =“ radio”：https://www.w3.org/TR/wai-aria-1.1/#radio

Answer 3

我使用CSS隐藏<input type=radio/> - 图片下的实际<label>，使用z-index: 2;或其他高于<input>的{​​{1}}的内容z-index。 事实证明，即使在较旧的iOS上，按下<label>也无法关注/激活label。

另一种方法是隐藏input，将其隐藏在屏幕外：

<input type=radio/>

（如果你减去这个可以解释原因吗？这是适用于所有iOS版本和其他用户代理/辅助技术组合的最易访问的解决方案）