我正在实现 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
从 URL 中删除 #
;然后它检查散列变量的值是否等于“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
元素被赋予 tabIndex
的 0
,但是它似乎没有集中注意力。如果我在点击我的链接后按下 tab 键,我的 nav
中的第一个交互元素。而是专注于。
我需要做什么来确保当我的“跳过”链接被点击时,我的 main
元素有焦点吗?
请注意,我尝试同时添加 this.blur()
和 document.activeElement.blur()
打电话前 el.focus()
,但有了这个,下一个重点元素又是我的“跳过”链接。
最佳答案
根据您的评论,“window.location.hash”在点击时为空。
我还建议您应用 tabindex="-1"
而不是 0,这意味着 main 在 tab 顺序中。使用 -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 中可能会有所帮助。
关于javascript - 通过 anchor 链接实现跳转到主要内容技术时更新键盘焦点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19858001/