必须唯一且只包核心内容，否则屏幕阅读器会误读广告、卡顿或错译；需用<main>锚定主体，<article>表独立单元，<section>管带标题区块；图片缺alt、表单无label、ARIA滥用及标题层级断裂均破坏语义链路。
<main></main> 必须唯一且只包核心内容，否则高级辅助设备（如 JAWS、NVDA、VoiceOver）在翻译或语音合成时会跳过、误判甚至重复播报。
为什么 <main></main> 多个或包裹非主内容会导致语音合成异常
屏幕阅读器依赖 <main></main> 作为“主体内容锚点”，按 M 键快速跳转时只识别第一个合法的 <main></main>。若存在多个，或它内部混入顶部 banner、侧边广告、弹窗遮罩等非主内容，语音引擎会：
- 把广告文案当作正文朗读，打断用户理解节奏
- 因 DOM 层级混乱触发冗余遍历，导致合成延迟或卡顿
- 在多语言环境下错误切分语义块，影响翻译准确性（例如把中文标题和英文副标题拼成一句合成）
<section></section> 和 <article></article> 混用会让翻译上下文丢失
高级辅助设备在合成前会构建语义上下文树。<section></section> 表示“有标题的逻辑分段”，<article></article> 表示“可独立分发的内容单元”（如博客、新闻、评论）。二者不可互换：
- 用
<section></section>包裹一篇完整博客：翻译引擎无法识别其独立性，可能将它和前后内容合并处理，导致摘要生成失败或引用错乱 - 用
<article></article>包裹页脚联系方式：违反语义，部分合成引擎会忽略该节点或报 ARIA 警告 - 正确做法：新闻列表用
<article></article>，每个<article></article>内必须含<h2></h2>–<h6></h6>；栏目导语、服务说明等带小标题的区块用<section></section>
图片与表单的语义缺失直接破坏翻译链路
缺失 alt 的 <img alt="提升HTML语义对高级辅助设备翻译与合成的可访问性" > 或未绑定 <label></label> 的 <input>，在高级辅助设备中不是“读不出来”，而是“无法进入翻译/合成流水线”：
立即学习“前端免费学习笔记（深入）”；
-
alt为空或仅含文件名（如icon_menu.png）：合成引擎默认跳过，或用占位音效替代，用户完全不知此处有交互控件 - 仅靠 CSS 视觉对齐的表单：焦点落在
<input>上时，无<label for="id"></label>或嵌套写法，语音引擎无法关联提示文本，“邮箱”“密码”等关键语义彻底丢失 -
<figure></figure>未配<figcaption></figcaption>：当图像含图表数据时，翻译引擎无法提取结构化描述，导致数值类信息不可访问
ARIA 补充必须严格遵循“原生优先”原则
高级辅助设备对 ARIA 的支持程度不一。过度或错误使用反而干扰翻译与合成：
- 给原生
<button></button>加role="button"：冗余，部分引擎会降级处理或报错 - 用
aria-label替代alt：aria-label不参与图像语义索引，翻译时仍无法还原图像意图 - 动态内容更新未加
aria-live="polite"：比如搜索建议列表刷新后，语音引擎不会主动播报，用户需手动导航才发现变化
最容易被忽略的是标题层级断裂——<main></main> 外堆了三个 <h1></h1>，<main></main> 内却从 <h3></h3> 开始，这会让语音引擎无法建立正确的文档大纲，翻译输出变成无序碎片，而非连贯语义流。
