Question

情况

在我的页面中，我有一个与此类似的标记：

<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>元素将首先被标记，尽管它们在视觉上位于{{1}的元素之下因为同样的原因，使用屏幕阅读器的人不能访问网站。

我认为必须有一些更好，更直接的解决方案;特别是我的情景似乎是一个非常普遍的情况。

Answer 1

我能想到的唯一解决方案是将元素放入之前的代码和Flexbox上的可视定位标题 CSS属性订单。

在这种情况下，

源排序是正确的方法。就个人而言，我会<main> margin-top和<header> position: absolute，但flexbox也可以。{/ p>

这仍然不令人满意，因为这会打破逻辑 HTML标记的顺序，这将导致奇怪的Tab顺序行为（元素将首先被标记，但它们将是在视觉上的元素来自）和因为相同原因使得使用屏幕阅读器的人无法访问网站。

在源订购时，可访问性是一个重要的考虑因素。

解决方案是使用tabindex属性：

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

例如：在<header> tabindex="0"中提供所有内容，并在<main> tabindex="1"中提供所有内容。

在其他标题

情况

问题

限制

1 个答案: