Home About Me

Removing the Dotted Link Outline Without Losing Keyboard Access

2026-09-01

Clicking a link or button with a mouse often leaves a dotted outline behind. It can look untidy, and plenty of people want it gone. I would still be careful about removing it. Taking the outline away may make the page feel cleaner, but it also removes a useful cue and can make the interface harder to use, especially for people who navigate with a keyboard.

When someone tabs through a page, the focus outline is often the only visible sign of where they are. If it is removed, a link or button may still receive focus, but the visitor has no clear way to tell which element is active. In practice, that can make keyboard navigation confusing or impossible. Some objects may seem to have no focus state at all.

That matters because a website is not only a visual surface. Accessibility is part of the work, and it is often more demanding than it looks. If you decide to remove the dotted outline, try to keep an alternative in place. One option is to add an accesskey attribute and pair it with a visible note or hint nearby, so visitors can use a shortcut to reach items that no longer show focus. It is not a perfect substitute, but it is better than leaving keyboard users with no signal.

There are several common ways to remove the dotted outline.

1. The CSS outline property (recommended for IE9, Firefox, and similar browsers)

In newer browsers, including IE9 and Firefox, set outline:none. Firefox also accepts -moz-outline:none.

a:focus {
  outline:none;
  -moz-outline:none;
}

2. IE's hidefocus="true" attribute (for IE8 and below)

For IE versions before 9, use hidefocus:

<a href="index.php" hidefocus="true"></a>

3. this.blur() on the onfocus event

This works well in practice, although it is not very semantic. The idea is to remove focus as soon as the element receives it.

<a href="index.php" onfocus="this.blur();"></a>

These approaches can be combined. For IE9, Firefox, and other browsers that support it, use the CSS outline method. In other cases, try hidefocus or this.blur(). For JavaScript, you can loop over the links:

var anchors = document.getElementsByTagName('a');
for (var i=0; i < anchors.length; i++) {
  anchors[i].hideFocus = true;
}
// Or use this.blur(), for example like this
var anchors = document.getElementsByTagName('a');
for (var i=0; i < anchors.length; i++) {
  anchors[i].onfocus = function() {
    this.blur();
  }
}

The drawback is that this loops through every <a> element. Sometimes you may want to keep the outline on some links while removing it only from selected ones. For IE9, Firefox, Chrome, Safari, and similar browsers, define a class such as .hidefocus:

.hidefocus:focus {
  outline:none;
  -moz-outline:none;
}

Then apply it to the links you want to change:

<a class="hidefocus" href="index.php">链接文本</a>

For IE versions below 9, the same class can be used as a marker: find the links with class hidefocus, then set hideFocus or call this.blur() on them. A common approach is getElementsByClassName, but IE below 9 does not support it natively. Compatible implementations of getElementsByClassName exist; once one is available, you can insert a conditional script like this:

<!--[if lt IE 9]>
<script type="text/javascript">
addDOMLoadEvent(
    function() {
        var anchors = getElementsByClassName('hidefocus');
  for (var i=0; i<anchors.length; i++) {
    anchors[i].hideFocus = true;
  }
    }
);
</script>
<![endif]-->

The point is not to treat the dotted outline as a purely cosmetic defect. If you remove it, do so selectively, and keep keyboard users in mind. A cleaner-looking link is not worth much if the page becomes harder to navigate.

Related Posts