html不支持通知重要程度分级，必须用aria角色+aria-live组合实现：role="status"/"alert"/"log"分别对应礼貌、强制、流式播报，且需同步更新视觉与语义。
HTML 本身不支持通知消息的“重要程度分级”语义，必须靠 ARIA + 角色 + 实时区域组合实现，且不能依赖嵌套 <strong></strong> 或自定义属性“模拟”等级。
为什么 <strong></strong> 嵌套或 aria-level 不行
很多人试图写 <strong><strong>高危操作</strong></strong> 或加 aria-level="2" 来表达“更紧急”，但这是无效的：
- HTML5 规范明确禁止
<strong></strong>嵌套用于强化语义——屏幕阅读器只识别一次“强重要性”，不会叠加语气或行为 -
aria-level不是标准 ARIA 属性，主流读屏器（NVDA、VoiceOver、JAWS）完全忽略它，也不会触发任何播报逻辑 - 搜索引擎和辅助技术不解析“数值型权重”，只认
role类型与aria-live策略
真正可用的三档分级方案：role + aria-live 组合
WAI-ARIA 定义了三种语义明确、被全平台支持的实时区域角色，对应不同打断强度：
-
role="status"+aria-live="polite"：非紧急状态更新，如“已保存”“加载中”，空闲时播报 -
role="alert"+aria-live="assertive"：需立即干预的错误或风险，如“密码错误”“会话过期”，强制打断当前语音 -
role="log"+aria-live="polite"：连续流式信息，如聊天记录、操作日志，按顺序播报变化
注意：role="alert" 是唯一默认 aria-live="assertive" 的角色，不要手动覆盖；role="status" 和 role="log" 默认就是 polite，显式声明更清晰。
视觉 + 语义必须同步更新，不能只改 class
仅用 CSS 切换红/黄/橙背景，却不更新 role 和 aria-live，会导致辅助技术完全失焦：
- 预警从“剩余3天”升为“剩余1天”，不仅要加
class="warn-red"，还必须把role从"status"改成"alert" - JS 更新时用
element.setAttribute("role", "alert")，而不是只操作 class - 每次变更后，确保内容文本本身包含可读提示，例如：
<div role="alert">⚠️ 截止时间仅剩 1 天，请立即提交</div>，避免纯图标或 emoji 作为唯一提示 - 对视力障碍用户，补充
<span class="sr-only">紧急：截止时间仅剩 1 天</span>是稳妥做法
容易被忽略的兼容性现实
所谓“分级”，最终不是浏览器解析出来的，而是你写的 JS + ARIA + 文案共同触发的用户感知。没有哪个读屏器会因为你写了 aria-priority="high" 就自动提高音量——那得你自己监听 DOM 变化，再调用 speechSynthesis.speak() 才行。最简路径是：用对 role，写清文案，保持 aria-live 策略一致，其他交给规范实现。别在语义层外另建一套“等级体系”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
