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

Question

Whilst working on making a website more accessible I came across an issue regarding the 'Go back to the top' button that is available on most sites.在努力使网站更易于访问时，我遇到了一个关于大多数网站上都可用的“返回顶部”按钮的问题。 I had to find a solution to scroll to the top and then set the keyboard focus to the top of the page so users could start tabbing and navigating again from the top.我必须找到一个解决方案来滚动到顶部，然后将键盘焦点设置到页面的顶部，这样用户就可以从顶部开始再次使用 Tab 键和导航。

First I added a link directly after the body (and before my accessible 'skip to content' link) that is hidden using the following code:首先，我直接在正文之后（以及可访问的“跳转到内容”链接之前）添加了一个链接，该链接使用以下代码隐藏：

<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>

Then in my 'to top' button function I made this hidden link focus after calling my scroll event.然后在我的“到顶部”按钮功能中，我在调用滚动事件后使这个隐藏的链接成为焦点。

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

This solution seems to work great though feels quite hacky.这个解决方案似乎很好用，但感觉很hacky。 What I would really like to do would be to 'reset' the keyboard position on the page and was wondering if anyone knew a good way / best practice way to do that.我真正想做的是“重置”页面上的键盘位置，并想知道是否有人知道这样做的好方法/最佳实践方法。

Thanks in advance all.提前谢谢大家。

Note: Looked first on the question how to set focus on top of the page but all answers were focussed around scrolling which is not what I need help with here.注意：首先查看如何将焦点设置在页面顶部的问题，但所有答案都集中在滚动上，这不是我在这里需要帮助的。

Answer 1

I'm not aware of a way to make the page behave as if it were freshly loaded where the keyboard focus is at the top (other than forcing an actual page refresh, which I wouldn't recommend).我不知道有什么方法可以使页面表现得好像它是新加载的，键盘焦点位于顶部（除了强制实际页面刷新，我不推荐这样做）。

However, you already have a good element at the top to move the focus to - your "skip to content" link ( WCAG 2.4.1 ).但是，顶部已经有一个很好的元素可以将焦点移至“跳至内容”链接（ WCAG 2.4.1 ）。 The "back to top" element could be a simple link with href="#skipID" where "skipID" is the ID on the "skip to content" link. “返回顶部”元素可以是带有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>

That will let the browser handle the scrolling and move the keyboard focus.这将使浏览器处理滚动并移动键盘焦点。 You don't have to write any javascript and it removes your "empty" link whose only purpose is a place to put the keyboard focus.您不必编写任何 javascript，它会删除您的“空”链接，其唯一目的是放置键盘焦点的位置。 If you kept your "empty" link, then a screen reader user could still navigate to the link (not via TAB since you have tabindex="-1" but using the screen reader "next DOM element" key which is usually the downArrow key) and they would hear "link" but no other text associated with it.如果您保留了“空”链接，那么屏幕阅读器用户仍然可以导航到该链接（不是通过TAB，因为您有tabindex="-1"而是使用屏幕阅读器“下一个 DOM 元素”键，通常是向下箭头键) 并且他们会听到“链接”但没有其他与之相关的文本。 That would be a confusing situation.那将是一个令人困惑的情况。

As an aside, as a keyboard user myself I never use the "go to top" links provided on a page mainly because I have to navigate to that element which is usually the last thing in the DOM.顺便说一句，作为一名键盘用户，我从不使用页面上提供的“转到顶部”链接，主要是因为我必须导航到该元素，这通常是 DOM 中的最后一件事。 If I'm that far down in the DOM, I can just TAB a few more times and I'm back at the top anyway.如果我在 DOM 中的位置太低，我可以多按几次TAB ，无论如何我都会回到顶部。 Or I use the "put the focus on the address bar" shortcut key ( alt + D for firefox and chrome) and start TABBING from there.或者我使用“将焦点放在地址栏上”快捷键（对于 firefox 和 chrome， alt + D ）并从那里开始TABBING 。

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

问题描述

1 个解决方案

解决方案1
2 2021-10-20 14:18:58

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

问题描述

1 个解决方案

解决方案1 2 2021-10-20 14:18:58

解决方案1
2 2021-10-20 14:18:58