There are two methods for removing the dotted rectangle from active links, but both make it difficult for visitors to move around the website.
How to do it
The original method to remove the dotted rectangle was through JavaScript, using onFocus=“this.blur()”.
Now that major browsers support CSS, using CSS is the preferred method (as it does not rely on the visitor having JavaScript turned on). By adding the following code to the <head> section of the document, the dotted outline will be removed from active links:
<style type="text/css">
:active, :focus{
outline:none;
}
</style>
If you want to learn CSS, two of its creators have written a book about it:
- Cascading Style Sheets at Amazon.com
- Cascading Style Sheets at Amazon.co.uk (for British readers)
Why not to do it
Using the JavaScript method makes it impossible for visitors to tab through links or form elements, making the site unusable for visitors who don’t use a pointing device (these visitors need not be disabled; many people resort to keys for a time when their mouse needs replacing). The CSS method also causes difficulty — although visitors can tab through links and form elements, they will not be able to tell which element currently has the focus.
For more information on links, forms, and other usability issues, try Jakob Nielsen’s excellent book, Designing Web Usability:
- Designing Web Usability at Amazon.com
- Designing Web Usability at Amazon.co.uk (for British readers)