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属性指示哪个元素可以受控件影响。 屏幕阅读器将使您能够快速访问该元素（无需您有效地按下控件本身）。 这要求视觉焦点可以移动到目标元素。