17370845950

必须同时设置 aria-modal="true" 和 aria-hidden 的场景是全屏遮罩式、焦点受限的模态框，如登录弹窗、确认对话框；此时需用 role="dialog" 声明语义，并将背景容器设为 aria-hidden="true"，模态框自身不可设 aria-hidden。

当一个模态框（modal）完全遮盖页面其余内容、且焦点被限制在模态框内部时，aria-modal="true" 和 aria-hidden 的组合使用才真正必要且正确。

何时必须同时设置 aria-modal="true" 和 aria-hidden

这个组合的核心目标是：让屏幕阅读器忽略模态框外的所有内容，同时只聚焦于模态框本身。它适用于全屏遮罩式、交互受限的模态场景，比如登录弹窗、确认对话框、抽屉式表单等。

• 模态框已通过 CSS（如 position: fixed + 遮罩层）实现视觉上的隔离
• 键盘焦点已被程序化地限制在模态框内（包括 Tab 循环、Esc 关闭、首次打开时自动聚焦首个可聚焦元素）
• 页面主体内容此时对用户不可操作、也不应被屏幕阅读器朗读

为什么不能只用 aria-hidden="true"？

仅给 或主容器加 aria-hidden="true"，会导致整个页面内容对辅助技术“消失”，但模态框本身如果没有明确声明其模态角色，屏幕阅读器可能仍将其识别为普通区域，甚至因焦点仍在其中而出现逻辑混乱（例如：用户听到“按钮”却不知道它属于哪个上下文）。

aria-modal="true" 的作用是向辅助技术明确宣告：“这是一个独立、自包含、暂时接管整个交互上下文的模态窗口”。它会自动触发多数现代屏幕阅读器（NVDA、JAWS、VoiceOver）隐藏其父级中 aria-hidden="false" 以外的内容——但为兼容旧版本或特殊情形，仍需手动将背景内容设为 aria-hidden="true"。

典型 HTML 结构与设置方式

推荐结构如下，注意层级与属性位置：

  

    
  
  
    
请确认操作
    
该操作不可撤销。
    取消
    确定
  

• role="dialog" 是语义基础，必须配合 aria-modal="true" 才完整表达模态意图
• aria-hidden="true" 应加在模态框之外**所有**可聚焦/可读取的兄弟容器上（常见为
  、
  、），而非粗暴加在 上（避免影响全局语义）
• 模态框自身不能**有 aria-hidden（否则自己也会被隐藏）

什么情况下不该用这个组合？

并非所有“看起来像弹窗”的组件都需要这套 ARIA 声明：

• 非模态浮层（如工具提示 tooltip、下拉菜单 dropdown）：它们不阻断页面交互，也不限制焦点，只需用 role="tooltip" 或 role="menu" 等对应语义即可
• 部分可见的侧边栏或面板（如移动端导航抽屉未完全覆盖内容）：若背景内容仍可滚动或点击，就不满足“模态”定义，不应设 aria-modal="true"
• 服务端渲染的整页跳转（如跳转到 /confirm 页面）：这不是模态框，而是新页面，无需任何 aria-modal 或 aria-hidden