模态对话框正确使用aria-modal和aria-hidden

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

典型正确组合示例

假设页面结构如下：

  

  
...
  

    

    

      
确认删除？
      
此操作不可撤销
      确定
      取消
    
  

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学习网公众号，一起学习编程~