原生dialog元素的开关按钮是否需添加ARIA属性？

问题背景 #

为控制原生<dialog>元素开关的按钮添加aria-controls这类ARIA属性是否必要？现有示例均直接调用dialog.showModal()，但此处是否缺失了与dialog元素的关联？是否应像折叠面板模式那样，在按钮上添加aria-controls="mydialog"属性？此外，是否需要在按钮上添加aria-expanded属性来描述dialog的状态？否则辅助技术无法识别按钮的作用？还有，是否应该在按钮上使用aria-haspopup="dialog"属性？

一、aria-controls：可选但推荐增强语义 #

对于原生<dialog>而言，aria-controls并非强制要求——当调用showModal()后，浏览器会自动将焦点转移到dialog内部，主流辅助技术（如屏幕阅读器）能识别到dialog的弹出状态，也能建立基本的交互关联。

但在页面存在多个dialog或复杂交互场景时，添加aria-controls可以明确建立按钮与目标dialog的关联关系，让辅助技术用户更清晰地知道当前按钮控制的具体对象，进一步提升语义清晰度和无障碍体验。需要注意的是，aria-controls仅声明关联，不会自动同步状态，若需要更严谨的状态同步，需手动通过JavaScript维护。

二、aria-expanded：不建议使用 #

aria-expanded的核心语义是描述"可展开/折叠"组件的状态（比如折叠面板、下拉菜单），而原生dialog属于模态弹窗，其交互是"弹出/关闭"，并非"展开/折叠"范畴。添加这个属性会混淆交互语义，反而可能误导辅助技术用户，因此不推荐给控制dialog的按钮添加aria-expanded。

三、aria-haspopup="dialog"：强烈推荐 #

aria-haspopup="dialog"是专门用于告知辅助技术：点击当前按钮会触发一个对话框类型的弹出组件。这个属性能让用户提前预知交互结果，符合dialog的交互语义，能显著提升无障碍体验，因此强烈推荐添加。

优化后的示例代码 #

HTML #

<dialog id="mydialog">this is the dialog</dialog>
<button id="mydialogtrigger" aria-controls="mydialog" aria-haspopup="dialog">打开对话框</button>

JavaScript #

const myDialog = document.getElementById('mydialog');
const dialogTrigger = document.getElementById('mydialogtrigger');

// 打开对话框
dialogTrigger.addEventListener('click', function (e) {
  myDialog.showModal();
});

// 可选：对话框关闭时的状态处理（若需更严谨的无障碍支持）
myDialog.addEventListener('close', function() {
  // 此处无需修改aria-expanded，可根据需求添加其他状态提示逻辑
});

内容的提问来源于stack exchange，提问作者kimomat