domcontentloaded不能作为首屏可用依据，因其仅表示dom构建完成，但弱网下js执行、cssom构建、字体加载、图片解码均滞后，导致用户虽见内容却无法点击、输入或导航，且屏幕阅读器与键盘焦点因语义缺失或动态插入而失效。
低速网络下，HTML 页面的可访问性不是“等加载完再用”，而是“先让关键内容可读、可操作、可导航”——这要求结构、资源、交互三者同步降级，而非只压缩图片或加 loading。
为什么 DOMContentLoaded 不能作为首屏可用判断依据
弱网下 DOM 解析快，但 JS 执行、CSSOM 构建、字体加载、图片解码都严重滞后。若把按钮绑定、表单初始化、焦点管理全堆在 DOMContentLoaded 里，用户看到空白页或静态占位符后，仍无法点击、输入、跳转——这不是加载慢，是“不可操作”。
- 屏幕阅读器在 DOM 就绪后立即开始遍历，但若
<main></main>里只有<div data-lazy="comments"></div>，它会读出“division”，而不是“评论区” - 键盘用户按 Tab 键时，焦点可能卡在未渲染的
<button></button>上（实际 DOM 存在但无样式/事件），导致“按键失灵”错觉 - 辅助技术依赖语义锚点（如
<main></main>、<nav></nav>）快速定位，但这些标签若被 JS 动态插入，初始无障碍树就缺失关键节点
如何用最小 DOM 支持基础导航与阅读
首屏可访问性的底线是：用户能用键盘 Tab 遍历标题、主图、核心按钮；屏幕阅读器能准确播报“这是文章标题”“这是提交按钮”，而不是“division”“generic”。
-
<main></main>必须唯一，且仅包裹 LCP 元素：一个<h1></h1>、一张<img loading="eager" alt="...">、一个<button></button>（带明确aria-label或可见文本） - 移除所有非必要 wrapper：比如
<div class="container"><div class="row"><div class="col">...</div></div></div>→ 直接用<main></main>+ CSS Grid/Flex 控制布局 - 用
<section></section>替代无标题的<div>，但必须配 <code><h2></h2>—— 否则屏幕阅读器无法建立大纲，用户无法用 H 键跳转小节 - 禁用
data-autoplay、data-init类自动行为；首屏外区域统一用语义化占位符：<div role="region" aria-label="评论区" data-lazy="comments"></div> - 所有 fetch 必须带
AbortController，超时设为1500ms；不要依赖onerror，改用catch()+ 显式状态标记 - 离线或弱网时，回退前先检查
navigator.onLine；若为false，直接启用内联 JSON 数据（如预置的空评论列表），并确保其包裹在<section aria-live="polite"></section>中以便读屏播报 - 关键 CSS 内联体积 ≤14KB（gzip 后），只含
<main></main>内元素的 layout、font-size、color；避免@import和复杂媒体查询，它们会阻塞渲染且无法动态卸载 - 字体加载失败时，用
font-display: swap+ 系统字体栈（如font-family: system-ui, -apple-system, sans-serif），保证文字始终可读、可选中、可缩放
关键资源加载失败时，如何维持可访问状态
fetch 失败或超时不是“重试”，而是“降级”：要提供内联 fallback，且 fallback 本身必须满足可访问基本要求。
真正难的不是写个 <main></main> 标签，而是在删掉 70% 的 DOM 后，仍让键盘用户能完成核心任务、让屏幕阅读器能说出正确语义、让网络恢复后不破坏已有状态——这需要把可访问性当成加载流程的一部分，而不是最后补的 ARIA 属性。
