在“Top 10 Tips”类文章中，将编号标题（如“1. First tip name”）实现为 <ol> 中嵌套 <h2> 的 <li> 是完全符合 WCAG 1.3.1（信息与关系）的语义化做法，既保障屏幕阅读器正确解析结构，也不影响 SEO 爬取逻辑。
在“top 10 tips”类文章中，将编号标题（如“1. first tip name”）实现为 `
- ` 中嵌套 `
- ` 是完全符合 wcag 1.3.1（信息与关系）的语义化做法，既保障屏幕阅读器正确解析结构，也不影响 seo 爬取逻辑。
在构建结构化内容时，视觉呈现（如带数字的标题行）必须与底层 HTML 语义保持一致。WCAG 明确要求：若内容在逻辑上构成有序序列（例如排名、步骤、优先级列表），就必须使用 <ol> 元素进行标记——仅靠 CSS 生成数字（如 counter-reset）或纯文本编号（如 "1. "）无法传达顺序关系，将导致屏幕阅读器用户丢失关键上下文。
将标题嵌入 <li> 内部不仅合法，而且推荐。HTML5 规范允许 <li> 包含流内容（flow content），而 <h2> 属于此类；现代辅助技术（如 NVDA、VoiceOver、JAWS）能准确识别 <ol><li><h2>...</h2>...</li></ol> 的层级结构：列表项作为容器，标题作为该条目的主标识，正文内容为其附属信息。这不会“破坏文档大纲”——相反，它构建了清晰的嵌套语义：<ol> 表示整体序列，每个 <li> 是独立条目，其内部 <h2> 则自然成为该条目的层级锚点。
以下为推荐实现方式：
<ol> <li> <h2>First tip name</h2> <p>Blah blah — detailed explanation of the first tip.</p> </li> <li> <h2>Second tip name</h2> <p>Blah blah — detailed explanation of the second tip.</p> </li> <!-- 更多项... --> </ol>✅ 优势说明：
- 无障碍友好：屏幕阅读器会依次朗读“1. First tip name，级别2”，随后播报段落内容，逻辑连贯；
- SEO 健康：搜索引擎将 <h2> 正确识别为页面内二级标题，且因位于 <li> 中，天然具备上下文相关性（如“Tip #1 in Top 10 Tips”），反而增强语义权重；
- 样式灵活：可通过 CSS 精确控制编号样式（如 ol { counter-reset: item; } li { counter-increment: item; } li::before { content: counters(item, ".") ". "; }），无需牺牲语义。
⚠️ 注意事项：
- 避免在同一个 <li> 中混用多个同级标题（如 <h2> + <h3>），除非存在明确的子主题嵌套需求；
- 若每条提示包含多级子内容（如步骤、要点），应在 <li> 内部使用 <section> 或 <div> 组织，并为子标题选用恰当层级（如 <h3>），而非提升至 <h2>；
- 不要为规避“大纲混乱”而改用 <div> 模拟列表——这会直接违反 WCAG 1.3.1，造成严重可访问性缺陷。
总结而言，<ol> > <li> > <h2> 是兼顾语义、无障碍与 SEO 的黄金组合。内容创作者追求的“编号标题”效果，正应通过此结构实现——形式服从语义，才是现代 Web 可访问性的核心实践。
