jQuery UI 對話框和 aria-controls

Question

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

我已經注意到 jQuery UI 自動將div包裝在另一個單獨的div ，該div具有role=dialog和aria-labelledby以及對話框的標題。 我已經看到了關於選項卡鏈接和選項卡面板以及按鈕和表單元素（輸入、下拉菜單等）之間關系的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 規范，允許將aria-controls用於元素角色按鈕，並且您的用例是有意義的。 由用戶代理/輔助技術提供它認為適合這種關系的任何行為（使用 JAWS，您可以使用INSERT-ALT-M導航到受控元素。如果對話框不是模態的並且按鈕切換它，這提供了有用的導航支持。如果對話框是模態的，它不會對用戶體驗增加太多）。

在您的情況下，如果您使用aria-haspopup="true"來指示該按鈕將產生一個彈出窗口，將會改善用戶體驗。 然后將向屏幕閱讀器用戶宣布。

這里 Leonie Watson（ARIA WG 成員）專門使用按鈕作為 ARIA 控件的示例，並討論了屏幕閱讀器當前（截至撰寫本文時）如何支持它http://tink.uk/using-the-aria-controls-attribute /

Answer 2

在 jQuery 當前實現中，我認為不合適。

根據“aria-controls”的 ARIA 文檔http://www.w3.org/TR/wai-aria/states_and_properties#aria-controls

標識其內容或存在由當前元素控制的元素（或多個元素）。 請參閱相關的 aria-owns。

這是什么意思？

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

當您聚焦此類按鈕時，JAWS 會宣布“使用 Jaws 鍵 + alt + m 移動到受控元素”。 所以如果元素有display:none ，它就不會工作。 如果你想控制一個元素的“存在”，你必須定位一個父元素或使用可見性/z-index CSS 屬性。

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

在您的情況下，當頁面加載時，您有一個帶有 css 屬性display: none的ui-dialog 。 因此，當屏幕閱讀器宣布按鈕可以影響另一個元素時，您將無法跳轉到它，除非您之前有效地按下它，因為該元素尚未出現在視覺流中。

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