标签原生具有“高亮/标记文本”语义,主流屏幕阅读器默认播报“高亮”提示,无需也不应添加aria-label或aria-roledescription等ARIA属性,否则会丢失内容或造成重复播报;它专用于标识与当前上下文相关的临时片段,如搜索关键词、引用重点,不可滥用为通用强调工具。

本身不自带 aria- 属性,也不需要手动加 aria- 来让屏幕阅读器识别“重点”;它原生语义就是“高亮/标记文本”,主流屏幕阅读器(NVDA、VoiceOver、JAWS)默认会读出“高亮”或“标记”提示——但前提是语义正确、上下文合理。
为什么不该给 加 aria-label 或 aria-roledescription
强行覆盖原生语义反而破坏可访问性:
-
关键结论会让屏幕阅读器只读“重点”,完全丢掉“关键结论”内容 -
可能被忽略(部分阅读器不支持该属性),或导致重复播报(如“标记 重点 关键结论”) -
已是 WAI-ARIA 推荐的语义化替代方案,无需额外 ARIA 注解
的正确使用场景和限制
它不是“加粗”或“强调语气”的通用工具,而是专指“在引用上下文中临时标出相关片段”:
- 搜索结果页中高亮关键词:
找到匹配项:用户输入了 表单验证…
立即学习“前端免费学习笔记(深入)”;
- 文档中引用他人文字时标出被引重点:
“用户体验应优先考虑 可访问性”
- 避免用于整段强调、标题、按钮文案、或无上下文独立出现(如
重要!) - 不要嵌套
,也不要在内放交互元素(如),否则焦点和语义易混乱
视觉样式与可访问性协同要点
纯靠颜色高亮(如黄色背景)对色觉障碍用户无效,必须叠加其他视觉线索:
- 保留足够对比度(背景色与文字色对比 ≥ 4.5:1),可用
background-color+color控制 - 建议加边框或下划线:
border-bottom: 2px solid #ffcc00;或text-decoration: underline wavy #ffcc00; - 禁用
outline: none在聚焦时移除轮廓——内若含链接或按钮,必须保持焦点可见 - 避免动画闪烁(如
animation: pulse 2s infinite;),可能触发光敏性癫痫
真正难的是判断“该不该用 ”,而不是怎么配 ARIA。语义错位比样式丑陋更损害可访问性——当不确定是否属于“上下文中的临时标记”,就换用 或 ,它们有明确的语气/权重语义,且屏幕阅读器支持更稳定。











