jQuery UI對話框和詠歎調控件

Question

在按鈕上使用aria-controls來引用它打開的jQuery UI對話框元素是否適合使用ARIA？

我已經注意到，jQuery UI的自動換在另一個單獨div有role=dialog和aria-labelledby在對話框的標題div。我已經看到了選項卡鏈接和選項卡面板之間的關係以及按鈕和表單元素（輸入，下拉等）之間的關係，但不在按鈕和對話框之間的關係aria-controls。

下面是一個代碼例子來說明什麼，我問：

$('button[aria-controls$="-dialog"]').on('click', function() { 
 
    var $dialog = $('#' + $(this).attr('aria-controls')); 
 
    $dialog.dialog('open'); 
 
}); 
 

 
$('.jqui-dialog').dialog({ 
 
    modal: true, 
 
    autoOpen: false 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src=https://code.jquery.com/ui/1.11.4/jquery-ui.min.js></script> 
 
<link rel=stylesheet type=text/css href=https://code.jquery.com/ui/1.11.4/themes/dot-luv/jquery-ui.css> 
 

 
<button type=button aria-controls=add-new-item-dialog> 
 
    Add new item 
 
</button> 
 

 
<div id=add-new-item-dialog class=jqui-dialog title='Add new item'> 
 
    <p>A form here.</p> 
 
</div>

Answer 1

是，使用aria-controls一個元素角色button按照ARIA規範是允許的，你的使用情況說得通。這將取決於用戶代理/輔助技術來提供它認爲適合這種關係的任何行爲（使用JAWS，您可以使用INSERT-ALT-M導航到受控元素。如果對話框不是模態的，並且按鈕切換它，這將提供有用的導航支持如果對話框是模態的，它不會增加用戶體驗）。

如果你的aria-haspopup="true"表明該按鈕會產生一個彈出窗口，什麼會改善你的用戶體驗。然後這將被髮布給屏幕閱讀器用戶。

這裏萊奧妮·沃森（ARIA WG成員）專門使用一個按鈕爲ARIA控件以及如何目前屏幕閱讀器（如寫的）支持http://tink.uk/using-the-aria-controls-attribute/

Answer 2

在jQuery的當前實現會談的例子，我不認爲這是適當的。

根據用於「詠歎調-控制」 http://www.w3.org/TR/wai-aria/states_and_properties#aria-controls

的ARIA文檔標識其內容或存在由電流元件被控制元件（或多個元件）。查看相關的唱腔擁有者。

這是什麼意思？

這可用於按鈕其控制視頻，滑塊，標籤面板，或任何需要爲控制。

當你關注這個按鈕時，JAWS宣佈「使用大白鑰匙+ alt + m移動到受控元素」。所以如果元素有display:none，它將不起作用。如果你想控制一個元素的「存在」，你必須定位一個父元素或者使用visibility/z-index CSS屬性來玩。

預期的結果是，屏幕閱讀器可以引導您到受影響的元素，而不需要您按下按鈕。

就你而言，當頁面加載時，你有一個ui-dialog與css屬性display: none。因此，當屏幕閱讀器將宣佈該按鈕可能會影響另一個元素時，除非您之前有效按下該元素，否則您將無法跳到該元素，因爲元素尚未處於視覺流中。

TL; DR：aria-controls屬性指示哪個元素可以被控件影響。屏幕閱讀器可讓您快速訪問該元素（無需您有效按下控制器本身）。這要求視覺焦點可以移動到目標元素。