role="alert" 不是弹窗，而是aria语义标记，用于向屏幕阅读器播报需立即注意的轻量级动态消息；它无样式、不阻塞交互、不自动聚焦，须配合aria-live="assertive"且动态插入dom才生效。
role="alert" 是什么，它真能当弹窗用？
role="alert" 不是弹窗组件，而是一个 ARIA 语义标记，告诉屏幕阅读器“这里有一条需要立即注意的动态消息”。它本身不带样式、不阻塞交互、不自动聚焦，也不会弹出来——浏览器不会把它渲染成对话框或模态层。如果你期望它像 alert() 那样暂停脚本、居中显示、点确定才继续，那会完全失效。
什么时候该用 role="alert"？
它只适合轻量、非中断性的状态反馈，比如表单提交后的成功提示、搜索结果为空的即时反馈、实时校验错误（如“密码太短”）。前提是：
- 消息是动态插入 DOM 的（不能一开始就写死在 HTML 里）
- 内容简短，且不需要用户操作（没有按钮、链接）
- 你已用 JavaScript 控制它的显示/隐藏，并触发
aria-live区域刷新
示例场景：document.getElementById("status").innerHTML = "邮箱格式不正确";，其中 <div id="status" role="alert" aria-live="polite"></div> —— 这样屏幕阅读器才会读出来。
常见错误：为什么屏幕阅读器没读？
最常踩的坑是漏掉 aria-live 或用了错误的值：
-
role="alert"必须配合aria-live="assertive"（不是polite），否则 NVDA/JAWS 可能跳过或延迟播报 - 元素不能一开始就是空的再填内容，得先存在 DOM，再更新 innerHTML 或 textContent
- 不要把
role="alert"套在<button></button>或<a></a>上——语义冲突，屏幕阅读器可能忽略 - 别和
aria-modal="true"混用，role="alert"不是模态框，也不接管焦点
想实现真正可访问的弹窗，该用什么？
如果需求是“用户必须看到并操作”的弹窗（比如确认删除、登录失败重试），role="alert" 完全不合适。正确做法是：
- 用
role="dialog"+aria-modal="true" - 确保首次打开时自动将焦点移到弹窗内第一个可聚焦元素（如确认按钮）
- 按 Esc 关闭、点击遮罩层不关闭（除非显式支持）、Tab 键在弹窗内循环
- 关闭后焦点必须回到触发弹窗的元素上
这些逻辑没法靠一个 role 属性自动完成，得手写焦点管理与键盘事件处理。
复杂点不在写 role="alert"，而在判断它到底是不是你要的“提醒”——是悄悄说一句，还是必须拦住用户、等他点头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
