如何让 VoiceOver 跳过 <button> 个元素？

Question

我在 iPad 上使用 VoiceOver/Chrome 来测试辅助功能是否适用于我正在开发的页面。我将蓝牙键盘连接到 iPad 并单击 Tab 键浏览页面上的元素。此页面有一个按钮

<button name="next" aria-labelledby="next-page-hint" tabindex="0" role="button" role="button">Next</button>

但是，VoiceOver 会跳过按钮而不会在其上停留。

这是测试中使用的HTML页面

<!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>-----------------------</div>

    <button name="next1" aria-labelledby="next-page-hint" tabindex="0" role="button" >Next 1</button>

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

    <button name="next2">Next 2</button>

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

    <h2 id="lbl">Men's Outerwear</h2>
    <button id="btn" aria-labelledby="lbl btn">Shop Now</button>

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

    <h2 id="lbl">Men's Outerwear 2</h2>
    <button id="btn">Shop Now 2</button>

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

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

  </form>

</body>
</html>

当我使用 Tab 键浏览此页面时，VoiceOver 只会发现并读出“This is the beginning”和“This is the end”。

更新 2

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

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

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

更新 3

以下代码是我测试过的，它似乎在不更改@slugolicious 建议的辅助功能设置的情况下工作（谢谢！）。也许我们可以称之为解决方法？

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

Answer 1

它 “感觉” 就像 Mac 问题，即 TAB 键不会转到所有元素，除非您有意在系统首选项 > 键盘和 select 键盘访问的“所有控件”。

在 iPhone/iPad 上，您可以进入“设置”>“辅助功能”>“键盘”>“全键盘访问”并启用“全键盘访问”开关。这允许蓝牙键盘上的 TAB 导航到所有按钮。

必须这样做似乎很愚蠢，并且它使 Voiceover 在启用时更难使用，但它是可能的。

如何让 VoiceOver 跳过 <button> 个元素？

How can I make VoiceOver skip <button> elements?

html

accessibility

voiceover