符合WGAC sequentially-descending order要求的长文HTML标题层级最佳实践咨询

• 优先优化内容结构
  HTML原生仅提供h1~h6共6级标题，WCAG的标题顺序降序规则要求不能出现跳级（如h2后直接接h4）。如果不是极端复杂的专业文献，优先调整内容逻辑，合并同层级的子主题，将整体标题层级压缩到6级以内，是兼容性最好、实现成本最低的方案。
• 确需超过6级层级的两种合规实现方案
  1. section嵌套配合隐式大纲
     整个文章外层用<article>标签包裹，内部不同层级的章节用<section>标签嵌套，每个<section>的首元素用<h1>作为标题。主流屏幕阅读器会自动根据<section>的嵌套深度识别标题的逻辑层级，不受原生h标签数量限制。示例结构如下：

  <h1>页面总标题</h1>
  <article>
    <section>
      <h1>第一章（逻辑层级等同于h2）</h1>
      <p>章节内容</p>
      <section>
        <h1>1.1 小节（逻辑层级等同于h3）</h1>
        <p>小节内容</p>
        <section>
          <h1>1.1.1 子项（逻辑层级等同于h4）</h1>
          <!-- 可无限嵌套，层级依次递增 -->
        </section>
      </section>
    </section>
  </article>
  

  2. ARIA显式标注标题层级
     如需更好的兼容老旧辅助技术，可使用role="heading"配合aria-level属性自定义标题层级，数值可超过6，只要保证数值依次递减不跳级，就符合WCAG规范要求。示例如下：

  <h1>总标题</h1>
  <h2>一级子标题</h2>
  <!-- 中间层级依次类推 -->
  <h6>第6级标题</h6>
  <div role="heading" aria-level="7">第7级标题</div>
  <div role="heading" aria-level="8">第8级标题</div>
  

• 禁止直接统一使用h2标签：该做法会完全破坏页面的内容逻辑大纲，屏幕阅读器用户无法识别内容的层级从属关系，直接违反WCAG的可访问性要求。

内容的提问来源于stack exchange，提问作者Marc Rasmussen