将键盘 Tab 键焦点设置到页面顶部/使用 JavaScript / jQuery 重置键盘焦点

Question

在努力使网站更易于访问时，我遇到了一个与大多数网站上可用的 'Go back to the top' 按钮有关的问题。我必须找到一个解决方案来滚动到顶部，然后将键盘焦点设置到页面顶部，以便用户可以再次从顶部开始 Tab 键和导航。

首先，我直接在正文之后添加了一个 link（在我可访问的 'skip to content' link 之前），它使用以下代码隐藏：

<body>
    <a id="hidden-top-of-the-page-link" tabindex="-1"></a>
    <a class="skip-to-content-link" tabindex="0" href="#main-content">Skip to content</a>

然后在我的 'to top' 按钮功能中，我在调用我的滚动事件后隐藏了 link 焦点。

$("#to_top").on("click", function () {
            $("html, body").animate({scrollTop: $("html").offset().top}, 500);
            $("#hidden-top-of-the-page-link").focus();
        });

这个解决方案似乎工作得很好，但感觉很老套。我真正想做的是 'reset' 页面上的键盘位置，想知道是否有人知道这样做的好方法/最佳实践方法。

提前谢谢大家。

注：首先查看问题 how to set focus on top of the page，但所有答案都集中在滚动上，这不是我需要帮助的地方。

Answer 1

我不知道有什么方法可以让页面在键盘焦点位于顶部时表现得像刚加载一样（除了强制实际页面刷新，我不推荐这样做）。

但是，您已经在顶部有一个很好的元素可以将焦点移至 - 您的“跳至内容”link (WCAG 2.4.1)。 “返回顶部”元素可以是一个简单的 link 和 href="#skipID"，其中“skipID”是“跳到内容”link.

上的 ID

<body>
  <a id="skipID" class="skip-to-content-link" tabindex="0" href="#main-content">Skip to content</a>
...
  <a href="#skipID">Go to top</a>

这将使浏览器处理滚动和移动键盘焦点。您不必写任何 javascript，它会删除您的“空”link，其唯一目的是放置键盘焦点。如果您保留“空”link，那么屏幕 reader 用户仍然可以导航到 link（而不是通过 TAB，因为您有 tabindex="-1" 但使用屏幕 reader “下一个 DOM 元素” 键通常是 downArrow 键）他们会听到“link " 但没有其他与之关联的文本。那将是一个令人困惑的情况。

顺便说一句，作为键盘用户我自己从不使用页面上提供的“转到顶部”link，主要是因为我必须导航到该元素，这通常是页面中的最后一个元素DOM。如果我在 DOM 中落后那么多，我可以再 TAB 几次，无论如何我又回到了顶部。或者我使用“将焦点放在地址栏”快捷键（alt+D for firefox 和 chrome）并开始TABBING 从那里开始。

将键盘 Tab 键焦点设置到页面顶部/使用 JavaScript / jQuery 重置键盘焦点

Set keyboard tabbing focus to the top of the page / resetting keyboard focus with JavaScript / jQuery

html

javascript

jquery

user-interface

accessibility