标签原生具有“高亮/标记文本”语义，主流屏幕阅读器默认播报“高亮”提示，无需也不应添加aria-label或aria-roledescription等ARIA属性，否则会丢失内容或造成重复播报；它专用于标识与当前上下文相关的临时片段，如搜索关键词、引用重点，不可滥用为通用强调工具。
<mark></mark> 本身不自带 aria- 属性，也不需要手动加 aria- 来让屏幕阅读器识别“重点”；它原生语义就是“高亮/标记文本”，主流屏幕阅读器（NVDA、VoiceOver、JAWS）默认会读出“高亮”或“标记”提示——但前提是语义正确、上下文合理。
为什么不该给 <mark></mark> 加 aria-label 或 aria-roledescription
强行覆盖原生语义反而破坏可访问性：
-
<mark aria-label="重点">关键结论</mark>会让屏幕阅读器只读“重点”，完全丢掉“关键结论”内容 -
<mark aria-roledescription="重点"></mark>可能被忽略（部分阅读器不支持该属性），或导致重复播报（如“标记 重点 关键结论”） -
<mark></mark>已是 WAI-ARIA 推荐的语义化替代方案，无需额外 ARIA 注解
<mark></mark> 的正确使用场景和限制
它不是“加粗”或“强调语气”的通用工具，而是专指“在引用上下文中临时标出相关片段”：
- 搜索结果页中高亮关键词：
<p>找到匹配项：用户输入了 <mark>表单验证</mark>…</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill9972" title="Wechat Article Html"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="Wechat Article Html" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill9972" title="Wechat Article Html">Wechat Article Html</a> <p>将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。</p> </div> <a href="/xiazai/skill9972" title="Wechat Article Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> - 文档中引用他人文字时标出被引重点：
<blockquote><p>“用户体验应优先考虑 <mark>可访问性</mark>”</p></blockquote> - 避免用于整段强调、标题、按钮文案、或无上下文独立出现（如
<mark>重要！</mark>） - 不要嵌套
<mark></mark>，也不要在<mark></mark>内放交互元素（如<button></button>），否则焦点和语义易混乱
视觉样式与可访问性协同要点
纯靠颜色高亮（如黄色背景）对色觉障碍用户无效，必须叠加其他视觉线索：
- 保留足够对比度（背景色与文字色对比 ≥ 4.5:1），可用
background-color+color控制 - 建议加边框或下划线：
border-bottom: 2px solid #ffcc00;或text-decoration: underline wavy #ffcc00; - 禁用
outline: none在聚焦时移除轮廓——<mark></mark>内若含链接或按钮，必须保持焦点可见 - 避免动画闪烁（如
animation: pulse 2s infinite;），可能触发光敏性癫痫
真正难的是判断“该不该用 <mark></mark>”，而不是怎么配 ARIA。语义错位比样式丑陋更损害可访问性——当不确定是否属于“上下文中的临时标记”，就换用 <strong></strong> 或 <em></em>，它们有明确的语气/权重语义，且屏幕阅读器支持更稳定。
