My wife brought up a question she was asked about the dotted-line box that shows up around a link when you use the back button to return to a page, like the picture at the right. Is it possible to remove the box? Yes it is, but there are a few things to consider before doing that.
The box is an outline box (which appears outside of the border in the CSS box model) for links which have focus. The link gains focus when you click on it, and does not lose focus when you use the back button to return to the page. While this is true on Firefox and Internet Explorer, Safari does not appear to give a link focus when it’s clicked, which is why you don’t see the behavior on Safari.
Many people use the outline box as a visual cue to confirm what link was clicked. It can also be useful to know what to click next in a series of links, especially if there is no distinction between unvisited and visited links (such as color).
Perhaps the most important use of decorating links which have focus is to indicate what’s going on when using the keyboard to navigate the page. When you use the Tab key to go from one element to the next you’re changing the keyboard focus, and the elements get an outline to tell you that element is active. For Safari on a Mac, you can hold down the Option key to be able to tab between links, and the link with focus will have a blue outline as seen to the right.
Because Firefox 3.x on the Mac uses native form controls, focus outlines are an interesting hybrid. Form controls with focus have the same blue outline you see in other Mac applications, but the links have the dotted outline. The other thing about Firefox/Mac is you may notice that Tab only gives focus to text fields, skipping links and even other form controls. That’s a global system default which you can change in System Preferences > Keyboard & Mouse > Keyboard Shortcuts > Full keyboard access. If you wish to only temporarily change the setting, Control-F7 will toggle the setting.
While that may seem a bit confusing, Safari/Mac has even more combinations. If “Full keyboard access” is disabled, Safari will tab between menus and text fields. If you Option-Tab, other form values and links will also get selected. If you enable “Full keyboard access”, Tab will also select toolbar buttons (including bookmarks and tabs) and all form controls. Using Option-Tab will let you also select the links. There’s also an option to swap the meaning of Tab and Option-Tab. The combinations do follow a certain logic, once your head has stopped spinning.
All the writing about keyboard navigation hopefully explains why leaving the dotted box is useful, since that way you know where you are on the page when using the keyboard. If, however, you really wish to remove the outlines, you can do that with CSS:
a:focus { outline: none }
but that will effectively make keyboard navigation not usable on the page, most likely making it not conform to many web accessibility standards and regulations.
I read somewhere that you can use a:active to disable the outline for a clicked link (as opposed to one which has focus from keyboard navigation), but I wasn’t able to get that to work.
