防止浏览器重新定位通过制表符导航到的焦点元素

Question

当您使用 Tab 键（和 Shift + Tab）浏览表单元素或锚点时，浏览器会自动滚动到该焦点元素。如果元素不可见，因为它是溢出内容的一部分，溢出内容设置为隐藏，它会移动（或滚动）内容的容器以显示焦点元素。我想停止或找到一种方法来否定这种行为

我整理了一些内容来展示这个问题。我在 Chrome.

中转载了它

https://jsfiddle.net/charlieko/wLy7vurj/2/

var container = $("#container")
var cur = 0;

function go(increment) {
  var next = cur + increment;
  if (next < 0) next = 4;
  else if (next > 4) next = 0;
  cur = next
  var newX = cur * 500;
  container.css({
    transform: 'translate(-' + newX + 'px, 0)'
  })
}

$("#left").click(function(e) {
  go(-1);
});
$("#right").click(function(e) {
  go(1);
});

body {
  overflow: hidden;
}
#container {
  width: 2600px;
  overflow: none;
  transition: transform 0.4s;
  transform: translate(0, 0);
  overflow: hidden;
  margin: 0;
}
li {
  width: 500px;
  text-align: center;
  list-style-type: none;
  float: left;
  margin: 0;
  padding: 0;
}
a {
  color: black;
  font-size: 2.0rem;
}
#ui {
  position: fixed;
  top: 200px;
}
#ui span {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <ul>
    <li><a href="#">Link 1</a> | ABCD EFG</li>
    <li><a href="#">Link 2</a> | HIJK LMNO</li>
    <li><a href="#">Link 3</a> | PQRSTU VW</li>
    <li><a href="#">Link 4</a> | XYZA BC</li>
    <li><a href="#">Link 5</a> | DEFG HI</li>
  </ul>
</div>
<div id="ui">
  <div>
    <span id="left">Left</span>
    |
    <span id="right">Right</span>
  </div>
  <p>
    Use left and right to move. Issue: Use tab key (and shift+tab) to navigate to any of the links. The container of the links shift to show the focused link. Notice the content is decentered when it happens.
  </p>
</div>

问题是现在有两种滑动内容的方法：通过与左|右按钮交互以及通过在链接中切换。当用户选择使用选项卡进行导航时，它会打乱滑动逻辑。内容是去中心化的，我保存在变量中的索引不再代表屏幕上可见的内容。我可以使用 onFocus 事件以编程方式处理可访问性问题，因此这种自动行为没有任何帮助。

有没有办法阻止这种行为？我已经在锚元素的 onFocus 事件上尝试了 preventDefault() 方法。

Answer 1

Overflow:hidden 通常适用于需要滚动和移动的内容，因此很难防止这种情况发生。如果您希望 Tab 控件只停留在可见的东西上（包括任何按钮或更新滑块的 links），那么除了（或代替）之外，您还需要一种隐藏内容的不同方法）溢出。

尝试 display:none 列表项，直到它们位于 div#container 的 open/visible 部分内。这会将它们从 DOM 中移除（因此从键盘焦点中移除），直到您准备好为止。如果您创建一个名为 'hidden' 的 class，其中只有 display:none，那么您唯一需要的脚本是 add/remove 列表项中的 class当使用 Left/Right 控件时。我会编辑您的代码示例以进行演示，但我现在在一个小屏幕上。

那么问题是您的键盘用户无法访问 Left/Right 控件。如果您将它们更改为按钮或 link 元素，那么默认情况下它们将在每个浏览器中都支持键盘。然后，您的所有用户都依赖于您的 Left/Right 控件，无论他们使用的是鼠标还是键盘，这使您可以更好地控制它在每个阶段的外观。

Answer 2

您可以为链接设置 tabindex to -1 以避免聚焦。

Answer 3

我找到了解决办法。浏览器所做的是将溢出内容的直接父级滚动到该位置，以便焦点元素位于中心。只需修改父元素的 scrollLeft 属性即可。所以在 link 的 onFocus 事件中：

function onFocus (e) {
    document.getElementById('content-parent').scrollLeft = 0;
    // Code for repositioning the content itself using transform with transition animation
}

Answer 4

您可以为屏幕外的元素设置 tabindex="-1"。这是 MDN 建议的。

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

防止浏览器重新定位通过制表符导航到的焦点元素

Prevent browser from re-positioning focused elements navigated to via tabbing

html

javascript

css

accessibility

tabbing