在其他标题下带有 <h1> 的正确 HTML 文档大纲答案

【问题标题】：Proper HTML document outline with <h1> under some other heading在其他标题下带有 <h1> 的正确 HTML 文档大纲
【发布时间】：2017-10-18 13:19:35
【问题描述】：

情况

在我的页面中，我有一个类似这样的标记：

<body>
    <header>
        <a>
            <img src="./logo.svg" />
            <span class="hide">Site name</span>
        </a>

        <nav>
            <h2>Main site navigation</h2>
            ...
        </nav>

        <section>
            <h2>Section title</h2>
            ...
        </section>
    </header>

    <main>
        <!-- This is the main page title. -->
        <h1>Page title</h1>

        <section>
            <h2>Another section title</h2>
            ...
        </section>
        ...
    </main>

    <footer>
        ...
    </footer>
</body>

屏幕上应呈现为：

----------------------------
* Logo          Navigation *
*                          *   // Header
*      Section title       * 
----------------------------
*        Page title        *
*                          *
*   Another section title  *   // Main
*            ...           *
*                          *
----------------------------
*            ...           *   // Footer
----------------------------

本文档的大纲如下所示，逻辑上不正确。

主站点导航
1. 章节标题
页面标题
1. 另一个章节标题

这种情况的问题是：

<h2>Main site navigation</h2> 被视为整个页面的标题，而<h1>Page title</h1> 应该是这个标题
<h2>Main site navigation</h2> 打开新的分节根，带有<h2>Section title</h2> 标题的节实际上被视为该根的子节（这在逻辑上不正确）。

问题

如何实现逻辑大纲？

页面标题
1. 主站点导航
2. 章节标题
3. 另一个章节标题

限制

我无法将<h1> 移到<main> 元素之外，因为它是<main> 容器布局的一部分，也是它的内容。

我能想到的唯一解决方案是将<main> 元素放在<header> 之前的代码中，并通过Flexbox CSS 属性order 将视觉定位标题放在顶部。这仍然不能令人满意，因为这会破坏 HTML 标记的逻辑顺序，这会导致奇怪的 tab 顺序行为（<main> 元素将首先被 tab 标记，尽管它们会在视觉上位于来自<header> 的元素下方）并且因为出于同样的原因，使使用屏幕阅读器的人更难访问网站。

我认为必须有一些更好、更直接的解决方案；尤其是我的场景似乎很常见。

【问题讨论】：

标签： html

【解决方案1】：

我能想到的唯一解决方案是将元素放入 Flexbox 之前的代码和顶部的视觉定位标题 CSS 属性顺序。

源排序是这种情况下的正确方法。就个人而言，我会给<main> 一个margin-top 和<header> 一个position: absolute，但flexbox 也可以完成这项工作。

这仍然不令人满意，因为这会破坏逻辑 HTML 标记的顺序，这会导致奇怪的 tab 顺序行为 ( 元素将首先被标记，尽管它们会是视觉上在来自 ) 的元素下，并且因为相同原因是让使用屏幕阅读器的人无法访问网站。

您说得对，在来源排序时，可访问性是一个重要的考虑因素。

解决办法是使用tabindex属性：

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

例如。将<header> 中的所有内容都提供给tabindex="0"，并将<main> 中的所有内容提供给tabindex="1"。

【讨论】：

如果这是唯一可能的解决方案，我可能会这样做。唯一的问题是它创建了一个额外的要求来添加tabindex=1 到<header> 中的每个元素，特别是对于将来可能添加到那里的元素 - 它可能很容易被遗忘/省略，特别是如果其他一些开发人员会工作在那个代码上。
您可以通过在DOMContentLoaded 上运行脚本来自动执行此操作，该脚本循环通过[... document.querySelectorAll('header *')]，在每个元素上设置.tabIndex 到1。