通过锚链接实现跳转到主内容技术时更新键盘焦点 [英] Updating keyboard focus when implementing the skip to main content technique through an anchor link

问题描述

我正在实现跳转到主要内容技术=nofollow> W3C的WCAG2.0技术文档，但是在激活链接时我很难更新键盘焦点。 （请注意，我在Chrome的最新公开版本上测试了这一点。）

I'm implementing the skip to main content technique described in W3C's WCAG2.0 Techniques documentation, however I'm struggling to update the keyboard focus when activating the link. (Note that I'm testing this on the latest public version of Chrome).

首先，这是我的JavaScript函数：

Firstly, here is my JavaScript function:

function skipToMainContent() {
    var hash = window.location.hash.substring(1);
    if (hash === "main") {
        var el = document.getElementById(hash);
        el.tabIndex = 0;
        el.focus();
    }
}
skipToMainContent();

这个函数的作用首先是拉哈希从URL中删除＃;然后它检查哈希变量的值是否等于main;如果是这样它然后得到我们的 id =main元素，将其 tabIndex 设置为0以使其可聚焦，然后给予关注。

What this function does is firstly pull the hash from the URL and remove the #; then it checks if the value of the hash variable is equal to "main"; if so it then gets our id="main" element, sets its tabIndex to 0 to make it focusable and then gives it focus.

如果我访问 http://example.com/#main ， skipToMainContent（）触发函数并相应地设置我的键盘焦点。当我点击 tab 时，我的 main 内容区域中的第一个互动元素将被聚焦。 （请注意，如果没有此功能，Chrome会将第一个互动元素集中在页面上，因此此功能绝对适用于此。）

If I visit http://example.com/#main, the skipToMainContent() function is fired and my keyboard focus is set accordingly. When I hit tab the first interactive element within my main content area is focussed. (Note that without this function, Chrome will focus the first interactive element on the page instead, so this function definitely works here).

但是当我尝试触发此功能时通过我页面上的链接，以上内容不适用：

However when I attempt to trigger this function through a link on my page, the above does not apply:

<a href="#main" onclick="skipToMainContent()">
    Skip to Main Content
</a>
<nav>...</nav>
<main role="main" id="main">...</main>

点击跳至主要内容链接后， skipToMainContent（）函数被适当地触发，我的 main 元素被赋予 tabIndex 0 ，但它似乎没有集中注意力。如果我在点击链接后点击标签键，我的 nav 中的第一个互动元素会被重点关注。

Upon clicking my Skip to Main Content link, the skipToMainContent() function is fired appropriately and my main element is given a tabIndex of 0, however it doesn't appear to get focussed. If I hit the tab key after clicking my link the first interactive element within my nav is focussed instead.

我需要做些什么才能确保点击跳过链接时，我的主元素会被关注？

What do I need to do to ensure that when my "skip" link is clicked, my main element is focussed?

请注意，我已尝试添加 this.blur（）和 document.activeElement.blur（） el.focus（）之前code>，但是有了这个，下一个焦点元素又是我的跳过链接。

Note that I've tried adding both this.blur() and document.activeElement.blur() before calling el.focus(), but with this the next focussed element was my "skip" link again.

推荐答案

从您的评论中，'window.location.hash'在点击时为空。

From your comment, 'window.location.hash' is empty on click.

我还建议您应用 tabindex = - 1而不是0，这意味着主要是在Tab键顺序中。使用-1意味着您可以以编程方式关注元素，但它不是默认顺序。

I would also suggest that you apply tabindex="-1" rather than 0, which means the main is in the tab-order. Using -1 means you can programmatically focus on the element, but it is not in the default order.

此外，对于后代（以及后来发现此事的人）我的解决方案将使用这样的东西：

Also, for posterity (and people finding this later) my generally solution would be to use something like this:

HTML跳过链接：

<a href="#main" id="skiplink">Skip to content</a>

HTML目标：

<main role="main" id="main" tabindex="-1">

JS：

$("#skiplink").click(function() {
    $('main').focus();
});

CSS：

main:focus {outline: 0;}

您当然可以申请更多通过JavaScript，这取决于你。

You can of course apply more of that through JavaScript, that's up to you.

将tabindex属性放在HTML中可能会有所帮助。

It might help to put the tabindex attribute in the HTML.

这篇关于通过锚链接实现跳转到主内容技术时更新键盘焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！