Jaws屏幕閱讀器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. 有時甚至有效的選項不會被讀出。這大多發生在列表中的第一個有效選項中，即在示例中'紅色'

這與NVDA一起工作100％正確。

任何想法？

Answer 1

請將aria-label =「yourOptionText」屬性添加到您的選項標籤中。例如對於例如 aria-label =「白色無效」。 希望這會有所幫助。