当页面内容未包含且具有显式 tabindex 时，如何实现跳过导航 link？

Question

我有一个布局，其中包含页眉和导航栏，然后是页面内容，最后是页脚。

页面内容不包含在任何容器中，而是页眉、页脚和导航栏的同级内容。我无法将页面内容包装在 div.

中

我有一个跳过导航 link，它包含在页眉中，应该将焦点带到导航栏下方的页面内容。因为没有包含页面内容，导航栏下方有一个空的div，我用作锚点。

此方法适用于使用默认选项卡顺序的页面内容，但如果页面内容设置了 tabindex 属性，则在使用跳过导航 link 后点击选项卡不会跟随所需的选项卡订单。

有什么方法可以让我正确实现跳过导航 link，因为我无法将内容包装在 div 中，而且我不知道内容有非默认 Tab 键顺序？

请参阅下面的代码段；如果您跳转到 'Skip Navigation' 并按回车键，下一个 Tab 键将带您到所需 Tab 键顺序中的最后一个元素。

<!-- Header -->
<div style="height: 40px; background-color: rgb(120, 0, 120);">
    <a href="#" tabindex="1">Foo</a>
    <a href="#" tabindex="2">Bar</a>
</div>
<a href="#content" tabindex="3">
 <span>Skip Navigation</span>
</a>

<!-- Navigation Bar -->
<div style="height: 30px; background-color: rgb(190, 190, 30);">
    <input tabindex="4" />
</div>

<div id="content" tabindex="-1"></div>

<!-- Content -->
<div style="height: 80px; background-color: rgb(30, 190, 190);">
    <input tabindex="7" />
    <input tabindex="5" />
    <input tabindex="6" />
</div>

Answer 1

也许，一点点 js 是你的选择？

<a href="#content" tabindex="3"
   onfocus="focus_navigation()"
   onclick="skip_navigation(5)">
    <!-- 5 as next required tabindex after skipping -->
    <span>Skip Navigation</span>
</a>
<div id="content" tabindex="-1"></div>

<script>
  function skip_navigation(index) {
    var c = document.querySelector('#content')
    c.tabIndex=index;
    setTimeout(c.focus.bind(c), 100)
  }
  function focus_navigation() {
    document.querySelector('#content').tabIndex=-1
  }
</script>

如您所见，skip_navigation在点击时是运行，它将下一个需要的tabindex设置为content并聚焦它。

当页面内容未包含且具有显式 tabindex 时，如何实现跳过导航 link？

How can I implement a skip navigation link, when the page content isn't contained and has explicit tabindex?

html

tabindex