如何在不损害可访问性的情况下删除 Firefox 链接中的虚线轮廓？

Posted 2023-03-06

【中文标题】如何在不损害可访问性的情况下删除 Firefox 链接中的虚线轮廓？

【英文标题】：How do you remove the dotted outline in Firefox links WITHOUT harming accessibility?

【发布时间】：2016-05-06 07:00:32

【问题描述】：

关于如何在 Firefox 中删除 javascript / ajax 链接上的虚线轮廓有很多问题/答案，但他们都建议将 outline 属性设置为 0，这会损害可访问性。此外，它回避了问题：Firefox 的焦点行为是问题，而不是焦点的样式。

在 Chrome 中，单击 ajax 链接不会产生焦点。它仅在您开始跳动时才开始聚焦。另一方面，Firefox 会在您单击鼠标时主动设置焦点。

有没有办法让 Firefox 在通过鼠标点击设置焦点时表现得更像 chrome，而不必通过将 outline 设置为 none 或 0 来牺牲可访问性。

可以在http://news.yahoo.com 上看到这种效果的示例。在 FF 中，如果您向下单击左侧的链接（但在单击释放之前将鼠标从链接上移开），您将看到虚线轮廓。在 chrome 中，如果你这样做，你将看不到轮廓，但一旦你开始点击 tab，你就会看到。

有什么办法可以强制FF也有类似的行为吗？

还有一个相关的问题：如何在 Firefox 中始终如一地重现这种虚线轮廓行为？ Firefox 似乎并没有对所有链接都这样做，而且它似乎只在某些情况下发生。

例如，*** 上的大多数链接都没有这个问题，尽管没有 outline 覆盖。

【问题讨论】：

我可以在 Firefox 上到处重现这种行为。通常，当您激活链接（即单击它们）时，Firefox 会聚焦链接。显然，Chrome 没有。

由于某种原因我不能：codepen.io/anon/pen/ZQoMqv 这些链接在 Firefox 中没有表现出这种行为。

【参考方案1】：

听起来您只需要隐藏当前正在点击的链接的轮廓。

a:active outline:none

<p><a href="#1">Link 1</a></p>
<p><a href="#2">Link 2</a></p>
<p><a href="#3">Link 3</a></p>
<p><a href="#4">Link 4</a></p>

如果不是这样，请告诉我，我们可以朝着更完整的解决方案努力！

【讨论】：

这并不能解决问题。我正在使用的链接是 ajax 链接。单击它们后，活动状态不再适用，但由于页面未刷新，Firefox 仍将它们视为焦点。设置 a:focus outline:none 解决了这个问题，但它破坏了 Chrome 中的可访问性，因为该元素在切换时不再显示 chrome 的默认蓝色焦点轮廓。

@AgmLauncher 您能否提供一个演示该问题的演示，作为您问题中的堆栈 sn-p？或者，如果这不起作用，请提供指向您网页的链接。

这是一个内部工具，所以很遗憾我无法链接到它，而且 Firefox 似乎并没有在所有链接上都表现出这种行为。我在上面发布的news.yahoo.com 示例中确实如此（左侧的链接），但我似乎无法强迫 FF 这样做，因此尝试不同的修复非常困难。

那样的话，我不明白你想要什么。如果我编辑雅虎页面并添加我的 CSS，当您按下鼠标按钮时，新闻链接不会有轮廓，只有在完成点击时。这不是你想要的吗？

【参考方案2】：

使用这样的东西：

a::-moz-focus-inner

    outline: none;
    border-color: transparent;

border-color 是 Firefox 中的虚线，是的，这没有任何意义，但就是这样。