只有当弹窗具备模态交互特征时才适用role="dialog"，需配套aria-labelledby和aria-modal="true"，并手动实现焦点管理；原生因兼容性问题在旧版safari中受限。
role="dialog" 什么时候该用
只有当弹窗具备「模态交互」特征时才适用：role="dialog"。它不是给所有浮层加的装饰属性，而是告诉辅助技术：“这是一个需要用户响应、会阻断背景内容操作的临时界面”。比如登录框、确认删除弹窗、表单提交反馈——它们有明确的焦点管理需求、必须按 Esc 关闭、背景应被 aria-modal="true" 隔离。纯展示型 tooltip、下拉菜单、侧边栏都不该用。
必须配套的 aria 属性有哪些
单独写 role="dialog" 几乎没用，屏幕阅读器会忽略或误读。关键配套项只有两个，缺一不可：
-
aria-labelledby指向弹窗标题元素的id（不能是空字符串或不存在的 ID） -
aria-modal="true"告诉辅助技术背景内容已不可访问（注意：IE 不支持，但现代浏览器都 OK）
示例：
<div role="dialog" aria-labelledby="dialog-title" aria-modal="true"> <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/skill3458" title="html-ppt-to-pdf"><img src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a> <p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p> </div> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <button>取消</button> <button>确定</button> </div>
焦点管理不处理，role="dialog" 就等于没设
辅助技术依赖焦点在弹窗内循环，否则键盘用户可能跳到背景按钮上。你得手动控制：
- 打开弹窗时，用
element.focus()把焦点移到第一个可交互元素（如第一个button或input） - 监听
Tab键，在弹窗内做焦点循环（tabindex="-1"+focus()） - 按
Esc关闭时，必须把焦点移回触发弹窗的元素（存个triggerEl引用）
漏掉任意一条，role="dialog" 的语义就失效了——它只声明意图，不自动实现行为。
为什么不用 <dialog></dialog> 元素代替
原生 <dialog></dialog> 确实自带 role="dialog"、焦点锁定和 showModal()，但兼容性差：<dialog></dialog> 在 Safari 15.4 之前不支持 aria-modal，iOS Safari 直到 16.4 才完整支持。如果你要支持 iOS 15 或旧版桌面 Safari，仍得用 div[role="dialog"] + 手动逻辑。另外，<dialog></dialog> 默认用 display: none 隐藏，动画过渡难控制，很多 UI 库（如 Bootstrap、Headless UI）也仍基于 role="dialog" 实现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
