用加图标应使用带aria-hidden="true"的内联SVG，避免Unicode字符或img标签；图标需与文字语义绑定，配合role="alert"和aria-live="assertive"确保可访问性，禁用alert()因不支持HTML定制。
用
直接在 内容里写 ⚠️ 或 ❗ 看似简单，但语义弱、颜色不可控、缩放不一致。更可靠的是用 SVG 或带 aria-hidden="true" 的内联图标元素。
推荐结构：
<dialog id="warn-dialog"><div class="alert-icon" aria-hidden="true">
<svg viewbox="0 0 24 24" width="24" height="24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path></svg>
</div>
<p>预算已超支 15%</p>
<button onclick="this.closest('dialog').close()">知道了</button>
</dialog>
- SVG 路径用
fill控制颜色，比 Unicode 更易适配深色模式 -
aria-hidden="true"防止读屏软件重复播报“警告图标”这类冗余信息 - 避免用
role="alert" 横幅里图标放哪？必须和文字绑定
横幅类警告（非模态）中图标不能孤立存在，必须和文字形成语义组合，否则屏幕阅读器可能跳过或误读。
正确写法：
<div role="alert" aria-live="assertive" class="warning-banner"> <span class="alert-icon" aria-hidden="true">⚠️</span> <span class="alert-text">项目延期 3 天</span> </div>
-
aria-live="assertive"确保变更立刻播报，但前提是内容是完整语义单元 - 图标和文字必须同级包裹在同一个
role="alert"容器里，不能分属两个 div - 如果用 SVG，记得加
focusable="false"，防止键盘焦点意外停在图标上
状态标识该用什么 CSS 类？别只靠颜色区分
仅用红/黄/绿背景表示错误/警告/成功，对色觉障碍用户完全无效。状态标识必须同时提供形状、位置、文字或图案差异。
- 错误：红色背景 +
border-left: 4px solid #dc3545+ “×”图标 + 文字前缀“错误：” - 警告：琥珀色背景 +
border-left: 4px solid #ffc107+ “⚠️”图标 + 文字前缀“注意：” - 成功：绿色背景 +
border-left: 4px solid #28a745+ “✓”图标 + 文字前缀“已完成：” - 所有状态类都应配套
color: #212529（深灰文字），保证对比度 ≥ 4.5:1
为什么 alert() 里加不了图标？它根本不是 HTML
alert() 是浏览器原生模态对话框，渲染层独立于页面 DOM，无法注入任何 HTML、CSS 或 SVG。传入的字符串会被纯文本处理，alert("⚠️ 超时") 中的图标只是 Unicode 字符，样式不可控，移动端还常被系统拦截或降级为通知。
- 这不是 bug，是设计限制：它本就不是为定制化交互准备的
- 想加图标？唯一办法是彻底弃用
alert()，改用或自定义横幅 - 上线前检查代码：全局搜索
alert\(，确认没有漏网之鱼
真正难的不是“图标配在哪”，而是“当用户关闭横幅后，那个 SVG 元素是否真的从 DOM 移除了”。很多实现只设 display: none，图标还在内存里挂着，既浪费资源，又可能被读屏软件反复读到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
