Question

我正在实现W3C's WCAG2.0 Techniques documentation中描述的跳到主要内容技术，但是在激活链接时我很难更新键盘焦点。（请注意，我正在使用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();

此功能的作用是首先从网址中提取hash并移除#;然后它检查哈希变量的值是否等于“main”;如果是这样它然后获取我们的id="main"元素，将其tabIndex设置为0以使其可聚焦，然后将其聚焦。

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

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

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

点击跳至主要内容链接后，skipToMainContent()功能会被正确触发，我的main元素会被tabIndex 0然而，它似乎没有得到集中。如果我在点击链接后点击标签键，则nav中的第一个互动元素会被重点关注。

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

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

Answer 1

根据您的评论，“window.location.hash”在点击时为空。

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

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

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应用更多内容，这取决于您。

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

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

1 个答案: