优化长网页可访问性需用和划分区块、严格标题层级（唯一、禁跳级）、添加“跳至主内容”链接并管理焦点，配合列表/表格语义化与aria实时反馈。
长网页对屏幕阅读器用户和低视力用户尤其不友好——滚动迷失、跳过重复区块困难、找不到重点内容，是真实存在的障碍。直接用语义化标签 + 键盘导航支持 + ARIA 实时反馈，就能解决大部分问题，不需要重写整个页面。
用 <main></main> 和 <section></section> 划分内容区块
浏览器和屏幕阅读器能识别这些标签，并提供“跳到主要内容”“跳到下一个章节”的快捷导航。如果全页堆 <div>，辅助技术就只能逐行读，用户得听完整页才能知道哪段是正文。
<ul>
<li>
<code><main></main> 必须且只能出现一次，包裹页面核心内容（排除 header、nav、footer）
<section></section> 每个应有 <h2></h2> 或更高级别标题，否则会被视为无意义容器<section></section> 容易让屏幕阅读器用户失去上下文<section></section> 替代 @#@#@#@#@#@#@#@#@#@0，配合 CSS .skip-link:focus { position: absolute; left: 4px; top: 4px; }
<main id="main"> 必须带 <code>id，且该 id 在页面唯一document.getElementById('main').focus() 确保焦点落到新区块起始处tabindex="0" 在非交互元素上——它会把无关容器塞进 Tab 流，反而干扰导航长列表与表格的无障碍处理
文档类长页常含大量列表（目录、步骤、FAQ）或数据表格。它们本身不是障碍源，但缺乏标记就会变成“黑箱”。
- 无序/有序列表必须用
<ul></ul>或<ol></ol>包裹，不能用<div> + CSS 模拟；否则屏幕阅读器读不出“共 12 项，当前第 3 项” <li>长表格必须有 <code><thead> 和 <code><th scope="col"> / <code><th scope="row">，否则行列关系无法被解析 <li>超过 50 行的表格建议加“冻结表头”或分页控件，并用 <code>aria-live="polite"包裹更新区域，告知用户“已加载第 2 页” - FAQ 类折叠列表，展开按钮需带
aria-expanded="true/false"和aria-controls="target-id"
真正难的不是写对几个标签，而是保持整页结构一致性——比如某处用了 <section></section>，另一处却回到 <div class="section">，这种混用会让所有前期努力失效。检查只需三步：打开 Chrome DevTools → Elements 面板 → 扫一眼顶层标签是否合理；按 Tab 键走一遍焦点流；用屏幕阅读器朗读前两屏。问题通常就暴露了。</div>
