Jaws屏幕阅读器IE 11选择标签问题

Posted 2021-04-11

我对IE 11和Jaws有一些问题。请看下面的例子。

简化的代码示例：

<input type="text" />
<span role="alert" aria-live="assertive" id="err"></span>
<select id="colours">
  <option value="White">White invalid</option>
  <option value="Green">Green invalid</option>
  <option value="Red">Red</option>
  <option value="Blue">Blue</option>
</select>


var i = 0;
$('#colours').on('keyup', function (e) {
    if ($(this).prop('selectedIndex') < 2) {
        $('#err').html('an error has occurred ' + i++);
    }
    else {
        $('#err').html('');
    }
});

的jsfiddle：https://jsfiddle.net/obwapffq/2/

基本上，我在下拉列表中验证所选元素（在示例中'white'和'green'值无效）。我只使用键盘的向上和向下按钮来更改所选值。如果选择了无效选项，我将使用相应的错误消息更新span元素的内容。 span元素有role =“alert”和aria-live =“assertive”。我有2个问题：

1. 如果所选选项无效，则会读出错误消息，但不会读出所选选项，因此用户不知道哪个选项无效，即哪个选项导致该错误。
2. 有时甚至没有读出有效选项。这主要发生在列表中的第一个有效选项，即示例“红色”中

使用NVDA可以100％正确工作。

有任何想法吗？

答案

请将aria-label =“yourOptionText”属性添加到您的选项标记中。例如aria-label =“白色无效”。希望这会有所帮助。