我有一个使用跳过链接来访问导航和内容的页面，如下所示：
<a href="#content">Skip to content</a>
在内容区域内，我在两列中有许多帖子，这些帖子的阅读顺序是从左到右，然后从上到下。但是，帖子位于两列 div 中，并且自然的 tab 顺序不反映阅读顺序 - 我们使用 tabindex 属性解决了这个问题。
很遗憾，IE 中存在问题。当用户单击skipto 链接转到#content 时，焦点会正确移动到那里；但是，下一个标签会将焦点移到 下一个没有正标签索引的元素。就好像正 tabindex 元素已从 tab 顺序中删除。
这个 jsfiddle 演示了这个问题：http://jsfiddle.net/grpr/qTy28/1/
有什么想法吗？
【问题讨论】：
标签： html internet-explorer tabs focus accessibility
我最近遇到了这个问题，并找到了一个可靠的解决方案。
背景： 一个元素只有可以接收焦点，如果它有一个tabindex或者它是一个原生的焦点元素。 Tabindex 为 0 允许将元素包含在页面的自然 taborder 中。 -1 的 Tabindex 允许以编程方式放置焦点，但不能在自然 taborder 中。我强烈建议不要使用任何大于 0 的 tabindex 值。
不过，我发现最好的方法是使用一种方法来临时聚焦一个元素，然后在模糊时清理 tabindex。此外，维护元素上的任何原始 tabindex 属性也很重要。这是一个 jQuery 示例：
$.fn.access = function() {
var target;
target = $(this);
target.data('original-tabindex', target.attr('tabindex') || false);
target.attr('tabindex', '-1').on('blur focusout', function() {
if (target.data('original-tabindex') !== false) {
target.attr('tabindex', target.data('original-tabindex'));
} else {
target.removeAttr('tabindex');
}
target.off('blur focusout');
return target.data('original-tabindex', false);
}).focus();
return target;
};
这里还有一个 jsfiddle：http://jsfiddle.net/pfox/YRXq6/
【讨论】：