javascript - jQuery UI对话框和aria控件

在按钮上使用aria-controls引用打开的jQuery UI对话框元素是否适合ARIA？

我已经注意到jQuery UI自动将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>

最佳答案

是的，根据ARIA规范，允许将aria-controls用作元素角色button，并且您的用例很有意义。由用户代理/辅助技术提供它认为适合此关系的任何行为（对于JAWS，您可以使用INSERT-ALT-M导航到受控元素。如果对话框不是模态的并且按钮将其切换，则这提供有用的导航支持。如果对话框是模式对话框，则不会增加用户体验。

如果您aria-haspopup="true"表示该按钮将产生一个弹出窗口，那么可以改善用户体验。然后将向屏幕阅读器用户宣布。

在这里，Leonie Watson（ARIA WG成员）专门使用按钮作为ARIA控件的示例，并讨论了当前屏幕阅读器（截至撰写时）如何支持该按钮http://tink.uk/using-the-aria-controls-attribute/

关于javascript - jQuery UI对话框和aria控件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33840588/