<legend> 专注于某个项目时 talkback/voiceover 未阅读

Question

我正在尝试弄清楚如何在焦点位于输入元素上时 talkback/voice-over 宣布图例。大白鲨读了这个传说。唯一的问题是 talkback/voice-over。我知道当焦点移动时，屏幕 reader 读取焦点下的元素。如果是这样，那么不确定 Jaws 在桌面上的表现如何。我试过 aria-labelledby 但我必须在很多地方添加，而且它认为该区域不是预期的 region。

setTimeout(() => document.getElementById('f1').focus(), 3000);

<!doctype html>
<html lang="en-US">
  <body>
    <form name="form1">
      <fieldset class="address" name="billto">
        <legend>Billing Address</legend>
        <section>
            <label for="f1">Street</label>
            <input id="f1" name="street">
            <br>
            <label for="f2">City</label>
            <input id="f2" name="city">
            <br>
            <label for="f3">State</label>
            <input id="f3" name="state">
            <br>
            <label for="f4">Zip code</label>
            <input id="f4" name="zipcode">
            <br>          
        </section>
      </fieldset>
    </form>
  </body>
</html>

Answer 1

如果您的代码在语义上是正确的，那么您不需要做任何事情。让各个屏幕阅读器按照他们认为合适的方式处理它。在您的简单代码示例中，VoiceOver 在 iOS 上（我没有 Mac 可以尝试），当我向右滑动时，我的 VO 焦点转到“账单地址”边框，它是宣布为“账单地址，表格开始”。如果我滑动到任何输入字段，我不会听到<legend>。

使用 NVDA，如果我向下箭头穿过 DOM，类似于使用 VoiceOver 向右滑动，我会听到“分组，账单地址”。如果我 tab 到输入字段而不是向下箭头，从而跳过 <legend> 文本，文本仍然在第一个字段宣布之前宣布，“账单地址，分组，街道编辑有自动完成空白"。

所以它似乎工作正常。如果对讲没有正确报出，那就是对讲有问题。

<legend> 专注于某个项目时 talkback/voiceover 未阅读

<legend> not read by talkback/voiceover when focused on an item

html

accessibility

wai-aria

talkback