时间戳

首页 > 解决方案 > 出于可访问性目的，应如何在全局元素中处理标题？

html - 出于可访问性目的，应如何在全局元素中处理标题？

问题描述

在许多设计中，许多标题可能出现在网站的页眉、页脚或其他全局元素中。一个示例是在页脚中表示“联系我们”、“我们的地址”和类似部分，或在页眉中表示标语。

在这些情况下，我历来倾向于使用<h6>元素，因为它们是优先级最低的标题，因此我认为最适合这个用例。

然而，我最近开始尝试改善我的项目的可访问性，我发现基本上每个自动化的 a11y 测试工具都说这不是正确的方法。我经常收到错误消息，指出“标题结构不是逻辑嵌套”，因为<h6>要么出现在任何其他标题之前（对于页眉中的标语），要么从较早的标题跳转到<h6>（对于页脚标题，当其余内容在小于<h5>) 之后停止。

我只是将<h6>页眉和页脚中的<p>样式更改为与原始设计相匹配，但这对我来说似乎不正确——页脚中带有标题的每个部分不应该用实际标题表示吗？

在页面的全局元素中表示标题以确保可访问性的适当方法是什么？

标签： htmlaccessibilitysection508wcagwcag2.0

解决方案

通过使用站点名称作为顶级标题，典型站点可以具有逻辑标题大纲。页面上的一切都属于站点，页面的主要内容以及站点导航以及页脚等。

<h1>Site name</h1>

  <h2>Site navigation</h2>

  <h2>Page main content</h2>

  <h2>Contact us</h2>

  <h2>Our address</h2>

（请注意，标语不应是标题。）

使用 HTML5，您可以使各个部分显式（article, aside, nav, section），并传达每个部分是 ( header, main, footer) 的一部分：

<body>

  <header>
    <h1>Site name</h1>
    <p>Site tagline</p>

    <nav>
      <h2>Site navigation</h2>
      <!-- heading not necessarily needed -->
    </nav>
  </header>

  <main>
    <article>
      <h2>Page main content</h2>
    </article>
  </main>

  <footer>
    <section>
      <h2>Contact us</h2>
    </section>
    <section>
      <h2>Our address</h2>
    </section>
  </footer>

</body>

（如果页脚由许多部分组成，则在可能的情况下引入分组标题/部分是有意义的，例如，在此示例中为“联系人”。也就是说，并非每个页脚都需要以部分/标题开头，尤其是在内容相当薄或不那么重要。）

推荐阅读