html5 无自动语音朗读功能，需结合语义标注、aria属性及javascript（web speech api）实现可访问语音提示；专用于上下文相关重点，不可替代或，且必须保留视觉高亮以保障低视力用户识别。
HTML5 本身不提供自动语音朗读功能，但可通过 <mark></mark> 语义化标注重点 + ARIA 属性 + 浏览器/屏幕阅读器协同实现助读效果；纯靠 HTML 标签无法触发语音，必须配合辅助技术或 JS 才能“读出来”。
用 <mark></mark> 正确标注重点内容
<mark></mark> 是 HTML5 唯一专用于高亮“上下文相关重点”的语义标签，不是视觉装饰，而是告诉辅助工具“此处值得关注”。它和 <strong></strong>（强调重要性）、<em></em>（强调语气）语义不同，不能混用。
- 适合场景：搜索结果中的关键词、文档中需临时突出的术语、教学材料里的核心概念
- 错误写法：
<mark>警告：请勿删除</mark>（这不是上下文相关重点，而是操作提示，该用<strong></strong>或<span role="alert"></span>） - 视觉样式可重置：
mark { background-color: #ffeb3b; color: #212121; }，但别移除背景色——否则语义高亮对低视力用户失效
让屏幕阅读器“读出提示”的关键：ARIA + 角色控制
仅用 <mark></mark> 不会触发额外语音提示。要主动引导朗读，得靠 ARIA：
- 添加
aria-label可覆盖默认朗读内容，例如：<mark aria-label="重点词汇：响应式布局">响应式布局</mark> - 若需在朗读前插入提示音或停顿，用
aria-live="polite"配合动态插入的<span></span>更可靠（<mark></mark>本身不支持aria-live） - 避免滥用
role="note"或role="complementary"套在<mark></mark>上——这会破坏其原有语义，屏幕阅读器可能跳过或误读
真要“点击就朗读”？得靠 JavaScript + Web Speech API
用户点一下就听重点内容，这是交互需求，HTML 无法独立完成。需结合 SpeechSynthesis：
立即学习“前端免费学习笔记（深入）”；
const markEl = document.querySelector('mark');
markEl.addEventListener('click', () => {
const utterance = new SpeechSynthesisUtterance(markEl.textContent);
utterance.rate = 0.9;
speechSynthesis.speak(utterance);
});
- 注意兼容性：
speechSynthesis在 Safari 桌面端默认禁用，iOS Safari 不支持；需用户手势触发（如 click），不能 onload 自动播 - 别忽略中断逻辑：重复点击应
speechSynthesis.cancel()，否则声音堆叠 - 隐私敏感：部分浏览器首次调用会弹权限提示，不能静默启用
真正难的不是加个 <mark></mark>，而是判断“这里到底该不该读”“读给谁听”“怎么读才不干扰正常浏览”。语义标签是起点，不是终点；语音提示不是装饰，而是信息通道的延伸。漏掉 ARIA 或绕过可访问性测试，再漂亮的高亮也等于没标。
