Javascript jqueryui对话框和aria控件

在按钮上使用引用它打开的jQueryUI对话框元素是否适合使用ARIA

我已经注意到，jQuery UI会自动将

div

包装在另一个单独的

div

中，该div具有

role=dialog

和

aria标签，并带有对话框的标题。我在选项卡链接和选项卡面板以及按钮和表单元素（输入、下拉列表等）之间的关系上看到了
aria控件，但在按钮和对话框之间没有看到

下面是一个代码示例，演示我的问题：


$（'button[aria controls$=“-dialog”]）。在（'click'，function（）上{
var$dialog=$（'#'+$（this.attr（'aria-controls'））；
$dialog.dialog（'open'）；
});
$（'.jqui对话框'）。对话框({
莫代尔：是的，
自动打开：错误
});

添加新项目
这里有一张表格

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

如果您
aria haspopup=“true”
指示按钮将生成一个弹出窗口，那么将改善您的用户体验。这将向屏幕阅读器用户宣布

在这里，Leonie Watson（ARIA工作组成员）专门使用一个按钮作为ARIA控件的示例，并讨论屏幕阅读器当前的工作方式（截至撰写时）支持它
是的，根据ARIA规范允许使用元素角色，并且您的用例是有意义的。用户代理/辅助技术将提供其认为适合此关系的任何行为（使用JAWS，您可以使用它导航到受控元素。如果对话框不是模态的，则按钮将其切换，这将提供有用的导航支持。如果对话框是模态的，则不会为用户体验增加太多内容）

如果您
aria haspopup=“true”
指示按钮将生成一个弹出窗口，那么将改善您的用户体验。这将向屏幕阅读器用户宣布

在这里，Leonie Watson（ARIA工作组成员）专门使用一个按钮作为ARIA控件的示例，并讨论了屏幕阅读器当前（在撰写本文时）如何支持它
在jQuery当前实现中，我认为这不合适。

根据“ARIA控件”的ARIA文档

标识其内容或状态由当前元素控制的元素。请参阅相关文档

这是什么意思

这可用于控制视频、滑块、选项卡面板或任何需要控制的按钮

当您聚焦此类按钮时，JAWS会宣布“使用JAWS键+alt+m移动到受控元素”。因此，如果元素具有
display:none
，它将不起作用。如果要控制元素的“存在”，您必须以父元素为目标，或使用可见性/z-index CSS属性

预期结果是屏幕阅读器可以引导您找到受影响的元素，而无需您按下按钮

在您的情况下，当页面加载时，您有一个css属性为“显示：无”的
ui对话框
。因此，当屏幕阅读器宣布按钮可能影响另一个元素时，您将无法跳转到它，除非您之前有效地按下它，因为该元素不在视觉流中

TL；DR:
aria controls
属性指示哪个元素会受到控件的影响。屏幕阅读器会让您快速访问该元素（无需您有效按下控件本身）。这需要将视觉焦点移动到目标元素。
在jQuery当前的实现中，我认为这不合适。

根据“ARIA控件”的ARIA文档

标识其内容或状态由当前元素控制的元素。请参阅相关文档

这是什么意思

这可用于控制视频、滑块、选项卡面板或任何需要控制的按钮

当您聚焦此类按钮时，JAWS会宣布“使用JAWS键+alt+m移动到受控元素”。因此，如果元素具有
display:none
，它将不起作用。如果要控制元素的“存在”，您必须以父元素为目标，或使用可见性/z-index CSS属性

预期结果是屏幕阅读器可以引导您找到受影响的元素，而无需您按下按钮

在您的情况下，当页面加载时，您有一个css属性为“显示：无”的
ui对话框
。因此，当屏幕阅读器宣布按钮可能影响另一个元素时，您将无法跳转到它，除非您之前有效地按下它，因为该元素不在视觉流中

TL；DR:
aria controls
属性指示哪个元素会受到控件的影响。屏幕阅读器会让您快速访问该元素（无需您有效按下控件本身）。这需要将视觉焦点移动到目标元素。
导致对话框弹出的按钮肯定会控制该对话框的存在。选项卡和作为表格列表一部分的选项卡面板可以说是完全相同的。如果选项卡可以控制选项卡面板，为什么不使用按钮和d