Question

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

＆＃13;

<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>

＆＃13;

在Mozilla FireFox中，当我们选中一个ex-Lettuce的复选框时，它被显示为生菜三明治调味品复选框已选中/未选中

在Internet Explorer中，它被读作生菜复选框选中/取消选中。三明治调味品被省略，因此向用户提供上下文变得越来越困难。

知道如何解决这个问题

Answer 1

使用单选按钮和复选框，您可以使用aria-labelledby使其复杂化。

屏幕阅读器支持的最佳模式是在输入周围使用<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/

Answer 2

我正在使用带有IE11的JAWS17，我看到生菜三明治调味品复选框已选中/未选中可以正常使用。问题可能是因为使用了旧版本的JAWS（或浏览器）。

多个ID咏叹调标记为Internet Exporer 11问题

2 个答案: