aria-modal="true"必须设在模态框容器上声明其模态性，aria-hidden="true"需动态加于背景内容以屏蔽无关区域；二者缺一不可，仅用其一会导致屏幕阅读器误读或焦点失控。
模态对话框中，aria-modal="true" 和 aria-hidden="true" 不是互斥或可随意混用的属性，它们作用对象不同、职责分明——用错组合会直接破坏屏幕阅读器对“模态性”的理解，导致背景内容被误读、焦点管理失效，甚至让用户迷失上下文。
aria-modal="true"：声明“这是模态框本身”
该属性必须加在模态框容器上（通常是 role="dialog" 或 role="alertdialog" 的元素），明确告诉辅助技术：“当前这个区域是模态的，背景内容应被逻辑隔离”。
- 仅对设置了
role="dialog"或role="alertdialog"的元素有效；其他 role（如role="modal"）无效且不合法。 - 值只能是
"true"；设为"false"或省略，等同于未声明模态状态，屏幕阅读器可能继续朗读背景内容。 - 它不控制视觉显示，也不影响 DOM 可见性，只改变辅助技术的语义解析行为。
aria-hidden="true"：隐藏“非活动区域”
该属性用于**模态框打开时，将背景主内容（如 <main>、<header>、侧边栏等）临时屏蔽**，防止屏幕阅读器意外聚焦或朗读无关内容。
- 必须动态设置：模态框打开时，给所有非模态区域加
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"：辅助技术无法识别这是模态交互场景，不会自动限制导航范围，也不会在进入/退出时给出上下文提示（如“进入对话框”），键盘焦点仍可能自由进出背景，失去模态意义。
