Have you noticed the link outline?

August 12, 2009 1:56 AM

Have you noticed the link outline?

When you click on links, before the page loads a dotted border appears arond the link called the link outline. Would you prefer professional looking sites to not display this outline? Wish i could show an exampe of a site.

* I'm pretty sure Internet Explorer does not support the disabling of the outline. I know Firefox does

posted by jakubsnm to computers & internet (10 comments total)

You're talking about the focus; that shows which control on a page is being acted upon. People can see that by clicking somewhere in the background of a page (somewhere that doesn't do anything) and the pressing 'Tab' a couple of times; that will cycle the focus, so that one link is highlighted (outlined, in your parlance), then the next, then the next. By pressing the Space Bar or Enter, the link in focus will be selected.

I would be spectacularly annoyed with a website the disabled this outline, given that it would make it impossible for me to know what control on a page was in focus, thus making keyboard navigation quite difficult, if not impossible. If you disable that outline, how will people know what'll happen if they press the Enter key at any given time?
posted by koeselitz at 2:28 AM on August 12 [3 favorites]

Also, you can't find an example of a professional-looking site that disables the focus outline because there aren't any.
posted by koeselitz at 2:30 AM on August 12

I never notice it unless I'm looking for it. It's pretty subtle. It is useful for keyboard surfing, though.
posted by Solomon at 2:41 AM on August 12

Generally you should only mess with the focus rectangle if there's a sensible reason to remove focus or give focus to something more appropriate. Sometimes AJAXy-type pages need to manipulate focus to minimise visual distractions or improve accessibility, and customising styling might be appropriate for something like a touch-screen kiosk, but otherwise it's best left alone.
posted by malevolent at 2:41 AM on August 12

Yes, I notice the outline, and when it distracts me, I click on the page background, which then unfocuses everything on the page.

koeselitz: for some reason I was compelled to repeatedly hit the tab button until it sat on the [+] after your post, and then hit enter.
posted by idiopath at 3:30 AM on August 12

I notice it. I like it and I find it useful.
posted by fire&wings at 3:37 AM on August 12

People can see that by clicking somewhere in the background of a page (somewhere that doesn't do anything) and the pressing 'Tab' a couple of times

Only if that feature is turned on in their browser. My 'tab' only switches between input fields and ignores links, because I hate that, myself.

There are two different functions sort of muddled in this thread. The (1) keyboard-navigation is one specific feature that uses the outline one way. But the way actually referred to in the question, however, is just about (2) mid-click highlighting (outlining, in this case) of a link. You can change one without changing the other: keyboard nav could work while mouse-is-pressed feedback is disabled, or vice versa.

So if I can summon my old UI/IX designer ghost-hat from the closet for a moment, he'd say this: if you remove the default mouse-is-down feedback that the outline is providing, you must replace it with something else, such as an active-link color or other indicator that a mouse click in the middle of happening. It's important from a usability standpoint to have "down" states in order for a website (or any software app) to feel "real" and interact-with-able.

And if you ever click one of those image submit buttons on a form that does NOT show a down-state, you'll notice what I'm talking about. It feels wrong, as if you didn't really click it.
posted by rokusan at 3:38 AM on August 12

Roger Johansson would not be pleased if you hid the outline.
posted by puffmoike at 3:44 AM on August 12 [1 favorite]

Yeah, the focus outline is needed for accessibility reasons. Watch out for browser reset css files disabling it!

You can style it to make it fit in with the aesthetic of your site more with some css, e.g.:

a {outline: 2px blue dashed;}
posted by jzed at 3:44 AM on August 12

Oh, hell no! I often open links in another tab, go read / skim the content, then return to the original page by closing the newly opened tab. The focus rectangle instantly tells me where I was in the original text when I opened the new tab.
posted by planetthoughtful at 9:54 PM on August 12