How do you remove the dotted outline in Firefox links WITHOUT harming accessibility?

Question

There are many questions/answers about how to remove the dotted outline on javascript / ajax links in Firefox, but they all recommend setting the outline property to 0, which harms accessibility. Moreover, it skirts the issue: Firefox focus behavior is the issue, not how the focus is styled.

In Chrome, clicking an ajax link does not produce focus. It only starts to focus when you begin tabbing. Firefox on the other hand, aggressively places focus when you click the mouse.

Is there a way to get Firefox to behave more like chrome when it comes to focus being set by mouse clicks, without having to sacrifice accessibility by setting outline to none or 0.

Example of this effect can be seen on http://news.yahoo.com. In FF if you down click the links on the left (but move your mouse off the link before click release), you'll see the dotted outline. In chrome if you do the same, you won't see the outline, but you will once you start hitting tab.

Is there any way to force FF to have a similar behavior?

And a related question: how do you consistently reproduce this dotted outline behavior in Firefox? Firefox does not seem to do this with all links, and it appears to happen only under certain circumstances.

For instance, most links on StackOverflow do not have this issue, despite not having an outline override.

Answer 1

Sounds like all you need is to suppress the outline on links that are currently being clicked on.

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>

If this is not it, please let me know and we can work towards a more complete solution!

Answer 2

Use something like this:

a::-moz-focus-inner
{
    outline: none;
    border-color: transparent;
}

The border-color is the dotted thing in firefox, yes that makes no sense but that's like that.