将键盘选项卡焦点设置到页面顶部/使用 JavaScript / jQuery 重置键盘焦点答案

【问题标题】：Set keyboard tabbing focus to the top of the page / resetting keyboard focus with JavaScript / jQuery将键盘选项卡焦点设置到页面顶部/使用 JavaScript / jQuery 重置键盘焦点
【发布时间】：2021-12-07 04:37:43
【问题描述】：

在努力使网站更易于访问时，我遇到了一个与大多数网站上都可用的“返回顶部”按钮有关的问题。我必须找到一个解决方案来滚动到顶部，然后将键盘焦点设置到页面顶部，这样用户就可以从顶部开始再次切换和导航。

首先，我直接在正文之后（以及在可访问的“跳转到内容”链接之前）添加了一个链接，该链接使用以下代码隐藏：

<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").on("click", function () {
            $("html, body").animate({scrollTop: $("html").offset().top}, 500);
            $("#hidden-top-of-the-page-link").focus();
        });

这个解决方案似乎很好用，虽然感觉很hacky。我真正想做的是“重置”页面上的键盘位置，并想知道是否有人知道这样做的好方法/最佳实践方法。

提前谢谢大家。

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

【问题讨论】：

在 Firefox 中你可以使用document.documentElement.focus()，但显然，这只适用于 Firefox...
你说要“重置页面上的键盘位置”是什么意思？您的意思是您只想让键盘焦点位于不可见的链接元素#hidden-top-of-page-link 上？还是您希望键盘焦点位于 HTML 标签上？
@George，我认为#hidden-top-of-page-link 是将键盘焦点放在顶部的解决方法。 OP 宁愿不必这样做，而是希望“将焦点放在顶部，就好像页面是新加载的一样”。
是的，@slugolicious 我的解决方法确实可以完成这项工作，但如果有内置的东西会很棒。

标签： javascript html jquery user-interface accessibility

【解决方案1】：

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

但是，您已经在顶部有一个很好的元素可以将焦点移到 - 您的“跳转到内容”链接 (WCAG 2.4.1)。 “返回顶部”元素可以是带有 href="#skipID" 的简单链接，其中“skipID”是“跳转到内容”链接上的 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，它会删除您的“空”链接，其唯一目的是放置键盘焦点。如果您保留“空”链接，那么屏幕阅读器用户仍然可以导航到该链接（不是通过 TAB 因为您有 tabindex="-1"，而是使用屏幕阅读器“下一个 DOM 元素”键，即通常是 downArrow 键），他们会听到“链接”，但没有其他与之相关的文本。那将是一个令人困惑的情况。

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

【讨论】：

虽然我喜欢这个想法（重用我们应该已经拥有的元素！），但它不会产生意想不到的后果，即您的“跳转到内容”链接随后将在移动设备或鼠标用户上可见，这可能是不希望的？如果不尝试，我无法确定这是否会发生，哈哈！
我认为“跳过链接”应该对（大多数）所有用户可见。也许不是鼠标用户，但如果他们看到它也没什么大不了的。绝对适合键盘和屏幕阅读器用户。移动用户值得怀疑。除非我是移动屏幕阅读器用户，否则我并不真正关心我对移动设备的“关注”。我通常可以点击页面顶部以滚动回顶部，此时，我并不真正关心我的焦点在哪里，因为我不会开始切换（除非我有蓝牙键盘）。看看关于移动用户是否使用“返回顶部”小部件的任何研究都会很有趣。
感谢您的回答，这里有很多值得思考的地方，尤其是我们为不同类型的用户处理跳过链接的方式。 @slugolicious 我明白你的意思，必须按下标签并听到“链接”这个词，这可能会让人讨厌。我会探索你的解决方案，看看我是否可以妥协！感谢您抽出宝贵时间。