aria-modal="true"是wai-aria强制要求的属性，必须加在role="dialog"或role="alertdialog"的弹窗最外层容器上，配合aria-labelledby和tabindex="-1"，声明该弹窗为模态状态、背景内容逻辑隔离；单独使用无效，须同步管理焦点与aria-hidden。
aria-modal 是什么，什么时候必须加
aria-modal="true" 告诉屏幕阅读器：这个弹窗是模态的，页面其他内容暂时不可访问。它不是装饰性属性——只有当弹窗真正阻断背景交互（比如点击背景不关闭、Tab 键无法跳到背后元素）时才该设为 true。如果弹窗只是视觉浮层但背景仍可操作，加了反而误导辅助技术。
怎么给弹窗元素正确设置 aria-modal
必须直接加在弹窗最外层容器上，且该容器需同时满足语义和可聚焦条件：
- 用
role="dialog"或role="alertdialog"显式声明角色 - 必须有
aria-labelledby指向标题元素（不能只靠视觉文本） - 容器本身要能获得焦点，推荐加
tabindex="-1" -
aria-modal="true"不能写在 body 或遮罩层上，只作用于对话框主体
示例：
<div role="dialog" aria-modal="true" aria-labelledby="dialog-title" tabindex="-1"> <h2 id="dialog-title">确认删除？</h2> <p>此操作不可撤销</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <button>取消</button> <button>确定</button> </div>
不加 aria-modal 会出什么问题
屏幕阅读器（如 NVDA、VoiceOver）可能继续朗读背景内容，用户无法感知当前处于模态流程中；键盘 Tab 键仍能落到弹窗外的按钮或链接上，破坏“模态”预期；部分浏览器+读屏组合会忽略 aria-hidden="true" 对背景的隐藏效果。
常见错误现象：
- 弹窗打开后，按 Tab 键跳到页脚导航栏
- 用 VoiceOver 手势滑动时，突然读出顶部 banner 文本
- NVDA 报告“已离开对话框”，但实际焦点还在弹窗内
配套必须做的几件事
aria-modal="true" 单独存在没用，必须配合以下操作：
- 弹窗显示时，给
加aria-hidden="true"（同时记得移除 tabindex） - 确保弹窗内至少有一个可聚焦元素，并在打开时自动
.focus()到它（通常是第一个button或标题） - 关闭弹窗后，焦点必须回到触发它的元素（别留在 body 上）
- 避免用
display: none控制弹窗显隐——它会让辅助技术完全忽略该节点，应改用visibility: hidden+aria-hidden="true"
容易被忽略的是焦点管理：很多 JS 弹窗库只管 show/hide，不处理 focus 回溯，结果导致键盘用户卡死在空白处。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
