多个 ID aria-labelledby Internet Explorer 11 issue

Question

我们正在使用 JAWS 检查以下代码示例在各种浏览器（如 IE 11、Mozilla Fire Fox 等）中的可访问性

<HTML>

<head>
  <title>Test Page</title>

  <body>
    <form>

      <label id="group1" tabIndex="-1">Sandwich Condiments</label>
      <input type="checkbox" aria-labelledby="label1 group1">
      <label id="label1">Lettuce</label>
      </input>

      <input type="checkbox" aria-labelledby="label2 group1">
      <label id="label2">Tomato</label>
      </input>

      <input type="checkbox" aria-labelledby="label3 group1">
      <label id="label3">Mustard</label>
      </input>

      <input type="checkbox" aria-labelledby="label4 group1">
      <label id="label4">Sprouts</label>
      </input>
    </form>
  </body>

</html>

在 Mozilla FireFox 中，当我们选中前 Lettuce 的复选框时，它被读取为 Lettuce Sandwich Condiments 复选框已选中/未选中

在 Internet Explorer 中，它被读作 Lettuce 复选框已选中/未选中。省略了三明治调味品，因此很难向用户提供上下文。

知道如何解决这个问题

Answer 1

我在 IE11 上使用 JAWS17，我看到 Lettuce Sandwich Condiments 复选框已选中/未选中 可以正常阅读。问题可能是由于使用了旧版本的 JAWS（或浏览器）。

Answer 2

使用单选按钮和复选框，使用 aria-labelledby 会使它变得过于复杂。

屏幕 reader 支持的最佳模式是在输入周围使用 <fieldset>，并使用 <legend>。

在你的情况下，这看起来像：

<fieldset>
    <legend>Sandwich Condiments</legend>

    <input type="checkbox">
            <label id="label1">Lettuce</label>
    </input>

    <input type="checkbox">
            <label id="label2">Tomato</label>
    </input>

    <input type="checkbox">
            <label id="label3">Mustard</label>
    </input>

    <input type="checkbox">
            <label id="label4">Sprouts</label>
    </input>
</fieldset>

更简洁，如果您不喜欢，您可以使用 CSS 轻松隐藏字段集的边框。

进一步说明：https://accessibility.blog.gov.uk/2016/07/22/using-the-fieldset-and-legend-elements/

多个 ID aria-labelledby Internet Explorer 11 issue

multiple ids aria-labelledby Internet Exporer 11 issue

internet-explorer

accessibility

wai-aria