Active vs. Focus Links

— Topic: CSS

After the great feedback regarding my last article, I started thinking about the various ways that browsers handle a:active vs. a:focus links. I decided to just whip up a quick example of differences between the major contenders. I was surprised to find that only Firefox behaves as expected, with the other popular ones offering their own interpretations. Let’s compare the results.

Demo: Link Examples – Active / Focus (View Source).

The demo page uses a simple table that is 100% height and width, with 20 columns and 20 rows. It each data cell contains a dead link, simply for the purposes of showing how they are handled in a cross-browser situation. This is of course not proper use of a table, but makes for a good demonstration. The left shots show a:active, and the right show a:focus and a:hover.

Firefox

Firefox Example

Firefox behaves as expected, and displays a solid 2 pixel outline that is inverted color for a:active. When the link is clicked, then the mouse leaves the link, it turns grey with a dotted outline. This is the a:focus state. The mouse button is no longer being held down, thus it is focused but not active.

Internet Explorer

IE6 Example

Internet Explorer 6 on Windows behaves a bit differently. It seems to consider the a:active and a:focus states to be the same thing, but mixes the two. Here, the focused state has a dotted outline, but a red background. Note that the CSS outline is ignored, and there is a typical 1 pixel wide dotted outline.

Opera

Opera Example

My suspicions about Opera were confirmed with this example test. This browser is probably the least friendly from an accessibility standpoint, because it has no a:focus indicator whatsoever. It has neither a dotted outline, nor background change, making it worse than Internet Explorer.

Safari

Safari Example

Note: With tabbing link selection enabled, it shows a:focus via the keyboard.

Safari comes up in the middle of the pack. It appropriately applies the solid color-inverted outline on a:active, but neglects to do anything special for a:focus, the same as Opera. It’s a toss-up between Safari and IE6 for second place. Firefox leads the way, as Opera trails behind in dead last.

Latest Entries

Me, Elsewhere

icons by Komodo Media

Powered by Fusion Ads
 

JS Tutorial, JavaScript Tutorial, JavaScript Guide, Learn JavaScript JS, How To Learn JS, Learning JavaScript
Promote JavaScript


Disclaimer

The thoughts and opinions expressed here are mine alone, and are not necessarily shared by any other living person.