必须让屏幕在1秒内显示可操作、可理解、可朗读的内容；html需语义完整自包含，首屏内容写死在初始html中，禁用data-lazy包裹关键元素，图片视频等须提供无js替代路径，动态内容需保留a11y锚点与状态提示，document.title和meta description必须服务端渲染。
不能靠“等加载完再显示”，必须让屏幕在 1 秒内有可操作、可理解、可朗读的内容。 可访问性（a11y）在弱网下不是锦上添花，而是降级底线：当 fetch 超时、JS 失效、CSS 未加载、屏幕阅读器已启动时，页面仍需提供语义结构、焦点顺序和基础交互能力。
HTML 结构本身必须是语义完整且自包含的
弱网下 JS 和 CSS 加载滞后，但 、、<main></main>、<h1></h1>、<button></button> 这些原生标签始终可用。任何依赖 JS 挂载的“结构”都会导致屏幕阅读器跳过或报错。
- 所有首屏内容必须写死在初始 HTML 中，禁用
data-lazy包裹关键导航、主标题、核心表单控件 -
<nav></nav>必须含真实<a href></a>，不能只留<div class="nav-item"> 等 JS 渲染占位符 <li>表单 <code><input>必须带name、id、aria-label或<label for></label>，不可靠 JS 补全 - 禁用
display: none隐藏关键节点——它会直接从 a11y tree 中移除；改用visibility: hidden+position: absolute+clip-path实现视觉隐藏但保留可访问性 - 底图必须是真实
<img src="lqip.jpg" alt="描述文字">，而非<div style="max-width:90%"> <li>高清图替换不能只靠 JS 修改 <code>src—— 必须同步更新alt（如有变化）、重发load事件，并确保role="none"的占位容器不干扰焦点流 - 对 SVG 图标，避免用
<use href="#icon"></use>引用外部 sprite；弱网下#icon可能未加载，应内联关键图标或 fallback 到<img src="icon.svg" alt="..."> - 视频/音频控件必须含原生
<video controls></video>，禁用自定义 JS 控件包裹；否则无障碍键盘操作（空格播放、←→调节）全部失效 - 占位容器必须是语义化元素：
<section aria-labelledby="comments-label"><h2 id="comments-label">评论</h2> <p role="status">正在加载评论...</p></section> - 加载成功后，用
replaceChildren()替换整个<p role="status"></p>，而非 append —— 避免焦点停留在旧节点 - 若加载失败，显示
<button onclick="retryComments()">重试</button>，并用aria-live="polite"向屏幕阅读器播报错误 - 所有动态插入的按钮、链接必须带
tabindex="0"（若非原生可聚焦元素），并手动管理焦点（如button.focus()）
图片与媒体必须提供无 JS 的替代路径
渐进式图片（LQIP → 高清图）若仅靠 JS 切换 src 或 class，会导致屏幕阅读器读不到 alt、无法触发 onload 事件、甚至卡在 loading 状态。
动态内容挂载前必须保留 a11y 锚点与状态提示
非首屏模块（如评论区、推荐列表）延迟加载时，若只留一个空 <div data-lazy="comments"></div>，屏幕阅读器会跳过，键盘用户无法 tab 进入，也无加载状态反馈。
最常被忽略的一点：弱网下 document.title 和 <meta name="description"> 不能由 JS 设置。搜索引擎、分享卡片、语音助手都依赖初始 HTML 中的这两个字段，它们必须在服务端渲染完成，且与首屏 LCP 内容一致——否则用户还没看到页面，就已经被错误摘要误导了。
