大纲在 Firefox 上无法正常工作答案

【问题标题】：Outline not working properly on Firefox大纲在 Firefox 上无法正常工作
【发布时间】：2017-08-25 13:18:34
【问题描述】：

我正在尝试添加一些自定义大纲，以便获得一些 Web 可访问性建议。但我无法使用 Firefox。

这是它在 Chrome 上的外观：

那个图标实际上是一个锚。

在 Firefox 上，它只是概述整个文档，如下所示：

在 Firefox 上，它正在概述文档，在下一个选项卡中，它再次聚焦在搜索栏上。

在这里你可能会看到我做的 Codepen：https://codepen.io/maketroli/pen/owRWag

或代码片段：

// This function sets outline on tab and removes it on click
var elArr = Array.from ? Array.from(document.querySelectorAll("a")) : Array.prototype.slice.call(document.querySelectorAll("a")); // Fallback for IE because as usual nothing works there!

elArr.forEach(function(a) {
  return a.addEventListener("click", function() {
    $(a).addClass("no-outline").removeClass('custom-outline');
  });
});

elArr.forEach(function(a) {
  return a.addEventListener("focus", function() {
    $(a).removeClass("no-outline").addClass('custom-outline');
  });
});
// END

CSS

.wrapper {
  margin-top: 50px;
  display: flex;
}

a {
  border: 1px solid red;
  padding: 20px;
  margin-right: 10px;
}

.no-outline {
  outline: 0 !important;
}

.custom-outline:focus {
  outline: 2px dotted blue !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <a href="#">one</a>
  <a href="#">two</a>
  <a href="#">three</a>
</div>

有什么建议吗？

【问题讨论】：

Firefox 以正常的跳格顺序将文档作为选项卡索引包含在内：在某些时候，当在窗口周围跳动时，文档会获得焦点并被勾勒出来。这似乎与 Chrome 的行为方式不同。考虑浏览器差异后是否有问题？
您的 codepen 无法在移动设备上运行：根本没有大纲。
@LorenzMeyer 是的，这是一种常规行为。它不应该是移动设备上的大纲。
@Traktor53 问题不在于通过制表符关注文档。问题是，一旦它专注于文档，它就不会访问选项卡上文档中的其余锚点，它只是回到浏览器的搜索栏。那么，有解决办法吗？
无法在 Windows 7、Firefox 54.0.1 桌面下重现。将发布的代码放入 HTML 文档并单击搜索栏后，Tab 键会突出显示文档，然后依次概述每个链接。

标签： javascript jquery html css firefox

【解决方案1】：

你用的是mac吗？ OS X 有一个系统范围的偏好，Firefox 尊重（Chrome 没有），它改变了窗口和对话框中 tab 键的行为。它可能设置为仅对文本框进行制表符——跳过锚标记。

在“系统偏好设置”中搜索“全键盘访问”，您会找到它，或者参考下面的屏幕截图：

。

设置为“所有控件”以使 Firefox 的行为类似于 OSX 上的 Chrome。

【讨论】：