VoiceOver 和屏幕 Reader：如何对单选按钮进行编码

Question

我在 iPad 上使用 VoiceOver/Chrome 来测试辅助功能是否适用于我正在开发的页面。我将蓝牙键盘连接到 iPad 并单击 Tab 键浏览页面上的元素。页面上使用的以下代码适用于 VoiceOver：

<div>
    <div class="radio"> 
        <label tabindex="0">
            <input type="radio"  name="abc" value="0" aria-labelledby="q1015678-2430294-button"> <span id="q1015678-2430294-button">Good</span>
        </label>
    </div>
    <div class="radio">
        <label tabindex="0">
            <input type="radio"  name="abc" value="1" aria-labelledby="q1015678-2430295-button"> <span id="q1015678-2430295-button">Bad</span>
        </label>
    </div>
</div>

但是，当我在 Windows 上使用屏幕 Reader/Chrome 时，上面的代码在说“好，单选按钮”之前读出“好好”。在两个选项之间切换时，另一个“错误”单选按钮也是如此。

编码同时适用于 VoiceOver 和 Screen Reader 的单选按钮的正确方法是什么？

更新

这是测试中使用的HTML。 VoiceOver 无法发现以 v2 和 v3 编码的按钮。它可以正确识别和发音“This the beginning”、v1 中的按钮和“This is the end”。

我能够使用 left/swipe 手势切换所有按钮。问题是使用键盘上的 Tab 键来切换按钮。 iPad 上的 ios 是 15.4.1.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
<body>

  <form>

    <div tabindex="0" role="text">this is the beginning</div>

    <div>-----------v1------------</div>

    <div>
      <div class="radio">
        <label tabindex="0">
          <input type="radio" name="abc" value="0" aria-labelledby="q1015678-2430294-button"> <span
            id="q1015678-2430294-button">Good</span>
        </label>
      </div>
      <div class="radio">
        <label tabindex="0">
          <input type="radio" name="abc" value="1" aria-labelledby="q1015678-2430295-button"> <span
            id="q1015678-2430295-button">Bad</span>
        </label>
      </div>
    </div>

    <div>----------v2-------------</div>

    <div>
      <div class="radio">
        <label for="q1015678-2430294-button2">
          <input type="radio" name="ddd" value="0" id="q1015678-2430294-button2"> <span>Good 2</span>
        </label>
      </div>
      <div class="radio">
        <label for="q1015678-2430295-button2">
          <input type="radio" name="ddd" value="1" id="q1015678-2430295-button2"> <span>Bad 2</span>
        </label>
      </div>
    </div>

    <div>-----------v3------------</div>

    <div>
      <label for="xyz1">radio button 1</label>
      <input type="radio" id="xyz1" />
    </div>

    <div>
      <label for="xyz2">radio button 2</label>
      <input type="radio" id="xyz2" />
    </div>

    <div>-----------------------</div>

    <div tabindex="0" role="text">this is the end</div>
    
  </form>

</body>
</html>

如果我将以下文本框放入表单中，VoiceOver 可以使用 Tab 键在页面上的元素间切换来正确发音。

<textarea name="ta">This is textarea</textarea>

更新 3

在我对 v1（原始代码）的测试中，空格键能够在 Safari 和 Chrome 中激活我的 ipad 上的单选按钮。

Answer 1

乍一看，您的代码中有两处看起来很奇怪：

标签有 tabindex=0
aria-labelledby中引用的id在标签内

对于第一点，标签上的 tabindex=0 使该标签可聚焦。但是，标签不应该是可聚焦的。只有单选按钮应该是，默认情况下没有指定 tabindex。这正是您首先到达标签本身的原因，并且由于您首先到达标签本身，因此您无法对其进行任何操作。

解决方案：从标签中删除 tabindex=0

对于第二点，它可能有效，但它仍然是一个很奇怪的结构。当您需要引用不同于普通标签的标签元素时，必须使用 aria-labelledby。

如果 <label> 在其 for 属性中引用 <input> 元素，则不需要额外的 aria-labelledby.
当文本与 <input> 位于同一 <label> 内时，您也不需要 aria-labelledby。
如果您只希望封闭 <label> 的一部分成为实际可访问的标签，您最好切换到另一种更传统的结构，其中 <input> 不在 [=11 内=].如果您仍希望拥有与 <label>.

我希望它足够清楚。我的建议：改用像这样更简单的结构：

<div>
<label for="xyz">Label of the radio button</label>
<span>Some additional text not present in accessible label, if you want</span>
<input type="radio" id="xyz" />
<span>Some additional text not present in accessible label, if you want</span>
</div>

Answer 2

如中所述，激活“全键盘访问”选项可使单选按钮像往常一样通过选项卡访问。我对代码提供建议的第一个答案仍然有效。

好消息是我们观察到的不是错误。 Apple 故意让它这样工作。

坏消息是 VoiceOver 和全键盘访问不能很好地结合使用。

例如，当开启全键盘访问时，我无法再enable/disable快速导航，而且我使用转子时遇到了很大的麻烦。其他几个重要的 VoiceOver 功能似乎也受到了影响。作为盲人和 VoiceOver 用户，我真的无法启用全键盘访问。

从那里可以推断，作为屏幕 reader 用户，您不应该使用标签进行导航。您应该专门使用屏幕 reader 特定功能。在这里，VO 手势。

这也表明，实际上您的测试设计不正确：

由于 VO 用户不应该使用 Tab 来导航，如果一切都可以通过 VO 手势正常到达和操作，那么对于屏幕 reader 用户来说没问题。
检查所有交互元素是否可以使用选项卡访问实际上是另一项测试，适用于只有键盘的用户，他们在触摸界面方面有问题，但 none 在视觉方面有问题。

如果，在PC上，可以同时测试，貌似在iPhone和iPad上不行，因为苹果好像决定把这两种完全分开了用户。知道为什么以及 macintosh 最常去哪里会很有趣。

VoiceOver 和屏幕 Reader：如何对单选按钮进行编码

VoiceOver and Screen Reader: how to code radio buttons

html

accessibility

voiceover