辅助功能：主页导航包含h2，h1标题在下方

Question

考虑这个标记：

<!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>

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

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

然而，明显的预期轮廓是：

1. Page Title
  1. Home
  2. Other

实现此目的的天真的方法是将整个 nav“移动”到 [=15= 之后的某处，在 main 内部或之后。但这不是我想要我的页面的样子，我显然希望我的导航高于我的主页内容。当然，我可以使用 CSS 以某种方式将 nav 在视觉上向上移动，但这似乎也不正确。

我的问题是：对于这种“困境”，最常见但最容易获得的解决方案是什么？请注意，我绝对希望 nav 继续使用 h2（或任何其他标题级别），因为据我所知，这是推荐的“语义”方式。这样，导航链接也会显示在文档大纲中。有没有什么方法可以告诉屏幕 reader 或浏览器某些标题应该在文档大纲中“交换”位置，也许是通过某些 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>

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

Answer 1

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 class 将被描述为：

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

Answer 2

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

<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.

辅助功能：主页导航包含h2，h1标题在下方

Accessibility: Main page navigation contains h2, h1 heading is below

html

semantics

semantic-markup

html-heading