Question

我有一个页面使用跳过链接来获取导航和内容，如下所示：

<a href="#content">Skip to content</a>

在内容区域内，我在两列中有多个帖子，这些帖子的阅读顺序是从左到右，然后是从上到下。但是帖子有两个列div，自然标签顺序不反映阅读顺序 - 我们使用tabindex属性解决了这个问题。

不幸的是，IE中存在问题。当用户单击skipto链接转到#content时，焦点会正确移动到那里;但是，下一个选项卡会将焦点移动到下一个没有正选项卡索引的元素。就像从tab键顺序中删除了正tabindex元素一样。

这个jsfiddle演示了这个问题：http://jsfiddle.net/grpr/qTy28/1/

有什么想法吗？

Answer 1

我最近遇到过这个问题，并为它找到了坚如磐石的解决方案。

背景：如果元素具有tabindex或者它是本机可聚焦元素，则元素只能。 Tabindex为0允许元素包含在页面的自然taborder中。 Tabindex为-1允许以编程方式放置焦点，但不在自然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;
};

这里也是一个小伙伴：http://jsfiddle.net/pfox/YRXq6/

使用跳过链接后忽略tabindex的元素

1 个答案: