Читатель экрана челюстей IE 11 выберите проблему тега

Question

У меня есть некоторые проблемы с 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/

По сути, я проверяю выбранный элемент в раскрывающемся списке (в примере "белые" и "зеленые" значения недопустимы). Я использую только кнопки вверх и вниз на клавиатуре, чтобы изменить выбранное значение. Если выбрана неверная опция, я обновляю содержимое элемента span соответствующим сообщением об ошибке. Элемент span имеет role="alert" и aria-live="assertive". У меня есть 2 вопроса:

1. Если выбранный параметр недействителен, сообщение об ошибке считывается, но выбранный параметр не считывается, и поэтому пользователь не знает, какой параметр недопустим, т. Е. Какой параметр вызвал эту ошибку.
2. Иногда даже действительные параметры не считываются. Это в основном происходит с первым допустимым параметром в списке, т.е. в примере "Красный"

Это работает на 100% правильно с NVDA.

Есть идеи?

Answer 1

Пожалуйста, добавьте атрибут aria-label="yourOptionText" в ваш тег опции. например, aria-label="White Invalid". Надеюсь, это поможет.