可访问性：主页导航包含 h2，下面是 h1 标题答案

【问题标题】：Accessibility: Main page navigation contains h2, h1 heading is below可访问性：主页导航包含 h2，下面是 h1 标题
【发布时间】：2022-01-06 19:46:51
【问题描述】：

考虑这个标记：

<!doctype html>
<html>

    <head>
    </head>

    <body>
        <header>
            <nav>
                <ul>
                    <li>
                        <a href="/">
                            <h2>Home</h2>
                        </a>
                    </li>
                    <li>
                        <a href="/other">
                            <h2>Other</h2>
                        </a>
                    </li>
                </ul>
            </nav>
        </header>
        <main>
            <h1>Page Title</h1>
        </main>
    </body>

</html>

这个标记“很好”，但如果我理解正确的话，它既不易于访问，也不在语义上正确/推荐。问题在于 h2 出现在 h1 之前，这会造成令人困惑的文档大纲：

1. Untitled BODY
  1. Home
  2. Other
2. Page Title

但明显的预期轮廓是：

1. Page Title
  1. Home
  2. Other

实现这一点的天真方法是将整个nav“移动”到h1 之后的某个位置，或者在main 内部或之后。但这不是我希望我的页面看起来的样子，我显然希望我的导航高于我的主页内容。当然，我可以使用 CSS 以某种方式在视觉上向上移动 nav，但这似乎也不正确。

我的问题是：对于这种“困境”，最常见但最容易获得的解决方案是什么？请注意，我绝对希望nav 继续使用h2（或任何其他标题级别），据我所知，这是推荐的“语义”方式。这样，导航链接也将显示在文档大纲中。有没有办法告诉屏幕阅读器或浏览器某些标题应该在文档大纲中“交换”位置，也许是通过一些aria- 属性？有没有我想念的替代品？

我想到了一个解决方案，但对我来说“感觉”不对：

<!doctype html>
<html>

    <head>
    </head>

    <body>
        <header>
            <h1>
                Page Title
            </h1>
            <nav>
                <h2>
                    Page Navigation
                </h2>
                <ul>
                    <li>
                        <a href="/">
                            <h3>Home</h3>
                        </a>
                    </li>
                    <li>
                        <a href="/other">
                            <h3>Other</h3>
                        </a>
                    </li>
                </ul>
            </nav>
        </header>
        <main>
            <h2>Main Content Title</h2>
        </main>
    </body>

</html>

这感觉有点冗长，但至少会产生正确的文档大纲。这真的是解决我问题的唯一方法吗？

【问题讨论】：

不要在这里使用h 标签。这不符合语义，也不正确。您的 nav 元素对于可访问性很重要。导航链接的样式您想要的方式 - 没有这些标签。 请注意，我绝对希望导航继续使用 h2（或任何其他标题级别），因为据我所知，这是推荐的“语义”方式。这是错误的。
所以您认为导航项不应该出现在文档大纲中？ @disinfor
导航不需要在文档大纲中。文档大纲用于显示实际内容的内容树。事实上，在文档大纲中使用导航可能会导致混乱，因为用户会看到与阅读无关的元素。事实上，您应该在菜单之前包含一个链接，以便跳到将包含在文档大纲中的内容。这真的不是意见 - 而是正确使用文档大纲。
好吧，看起来有道理。

标签： html semantics semantic-markup html-heading

【解决方案1】：

标记此类内容的正确方法（在语义和可访问性方面）如下——

<header>
  <nav aria-label="Main Navigation">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Lorem</a></li>
      <li><a href="#">Ipsum</a></li>
    </ul>
  </nav>
</header>
<main>
  <h1>Page Title</h1>
  <p>Additional page content...</p>
</main>

导航项不应标记为标题。一个链接列表是所有必要的。 See this example from the Mozilla documentation on the navigation element.

如果您想为辅助技术的导航添加隐藏标签，您可以将aria-label 属性添加到<nav> 元素，详见this example from the W3C Accessibility Guidelines Working Group。此外，这种方法避免了需要乱序添加标题。

最后，请务必将文档标题 (<h1>) 包含在 <main> 元素中，如 this example from the Mozilla documentation on the main element。

【讨论】：

【解决方案2】：

https://www.accessibility-developer-guide.com/examples/headings/visually-hidden-headings/ 正在回答我在这里的大部分问题。

事实证明，只需将您不想显示但由屏幕阅读器阅读的标题移出屏幕即可。这样也可以实现正确的文档大纲，而不会在视觉上显得冗长。

从现在开始我可能会使用的解决方案是：

<!doctype html>
<html>

    <head>
    </head>

    <body>
        <header>
            <h1 class="visually-hidden">
                Page Title
                <!-- this can also just contain a logo -->
            </h1>
            <nav>
                <h2 class="visually-hidden">
                    Page Navigation
                </h2>
                <ul>
                    <li>
                        <a href="/">
                            <h3>Home</h3>
                        </a>
                    </li>
                    <li>
                        <a href="/other">
                            <h3>Other</h3>
                        </a>
                    </li>
                </ul>
            </nav>
        </header>
        <main>
            <h2>Main Content Title</h2>
        </main>
    </body>

</html>

visually-hidden 类将被描述为：

.visually-hidden {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

【讨论】：

正如@disinfor 指出的那样，标题元素不应用于导航项。从语义上讲，它们应该只是列表中的锚。