首页 文章

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

提问于
浏览 次
2

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

enter image description here

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

我尝试将角色= 'radio'添加到 <input> 标签但是没有认为它是一个单选按钮，那么你就失去了宝贵的互动信息 . VO不再说"radio button"或"1 of 4"或"checked" .

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

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

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

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

Edit: 在启用VoiceOver的情况下滑动时，使用 left:-1em 不会't work either because it causes the display to scroll to the item that' . 我的下一次尝试是不隐藏单选按钮（即，不要使用 display:none ），而是将按钮留在那里，但用用于按钮的背景图像覆盖它们（如webdesign url中所述） . 这似乎有效 . 我有

left:-20px;
position: relative;

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

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

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

ios accessibility voiceover wai-aria

3 回答

  • 1

    display:none 和 visibility:hidden 将隐藏屏幕阅读器中的内容 . 使用屏幕外的绝对位置称为"Screen reader text"，这将在视觉上隐藏内容，但仍然可以通过屏幕阅读器读取 . 所有桌面和移动屏幕阅读器都是如此 .

    因此，如果您使用 display:none ，您的单选按钮将被忽略，这是正确的行为 . 通常的解决方案是将单选按钮放在屏幕上，但你是对的，然后VoiceOver将焦点放在屏幕的左边缘 . 其他（桌面）屏幕阅读器赢得了VoiceOver的奇怪行为（imho是VoiceOver中的一个错误） . 我不会把它称为"hack" - 至少不再是"screen reader text"的常见做法本质上只是一个黑客攻击 .

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

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

    回复于
  • -1

    另一种选择是在屏幕阅读器要关注的元素上使用role =“radio”作为单选按钮 . 您需要确保根据需要添加aria-checked，aria-disabled等 . 最后，您可以在真实的单选按钮上使用隐藏式咏叹调，以使屏幕阅读器忽略它们 .

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

    回复于
  • 0

    我使用CSS来隐藏 <label> -graphic下的实际 <input type=radio/> ，使用 z-index: 2; 或其他高于 <input> 的 z-index <label> . 事实证明，即使在较旧的iOS上，按下 label 也没有关注/激活 input .

    另一种方法是将_2466616隐藏在屏幕外，如下所示：

    position: absolute;
left: -999em;

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

    回复于

相关问题