必须同时设置 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"？
仅给 <body> 或主容器加 aria-hidden="true"，会导致整个页面内容对辅助技术“消失”，但模态框本身如果没有明确声明其模态角色，屏幕阅读器可能仍将其识别为普通区域，甚至因焦点仍在其中而出现逻辑混乱（例如：用户听到“按钮”却不知道它属于哪个上下文）。
aria-modal="true" 的作用是向辅助技术明确宣告：“这是一个独立、自包含、暂时接管整个交互上下文的模态窗口”。它会自动触发多数现代屏幕阅读器（NVDA、JAWS、VoiceOver）隐藏其父级中 aria-hidden="false" 以外的内容——但为兼容旧版本或特殊情形，仍需手动将背景内容设为 aria-hidden="true"。
典型 HTML 结构与设置方式
推荐结构如下，注意层级与属性位置：
<body>
<main aria-hidden="true">
<!-- 原页面主要内容 -->
</main>
<div role="dialog" aria-modal="true" aria-labelledby="modal-title">
<h2 id="modal-title">请确认操作</h2>
<p>该操作不可撤销。</p>
<button>取消</button>
<button>确定</button>
</div>
</body>-
role="dialog"是语义基础，必须配合aria-modal="true"才完整表达模态意图 -
aria-hidden="true"应加在模态框之外**所有**可聚焦/可读取的兄弟容器上（常见为<main>、<header>、<footer>），而非粗暴加在<body>上（避免影响全局语义） - 模态框自身不能**有
aria-hidden（否则自己也会被隐藏）
什么情况下不该用这个组合？
并非所有“看起来像弹窗”的组件都需要这套 ARIA 声明：
-
非模态浮层（如工具提示 tooltip、下拉菜单 dropdown）：它们不阻断页面交互，也不限制焦点，只需用
role="tooltip"或role="menu"等对应语义即可 -
部分可见的侧边栏或面板（如移动端导航抽屉未完全覆盖内容）：若背景内容仍可滚动或点击，就不满足“模态”定义，不应设
aria-modal="true" -
服务端渲染的整页跳转（如跳转到 /confirm 页面）：这不是模态框，而是新页面，无需任何
aria-modal或aria-hidden
