如何使用WAI-ARIA創建完全可訪問的嵌套下拉列表？

Question

幾天前，我已經開始在因特網上搜索有關WAI-ARIA的教程和文檔，以瞭解任何類型的AJAX請求。

我習慣於使用jQuery和AJAX編碼嵌套的下拉列表。它工作得很好，但不是本地訪問。例如，我們需要使用WAI-ARIA特定標籤來「啓用」所有類型的動態內容的可訪問性。

我的一個要求如下： 假設我有一個狀態下拉菜單，它使用onchange事件更新Region下拉菜單。我如何使用WAI-ARIA和jQuery與屏幕閱讀器進行交互，以便告訴用戶區域下拉列表已更新？

有什麼想法？

非常感謝！

Answer 1

對於這種使用情況下，我想補充aria-live和aria-atomic屬性，例如代碼：

<select id="foo" aria-live="assertive" aria-atomic="true"> 
    <option value="nw">Northwest</option> 
    <option value="ne">Northeast</option> 
    <option value="se">Southeast</option> 
    <option value="sw">Southwest</option> 
</select> 

我覺得assertive對於aria-live屬性權值，但polite可能反而是適當的。 aria-atomic屬性可以告訴瀏覽器/ AT在發生變化時該區域必須作爲整體呈現。您也可以考慮在初始選擇時使用aria-disabled: true，然後在使用與狀態選擇關聯的值更新之前將其切換爲false。

編輯

OK，我已經做了使用NVDA和IE9和Firefox 13.01一些測試。我目前沒有JAWS，所以如果有人可以用JAWS測試頁面，那將會很棒。 據我所知，VoiceOver不支持 aria屬性 剛剛在10.7（Lion）上使用Chrome + Voiceover進行測試，Voiceover確實似乎支持aria-live。

Test page available here。

我使用的模擬數據加載到選擇的地區一個簡單的腳本（使用對象）：玩這個後

var options = [], 
    regions = { 
    'nw': 'Northwest', 
    'ne': 'Northeast', 
    'se': 'Southeast', 
    'sw': 'Southwest' 
} 

$(document).ready(function() { 
    $.each(regions, function(key, value) { 
     options.push('<option value="'+ key +'">'+ value +'</option>'); 
    }); 

    $('.block').on('change, focusout', '.states', function() { 
     $(this).parent().children('.regions') 
      .attr({'disabled': false, 'aria-disabled': false}) 
      .html(options.join('')); 
    }); 

    window.setTimeout(
     function() { 
      $('#speak').text('assertive!'); 
     }, 
     3000 
    ); 
}); 

一些觀察了一下（我是當它涉及到屏幕肯定沒有專家讀者，所以如果我錯過了一些東西讓我知道）...

• 使用不建議在HTML disabled屬性，你真的不希望加載該區域的數據，直到狀態選擇集中出來，因爲在t時關聯的區域選擇被禁用他在聚焦的時候會跳到下一個控件（你可以在下面的錄音中聽到這個）。奇怪的是，Firefox宣佈區域選擇的值，即使它沒有關注它。

• 我看到在polite和assertive之間的行爲沒有差異，或者在沒有aria-live屬性的示例中，這種行爲沒有區別。我以爲FF13和IE9都支持aria-live，但是從最後一個代碼（$('#speak')...）看來，IE9不是？

• 也許延遲模擬加載通過AJAX將是一件好事添加。

你可以聽錄音：IE9，Firefox 13

Answer 2

我2C是詠歎調，控制可能是一個更適合這裏。

您在此處描述的用戶界面聽起來非常類似於您在線購買產品時經常發現的國家/州選擇。這些典型的模式是：

<label for="country">Country:</label> 
<select id="country" aria-controls="state"> 
    <option value="">Select a country...</option> 
    <option value="Andorra">Andorra</option> 
    <option value="Belgium">Belgium</option> 
    ... 
</select> 
<br> 
<label for="state">State:</label> 
<select id="state"> 
    <option value="">(Select a country first)</option> 
    ... options here populated when country changes ... 
</select> 

幾件事情要注意這裏：

• 我使用「佔位」選項條目在各自選擇的開始。這有兩個好處。首先，它提供了關於用戶如何使用UI的強化文檔 - 如果他們以某種方式最終首先查看第二個字段，它將引導他們到第一個字段。其次，它避免了用戶不小心選擇了默認值：您的代碼可以檢查默認的「Select ...」是否是提交的，並提醒用戶選擇一個實際值。此外，它隱藏了內容選項正在從用戶變化的事實。

• 雖然這裏主要的是這兩個選擇之間的關係應該從表單或頁面的上下文中清楚。有見識與否，遇到類似這樣的表格的用戶不需要明確告訴狀態選擇的內容已經改變，因爲他們會從表單設計和上下文中期望。人們知道，國家是特定於一個國家的（德國沒有「加利福尼亞州」），與縣一樣，所以已經有了這些工作的期望。

使用aria-live並不覺得這裏適合。它是專門爲頁面中的異步更新而設計的，並且用戶不得不連續輪詢，來回讀取以掃描更改。聊天面板也許是一個典型的例子：當一個消息從另一端的某個人出現時，你希望屏幕閱讀器在消息出現時讀出消息，而不必手動搜索消息。相比之下，這裏的UI更加同步;當國家發生變化時，各州將在那裏居住，然後是（*），這是預期的行爲。

ARIA確實有aria-controls="ids..."屬性，這似乎更適合：規範說它用於控件影響另一個控件的可見性或內容時，這似乎描述了此處發生的情況。我不知道任何屏幕閱讀器是否支持這個功能，或者當它存在時他們會讀出什麼內容 - 我可能會查看它並稍後更新此答案。但無論如何，以前的主要觀點都適用，無論如何，表單的行爲和語義應該是明顯的。

-

（*）目前仍然是，如果你異步更新內容的問題 - 如。通過ajax而不是從已經加載到頁面的數組中獲得縣的列表，那麼在選擇國家和可用於下一次選擇的結果之間可能存在延遲。 aria-live在這裏再次感覺不到正確的解決方案，因爲你不想讀出新的內容，你只是想讓用戶知道select現在已經可以使用了。