通过锚链接实现跳到主要内容技术时更新键盘焦点

Updating keyboard focus when implementing the skip to main content technique through an anchor link

本文关键字：技术 更新 焦点 键盘 链接 实现      更新时间：2023-09-26

我正在实现W3C的WCAG2.0技术文档中描述的跳到主要内容技术，但是在激活链接时我正在努力更新键盘焦点。（请注意，我正在最新的公共版本的Chrome上对此进行测试）。

首先，这是我的JavaScript函数：

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

这个函数所做的是首先从URL中提取hash并删除#;然后它检查哈希变量的值是否等于"main";如果是这样，它就会得到我们的id="main"元素，将其tabIndex设置为0以使其可聚焦，然后给予它焦点。

如果我访问http://example.com/#main，则会触发skipToMainContent()功能，并相应地设置我的键盘焦点。当我点击 tab 键时，main内容区域中的第一个交互式元素将聚焦。（请注意，如果没有此功能，Chrome 会将第一个交互式元素集中在页面上，因此此功能在这里肯定有效）。

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

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

单击我的"跳到主要内容"链接后，skipToMainContent()函数会适当触发，并且我的main元素被赋予0 tabIndex，但它似乎没有得到焦点。如果我在单击链接后按 Tab 键，则nav中的第一个交互元素将获得焦点。

我需要做什么来确保当我的"跳过"链接被点击时，我的main元素被聚焦？

请注意，在调用el.focus()之前，我已经尝试添加this.blur()和document.activeElement.blur()，但是有了这个，下一个重点元素再次是我的"跳过"链接。

从您的评论来看，"window.location.hash"在点击时为空。

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

此外，对于后代（以及以后发现这一点的人），我通常的解决方案是使用这样的东西：

HTML 跳过链接：

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

网页目标：

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

.JS：

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

.CSS：

main:focus {outline: 0;}

当然，你可以通过JavaScript应用更多，这取决于你。

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

相关文章：