模态对话框正确使用aria-modal和aria-hidden-Golang学习网

模态对话框中，aria-modal="true" 和 aria-hidden="true" 不是互斥或可随意混用的属性，它们作用对象不同、职责分明——用错组合会直接破坏屏幕阅读器对“模态性”的理解，导致背景内容被误读、焦点管理失效，甚至让用户迷失上下文。

aria-modal="true"：声明“这是模态框本身”

该属性必须加在模态框容器上（通常是 role="dialog" 或 role="alertdialog" 的元素），明确告诉辅助技术：“当前这个区域是模态的，背景内容应被逻辑隔离”。

aria-hidden="true"：隐藏“非活动区域”

、

、侧边栏等）临时屏蔽**，防止屏幕阅读器意外聚焦或朗读无关内容。

必须动态设置：模态框打开时，给所有非模态区域加 aria-hidden="true"；关闭后立即移除或设为 "false"。
不能加在模态框自身上——否则整个对话框会被辅助技术完全忽略，用户“看不见也听不到”。
常见误用：给遮罩层（overlay）设 aria-hidden="true"。遮罩层本身无语义，一般用 aria-hidden="true" 是合理的，但更推荐用 role="presentation" 或直接不加任何 ARIA（因其纯装饰）。

典型正确组合示例

假设页面结构如下：

<body>
  <header></header>
  <main id="main-content">...</main>
  <div id="modal-root">
    <div class="modal-overlay"></div>
    <div id="my-dialog" role="dialog" aria-modal="true" aria-labelledby="dlg-title" aria-describedby="dlg-desc">
      <h2 id="dlg-title">确认删除？</h2>
      <p id="dlg-desc">此操作不可撤销</p>
      <button>确定</button>
      <button>取消</button>
    </div>
  </div>
</body>

JavaScript 打开时应执行：

设置 document.getElementById('my-dialog').setAttribute('aria-modal', 'true')（若尚未设置）
对 document.getElementById('main-content') 和其他非模态区域调用 el.setAttribute('aria-hidden', 'true')
将焦点移入模态框内首个可交互元素（如第一个按钮）

关闭时反向操作：移除所有 aria-hidden="true"，恢复 aria-modal 为未设置或设为 "false"（但更推荐直接移除该属性），并把焦点切回触发按钮。

为什么不能只用其中一个？

只设 aria-modal="true" 而不隐藏背景：部分旧版屏幕阅读器仍可能朗读背景内容，尤其当焦点意外逸出时。

只设 aria-hidden="true" 而不设 aria-modal="true"：辅助技术无法识别这是模态交互场景，不会自动限制导航范围，也不会在进入/退出时给出上下文提示（如“进入对话框”），键盘焦点仍可能自由进出背景，失去模态意义。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~