Active vs. focus links
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 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
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
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
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.