多个 header、footer 和 h1 元素：实际可访问的是什么？

Source: Dev.to

核心原则：语义胜于迷信

HTML 并不是一套脆弱的规则，稍微弯曲就会破坏可访问性。它是一种语义化语言，用于描述文档的结构。
关键问题不是 “我可以使用多少个这些元素？” 而是 “这些元素是否准确描述了内容的结构？”

多个 header 元素

是否允许？ 是的。一个文档中可以有多个 header 元素。header 表示其最近的分区祖先（如 body、main、article、section 或 nav）的引导内容。

示例

<header>
  <h1>Site name</h1>
</header>

<article>
  <header>
    <h2>Article title</h2>
  </header>

  <p>Article content…</p>
</article>

这种结构既是有效的 HTML，也是可访问的。每个 header 引入其所属的章节，屏幕阅读器会将标题显示为与其章节关联的结构性地标。

多个 footer 元素

是否允许？ 同样是的。和 header 一样，footer 元素也是分区范围的。footer 包含与其最近的祖先分区相关的信息（作者信息、相关链接、元数据等）。

示例

<article>
  <p>Post content…</p>

  <footer>
    <p>Written by Alex</p>
  </footer>
</article>

<footer>
  <p>© 2026 Example site</p>
</footer>

屏幕阅读器会将顶层 footer 宣告为地标；嵌套的 footer 被视为其所在章节的一部分，这是预期的行为。

多个 h1 元素

是否允许？ 强烈的肯定。HTML5 明确允许多个 h1 元素。每个 h1 代表其 分区上下文 的最高标题。

示例

<article>
  <h1>Article title</h1>

  <section>
    <h1>Introduction</h1>
    <p>…</p>
  </section>
</article>

<article>
  <h1>Another article</h1>

  <section>
    <h1>Overview</h1>
    <p>…</p>
  </section>
</article>

关于标题的真正可访问性问题

问题不在于 h1 的数量，而在于 标题层级是否合理。良好的标题结构反映内容层级，避免随意跳级，并清晰定义章节。

糟糕的标题结构

<h1>Main title</h1>

<h4>Subsection</h4>

跳过层级会让依赖标题导航的屏幕阅读器用户感到困惑。

屏幕阅读器与导航

许多辅助技术用户通过标题、地标或区域来导航页面。正确使用 header、footer 和标题级别可以实现更快的导航、清晰的页面心智模型以及可预测的阅读顺序。问题不在于数量，而在于 误表述。

实用指南

• 使用 header 和 footer 来引入或结束有意义的章节，而不是作为通用包装。
• 标题应反映页面的真实结构，而不是视觉样式的选择。
• 优先考虑清晰度，而不是僵硬或过时的规则，并使用屏幕阅读器测试标题导航。
• 如果结构对人类来说合理，通常对辅助技术也合理。

结论

当多个 header 和 footer 元素正确描述各自的章节时，它们既有效又可访问。多个 h1 元素也是被允许且常常合适的，尤其是在由不同文章或区域组成的文档中。

可访问性取决于提供清晰、合乎逻辑的层级结构，准确呈现内容，而不是计数元素。HTML 的可访问性最终是关于表达意义，而不是遵循神话或任意的约定。