首屏html必须含完整语义骨架，不能靠js补全：须首字节、须在前1024字节、须为body直接子元素且唯一、首屏内容须在首个前；loading="lazy"禁用于首屏及核心功能元素；语义标签不可替换为div+class，标题层级须连续合规。
首屏HTML必须含完整语义骨架，不能靠JS补全
很多团队用SSR或静态生成时，为“减小体积”把 <main></main>、<nav></nav>、标题层级等语义结构延迟到JS里渲染——这直接导致首屏HTML缺失无障碍锚点，爬虫和屏幕阅读器拿到的是无结构的空壳。
真实影响：NVDA按M键跳不到正文；Google无法建立文档大纲，<h1></h1>缺失或跳级直接削弱页面主次置信度；用户在弱网下看到白屏或乱序内容。
-
必须出现在首字节，不能靠JS动态写document.documentElement.lang -
<meta charset="UTF-8">要在前1024字节内，否则IE/旧WebView会乱码 -
<main></main>必须是直接子元素，且全局唯一——布局组件里嵌一个、页面模板里再塞一个，就已违规 - 首屏文字、表单控件所在HTML块，必须出现在首个
<script></script>标签之前，否则解析阻塞
懒加载不是万能解药，loading="lazy" 有硬性使用边界
loading="lazy" 对 <img> 和 <iframe></iframe> 确实能压首屏请求数，但滥用会切断可访问性链路：屏幕阅读器无法预知懒加载区域的内容存在，键盘导航也跳不过去；更严重的是，若关键操作（如登录表单、地图定位）被懒加载，用户可能根本找不到入口。
正确做法不是“全量加lazy”，而是分层判断：
- 首屏内所有
<img>禁用loading="lazy"，哪怕它只是装饰图——因为浏览器会优先请求，且alt文本需即时可读 -
<iframe></iframe>若承载核心功能（如嵌入式支付、实时客服），必须移除loading="lazy"，并配title属性和sandbox安全策略 - 非首屏图片可加
loading="lazy"，但必须同步提供width/height或 CSSaspect-ratio，防止布局抖动影响焦点流 - 第三方嵌入（如地图、视频）需额外加
aria-describedby指向附近文本说明，弥补懒加载导致的语义断层
语义标签不是装饰，是浏览器与辅助技术的调度协议
把 <div class="header"> 换成 <code><header></header>，表面看只省了几个字节，实际触发的是底层行为差异：Chrome会提前预加载 <nav></nav> 内链接；VoiceOver按 Ctrl+Option+U 列出所有 landmark 时，<main></main> 是默认起始焦点区；<picture></picture> 配合 srcset 让浏览器在HTML解析阶段就决策资源下载，而非等JS介入。
容易被忽略的细节：
-
<section></section>必须带<h2></h2>–<h6></h6>，否则它只是个语义黑洞——屏幕阅读器不会把它当导航节点，SEO也不计入大纲权重 -
<figure></figure>必须与<figcaption></figcaption>同级，且alt不可为空（装饰图除外），否则<img>在无障碍树中降级为纯装饰节点 -
<label for="id"></label>的绑定必须真实存在DOM中，CSS视觉对齐 + JS模拟点击 ≠ 可访问——TalkBack无法识别未声明的关联 - 所有触摸目标（按钮、链接）最小尺寸必须 ≥48×48px，这不是设计建议，是WCAG强制要求；
padding和font-size都要参与计算
轻量化≠删语义，删标签比加JS更危险
有人为压缩HTML体积，直接删掉 <label></label> 改用 <div onclick>，或把 <code><main></main> 替换为 <div id="main">——这看似省了几十字节，实则埋下三重隐患：屏幕阅读器无法识别交互意图；后续必须用JS补 <code>aria-label 和键盘事件；搜索引擎判定结构混乱，降低索引优先级。
真正有效的轻量化路径是：
- 删冗余
class名（如class="clearfix"已无必要）、废弃属性（align、border） - 用原生语义标签替代
<div role="..."> —— 一个 <code><button></button>比<div role="button" tabindex="0"> 少17个字符，且自带焦点管理、空格回车响应 <li>避免运行时拼接HTML字符串，尤其在React/Vue中：服务端输出的首屏HTML必须含完整语义，JS只负责状态更新，不负责结构生成</li> <li> <code><template></template>+customElements.define()是兼顾复用与轻量的正解——组件定义只执行一次，DOM片段在需要时才实例化，不污染初始HTML
最常被绕开的复杂点：标题层级断裂。页面从 <h2></h2> 开始、<main></main> 外堆了三个 <h1></h1>、小节用了 <h3></h3> 但主内容还没出现 <h2></h2> —— 这不是样式问题，是信息架构逻辑塌方，会导致所有依赖大纲的辅助技术集体失效。
