应使用语义化标签划分逻辑内容块，每个必须含–标题且层级连续、id唯一；图片需配描述性alt和/
用 <section></section> 而不是 <div> 划分逻辑内容块
<p>屏幕阅读器依赖语义化标签识别内容结构，<code><div> 没有隐含含义，而 <code><section></section> 明确表示“一个主题独立的内容区域”。比如长图文里的「背景」「方法」「结果」「讨论」四部分，每个都该用 <section></section> 包裹，而非统一套 <div class="block">。
<p>注意：不要为样式或布局目的滥用 <code><section></section>。它必须有标题（<h2></h2>–<h6></h6>），否则会破坏可访问性树。没有标题的 <section></section> 会被屏幕阅读器忽略或报错。
- ✅ 正确：
<section><h2>实验步骤</h2>
<p>...</p></section>
- ❌ 错误：
<section><p>这只是个说明段落</p></section>（缺标题）
- ⚠️ 避免嵌套过深：连续三层
<section></section> 容易让辅助技术用户迷失层级，建议最多两层（主节 + 子节）
确保每个 <section></section> 都有唯一且描述性的 <h2></h2>–<h6></h6>
<section><h2>实验步骤</h2>
<p>...</p></section>
<section><p>这只是个说明段落</p></section>（缺标题）<section></section> 容易让辅助技术用户迷失层级，建议最多两层（主节 + 子节）<section></section> 都有唯一且描述性的 <h2></h2>–<h6></h6>
标题不仅是视觉锚点，更是屏幕阅读器的导航入口。跳过标题层级（比如从 <h2></h2> 直接跳到 <h4></h4>）会导致结构断裂，JAWS 或 NVDA 可能无法正确列出大纲。
长图文里常见错误是用 CSS 隐藏标题（display: none 或 visually-hidden 类但未配 aria-label），这会让内容对辅助技术完全不可见。
- ✅ 推荐写法：
<h2 id="sec-methods">数据采集方法</h2>，配合@#@#@#@#@#@#@#@#@#@0 - ❌ 禁止写法：
<h2 style="display:none">方法</h2>（彻底隐藏） - ⚠️ 注意：同一页面内
id必须唯一；重复的id会让aria-labelledby或锚点跳转失效
给图片、图表、公式添加有意义的 alt 和 <figure>/<figcaption></figcaption></figure>
长图文常含流程图、统计图、数学推导等，单纯写 alt="图1" 对视障用户毫无价值。应描述其功能与结论，例如：alt="柱状图：2023年三组受试者平均反应时对比，干预组（128ms）显著低于对照组（215ms）和安慰剂组（197ms）"。
<figure></figure> 是语义化容器，把图与其说明绑定，屏幕阅读器会将其作为整体读出。若说明文字较长，可用 <details></details> 折叠，但必须确保初始状态可访问（不依赖 JS 展开）。
- ✅ 推荐：
<figure><img src="flow.png" alt="系统处理流程：用户输入→API校验→缓存查询→数据库回源→返回JSON"><figcaption>图3：后端请求处理流程图</figcaption></figure> - ❌ 错误：
<img src="chart.jpg" alt="">（空 alt）或alt="chart"（无信息） - ⚠️ 公式慎用图片：优先用 MathML 或
aria-label包裹 LaTeX 字符串，否则需在alt中逐项读出运算关系
避免用纯 CSS 实现分页或“阅读进度条”干扰辅助技术
有些长图文加了“滚动触发动画”或“右侧固定目录”，看似提升体验，实则打断屏幕阅读器的线性流。当 DOM 结构未变化而仅靠 transform 或 opacity 控制显隐时，辅助技术仍会读取全部内容，导致重复播报或跳读。
真正的可访问分块，靠的是结构标记 + 键盘导航支持，而不是视觉动效。
- ✅ 可行方案：用
<nav aria-label="文章目录"></nav>包裹内部<a href="#sec-xxx"></a>，并确保所有目标id在 DOM 中真实存在且可聚焦 - ❌ 风险操作：用
IntersectionObserver动态加载内容块却未同步更新aria-live，用户无法感知新内容已载入 - ⚠️ 关键细节：禁用
tabindex="-1"在非交互元素上——它会切断键盘焦点流，让键盘用户无法抵达后续<section></section>
最常被忽略的其实是标题层级一致性与 id 的手工维护成本：自动生成工具（如 Markdown 转 HTML）常把所有二级标题输出为 <h2></h2>，却不检查是否重复或是否遗漏了子节标题。人工校验仍不可替代。
