Journal

Active vs. Focus Links

13 January 2006 › 8 comments

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.

Discussion + Dissension

1. #1 Elliot Swan

   Very interesting test.

   After all this talk, I’ll bet that styling a:focus links is going to be the new fad.

   I think it would be cool anyways, even if it’ll only work in FF.

2. #2 Bradley

   Curious to see other :focus tests on elements other than the “a” element.

3. #3 Nathan Smith

   Bradley: Good point. For the pseudo :focus class on anything but an a href, Internet Explorer won’t show anything at all. So, for accessibility reasons, I think that Firefox is leading the way. Although, Safari is pretty close behind.

4. #4 Yannick

   Very interesting indeed. I would have thought Opera and Safari would have had it working correctly. I am sure in the next updates they will though.

5. #5 Ryan Heneise

   Neat test. Actually, the :focus element does work on Safari, but only using the Tab key and not after a mousedown action. Here’s a screenshot. Also, Safari has some kind of funky element inside the table cell.

   On the Mac end, this test worked as expected on Camino, which uses the same rendering engine as Firefox. Shiira behaved exactly like Safari, and OmniWeb didn’t even lay out the table properly (see screenshot)

6. #6 Nathan Smith

   Ryan: Yeah, I had noticed that, and made a little comment about it below the Safari diagram. What’s odd is that it treats the   that I’m using for the link as another clickable area, outlining it with a dotted border. It should only outline the box, as I’ve styled each a href to be 100% width and height of its containing data cell. Not only that, but I had set font-size: 0; Very odd.

7. #7 James Mitchell

   Interesting test. Thanks Nathan.

   I agree with Bradley, it would be neat to see how the other :focus attribute works on other elements.

8. #8 Nathan Smith

   James: I think that for the most part Firefox, Opera and Safari all render the :focus pseudo class correctly for just about every possible way it could be applied. IE6 on the other hand, does not render it at all, excpet for the unique way in which it handles focused a href links, synonymous with a:active.

Comments closed after 2 weeks.